hack4impact-calpoly / city-farm-slo Goto Github PK

Call the /signwaiver route from the back end after the user clicks on the register button on the sign waiver page. Note that you may need to lift state from the signup page to figure out the id of the user who is signing it.

Dependent on task #86

Using our volunteer model, create a couple of routes for volunteers. Feel free to look at the event routes for reference. This should go in /backend/routes/volunteer.js:

• GET /volunteer/:id - Method that returns a volunteer based on the id passed in. Throw an error if there is no volunteer associated with the id
• POST /volunteer/register- Method that adds a volunteer to MongoDB if their email is unique. Additionally, it adds the existing or new volunteer to the volunteers array in the event they are registering for. All data should be passed into the body, including the eventId they are registering for. Throws an error if fields are missing, wrong, or the eventid doesn't exist. Return the volunteer that was registered as well as an isNew boolean indicating if this is a new or existing volunteer.

Create a styled sign up page based off of this Figma: https://www.figma.com/file/AU4DBu8GtFmivr0q971PpY/cityfarmslo-high-fidel?node-id=18%3A56 . You can build your work off of the existing UserSignUp component.

• When styling focus more on layout and colors, don't worry about if you can't get it to perfectly match. Also, don't worry about adding any modal functionality or the image in the background
• Use styled-components for CSS

Create a Volunteer Model for MongoDB. It should have the following fields:

• firstName: String
• lastName: String
• email: String
• phone: String
• notes: String

Also create the following two routes (if time permits)

• GET /volunteer/:id - Method that returns a volunteer based on the id passed in
• POST /volunteer/add - Method that adds a volunteer to MongoDB (data passed in body, this should also accept an eventId that won't be used for now)

Time to finally make our site's home page! You can use this Figma mockup as reference. Don't worry about anything inside of the dark blue section now, just use an empty div as a placeholder for now. If you can make the "return to City Farm SLO link functional, that would be great! It should link here.

Our project will need to send a confirmation email after a user decides to sign up for an event. You'll be researching the technology needed to that.

Requirements

• Research popular email packages on the NPM website. I know some ones H4I has used in the past include Node Mailer and Mailchimp
• Decide which email package to use. A written justification in Notion could be helpful, but isn't required

Recommended

• Write a script showing the package in action! I have no idea how long this will take, so no worries if you can't finish it.

Now that we have our Event model, we need Event routes to actually use them. For this task, please make the following routes in /backend/routes/event.js :

• GET /events - Method that returns all events in the database
• POST /event/add - Method that adds an event to MongoDB (data passed in body). Throws an error if the event doesn't match the existing schema. Initialize volunteers to an empty array.

If time permits:

• GET /events/:id - Method that returns the event with the provided id. Throws an error if there is no event associated with that id.

When a user registers for an event, they should be greeted with an email with info about the event they registered for. We don't have the exact content of the email decided yet, so if you can send an email containing all of the event's info, that would be great for now. I'd recommend looking into Nodemailer to get this done, although there are many tools you can use.

To complete this task, make the Express route POST /mail/register, which accepts a user data type and an event datatype in the body and emails the user info about the event they are registering for. This article looks like it could be a good starting point.

Draft

Create the age selection page designed in this Figma page. Add the page to routing and connect it to the homepage and signup pages.

If time permits, add a state variable to home.jsx that tracks if the user isAdult and set it on the ageSelect page. This implementation should be similar to how we lift state for the selectedEvent state.

• Set up the Prettier pre-commit hook
• Set up Airbnb ESLint (config to work with prettier)

City Farm SLO has a waiver that all new volunteers must sign in order to work at the farm. Research a digital document signing program similar to Adobe sign that can either be embedded into our website or emailed after a volunteer signs up. Try to keep it free and be aware that some programs do offer discounts and free programs specifically for nonprofits.

Use the /volunteer/register route from issue #41 in the sign up page in order to send the user we created to the backend. Note that we don't need a useEffect hook since we're posting data, not getting it. If time permits, catch any errors thrown by the API route and display an error message

Our new Figma mock ups have a new color scheme! For this task you will:

• Go to the SignUpForm and RegistrationComplete components and adjust the colors accordingly
• Import the font used in the Figma (Urbanist) and make it the default font (you may use App.css if necessary)

If time permits:

• View all existing components and replace any css width values that are in pixels with percentages. Test this out by resizing your browser window!

Most of the modals have a return button for users to go back to the previous page (such as the top left of this Figma page). Create this component and test it, but don't add it to any of the pages yet.

• Add a MD file for setting up backend
• Add a MD file for setting up frontend
• Add MD file for making PRs

After a user signs up for an event, the /register route should return the user who signed up.

• First check that the register route is behaving as intended and that we are checking for existing users. A user is considered returning if their email is already in the DB. We will assume a user has signed the waiver if their email is already in the DB. However, we will always make a new user unless both their email and first name are in the DB.
• On the frontend, when the user is returned, check the signedWaiver field. If signedWaiver is false, route them to the waiver page. Otherwise, route them to the registration-complete page

Using the work from the design modal PR, change the signup and confirmation pages so they look like the Figma mockups with the background image, rounded corners, and blue backgrounds.

Please reach out if you have any questions!

Many of the Figma mockups use a modal, which is a design pattern where a small popup appears over an existing webpage (notice how you can still see the homepage on the borders of the webpage). For this task you will

• Research the best way to implement the modal. I'd recommend faking it by getting a static image of the homepage (you can do this in Figma, then putting the content in a smaller, centered div, but you can also look into a MUI Modal Component or another Modal from npm
• Create a component called HomeModal which creates this modal effect and accepts content in the children prop that the HomeModal will render. Demonstrate a way that you can change the content in the modal either using routing or conditional rendering in your PR.

This task is kinda complicated, so please let me know if you have any questions!

Right now we are using a proxy in frontend/package.json to fix CORS errors. However, when we need to deploy our website I don't think this will work. Remove the proxy and follow this guide to prevent CORS Errors.

In order to get from the homepage to the signup page, a user will need to click on an event on the calendar and then be taken to the signup page where the event will be displayed. In this task you will:

• Change the event click so it stores the event that was clicked on in the selectedEvent state.
• Pass this selected event to the sign up page. Note that this may require lifting state to App.tsx so the selectedEvent can be passed through a route, although you may also be able to use route params instead.

Create the RegistationComplete component based on this Figma mockup: https://www.figma.com/file/AU4DBu8GtFmivr0q971PpY/cityfarmslo-high-fidel?node-id=18%3A160 .

Please use styled-components, and don't worry about the background around the modal, the content in the event card, or the functionality of the register for another event button.

Time to connect our calendar to the backend!

• Add a few dummy events to the backend
• In home.jsx, replace the existing events array with events populated by our backend route GET /events. You should make the call in a useEffect hook and store the events in a state variable

Users will need need to fill out a couple text fields to sign up for an event. For this task, you will set up the form that should be necessary to sign up. This task was inspired by the existing sign up page here, but please don't worry about any styling yet!

Requirements

• Using the text fields from the MUI library, set up a form that accepts a name, email, phone number, and any notes. Please note you may have to install the mui library using npm if it hasn't already been installed.
• For now, console.log all of the info in a single JS object when the user clicks the submit button

Extra Credit

• Using an NPM package like react-hook-form or formik, add validation and small error messages if the user doesn't fill out a required field or formats their email or phone number wrong

We're going to need to make some changes to the Volunteer data structure in order to accommodate Volunteers under 18. This task involves:

• Change the Volunteer model to match the new structure described in this Notion page
• Change the validation for the model to match the validation column in the same notion page

If time permits:

• Change the Volunteer /register route so it accepts all of the info for someone under 18 (or just make a new route called /registerUnder18

Add the necessary inputs to the waiver page depicted in these two figma pages: page 1, page 2. This page will use conditional rendering based off the following isAdult prop. Both of these are booleans and can be hardcoded for now.

• Click here to indicate ... and print your name should always be displayed.
• Print parental name (shown in page 1) should display if under 18 is false
• You can ignore the registering for others button for now

Check out this page for more info on conditional rendering in React

Add the see notes button to button to event card component based on the Figma mockups.

• If an event doesn't have notes, don't show the see notes button.
• If see notes is clicked, remove all content on the event card except the event title and display the notes. (Look into conditional rendering)
• If see notes is clicked, replace the see notes button with a see event info button
• If see event info is clicked, revert back to the original event display.

Dependent on Issue #67

React Router is not set up in the project yet! For this task you will set up React Router inside of App.jsx

Requirements:

• Install react-router-dom as a dependency
• Change App.jsx so the only content it contains is for routing
• Move all of the content that was in App.jsx into a new component called Home.
• Connect the Home component to React router so Home is the default page of our app

Please add the Event Card component to Signup and Confirmation pages. Use the selectedEvent state from Issue #45 to determine the content that goes into the component.

Add validation to the volunteer routes similar to how validation was added to the event routes in PR #60. The validation should include:

• Make sure firstName, lastName, email, and phone are present
• Make sure email and phone number are formatted correctly (feel free to change the validation in backand/models/volunteer.js if the validation you are adding conflicts)

Create the main component we'll use to display volunteer event information! This component should accept the same props as the back end structure for an event described in Issue #22, except use volunteerCount instead of the volunteers array.

I'll link the Figma mockup as soon as I get it!

Make a component called waiver, which will contain the embedded waiver pdf. Try to match the dimensions of the Figma mockup. We don't have the waiver yet, so just find a pdf with more than one page we can use for now. Don't worry about making the whole page, just the grey box that shows the pdf!

Edit the Home component to look like this Figma Mockup: https://www.figma.com/file/AU4DBu8GtFmivr0q971PpY/cityfarmslo-high-fidel?node-id=4%3A18

Please use styled-components. If you have time, find a calendar component to use on this page (I'd reccomend looking at FullCalendar, react-calendar, or react-datepicker).

After the user signs up for an event, we should email them a confirmation email. Using the /mail/register route, send a user an email after they click register on the signup page. Note that you will have to set some new environment variables in order to get this back end route to work correctly. You can get the environment variables from @vwinstea on Slack.

Our website is going to need a calendar! Instead of implementing a calendar from scratch, we should be using a node package that gives us the same functionality. Research the available Calendar packages and make a decision on which one our team should move forward with.

Requirements

• Look through NPM and see the available calendar components for React. Pay close attention to how popular they are, how useful the documentation is, and if it will be able to service the needs described in our PRD
• Be prepared to justify your decision! We will be working with this Calendar all quarter, so it better be good!

Choose One or Both

• Implement the Calendar component in React. Don't worry about styling, just make sure it works just to test it out
• Make a write up in a notion page documenting the options you looked at and the why you chose the one you did

Time to make the last page for the volunteer flow -- the waiver page! In this task you will:

• Make a webpage that looks like the Figma mockups, not worrying about functionality or the embedded pdf (just use an empty div)
• Change the routing so the user can go signup page -> waiver page -> registration complete page

In order to tell if a user has signed the waiver, we'll need to keep track of it in the backed. In this task you will:

• Add a signedWaiver boolean field and a dateSigned Date field to the Volunteer model
• Initialize signedWaiver to false whenever a volunteer is created (don't initialize dateSigned)
• Make a PUT volunteer/:id/signWaiver route that sets the value of signedWaiver to true for that volunteer and sets dateSigned to the current time

• Research best technology to use for backend (MongoDB or AWS DynamoDB)
• Create or Log In to a Hack4Impact Account
• Commit Boilerplate Code to backend folder

Add the back button from PR #56 to the bottom left page of each page that has it on the Figma. Also please change the RegistrationComplete component so the return to City Farm SLO button links back here

We have a new version of the hompage in v3 of our mockups. Design homepage before an event is clicked as well as after. Use conditional rendering in order to keep both versions of this page in the same component.

Note: As of 2/6 these designs are not finalized, so they are subject to change. I'll send out a message later this week when they are finalized so you don't have to make changes after the fact.

This may seem like a trivial task, but its actually much more complicated then you may think. There are countless ways to implement CSS in React, all of which have their pros and cons. The one's I've heard of/ worked with before include CSS modules, SCSS, Styled Components, and tailwind

Requirements

• Research the options above + any more you have found. Read opinions online and try them out yourself so you can get a feel for how they are
• Write a proposal in Notion ranking the options you explored and which one you think we should go with. A short pros and cons for each would be super helpful!

Every good project has some sort of Continuous Integration (CI) pipeline to make sure the code going in is good. CI is a way to automate linting and testing so it doesn't have to be performed manually. In this task, you will be using GitHub Actions to set up a CI pipeline that lints all incoming code. This page may provide some templates you could find useful. Ignore Continuous Delivery (CD) for now.

Requirements

• Use GitHub Actions
• CI pipeline should run ES Lint and Prettier on all code

Extra Credit

• Have the CI pipline build the frontend and run the test in frontend\src\App.test.js (feel free to adjust this test if it isn't passing -- you can run it using npm test). Building and testing is the most common feature of CI, so this may actually be a good starting point since there are more templates for it

A couple of CSS bugs I noticed that we should get fixed:

• #80
  
• #81
• #82
  
• #83
  

I'd highly recommend using your browser's responsive design mode to test these bugs on a variety of screen sizes. Don't worry about mobile sizes yet, but please do check smaller laptop screen sizes.

Right now we aren't validating the data we are putting in the backend. Make the following adjustments to the schemas for events and volunteers using this documentation:

• All fields should be required (except notes)
• A volunteer's email should be unique

If time permits:

• Make sure that the relevant API routes give useful error messages when violating these validation constraints
• Use regex to validate a user's email (should be a valid email format) and phone number (should only be numbers, no dashes)

In order to allow volunteers under 18 to sign up, we'll have to slightly alter the sign up and/or waiver pages so we can allow a parent to sign for them. Take a look at the sign up page and find a way to dynamically add or remove participants and ideally hook it up to the form too. You'd probably want your participants state to be an array of objects like this:

participants = [
  {first: "Adelle", last: "Vo"},
  {first: "Ryan", last: "Chan"}
]

Figma links: Initial View, I am registering others clicked, Participants added

This task ended up being more complicated than I expected, so if this ends up bleeding into finals week, no worries! As always, let me know if you have any questions.

Create a Event Model for MongodB. It should have the following fields:

• Name: String
• Location: String
• startTime: Date
• endTime: Date
• slots: Int
• notes: String
• Volunteers: [ObjectIds]

Also create the following two routes (if time permits)

• GET /events - Method that returns all events in the database
• POST /event/add - Method that adds an event to MongoDB (data passed in body)