hack4impact-calpoly / city-farm-slo Goto Github PK
View Code? Open in Web Editor NEWA volunteer and shift management platform that helps onboard new volunteers.
A volunteer and shift management platform that helps onboard new volunteers.
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
:
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.
Create a Volunteer Model for MongoDB. It should have the following fields:
Also create the following two routes (if time permits)
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
Recommended
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
:
If time permits:
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.
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:
If time permits:
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.
After a user signs up for an event, the /register
route should return the user who signed up.
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
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:
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!
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
Extra Credit
We're going to need to make some changes to the Volunteer data structure in order to accommodate Volunteers under 18. This task involves:
If time permits:
/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.
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.
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:
react-router-dom
as a dependencyHome
.Home
is the default page of our appPlease 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:
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
Choose One or Both
Time to make the last page for the volunteer flow -- the waiver page! In this task you will:
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:
signedWaiver
boolean field and a dateSigned Date field to the Volunteer modelvolunteer/:id/signWaiver
route that sets the value of signedWaiver to true for that volunteer and sets dateSigned to the current timeWe 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
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
Extra Credit
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 itRight 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:
If time permits:
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:
Also create the following two routes (if time permits)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.