Description

This is a research task. No code is required to complete this issue, but feel free to follow demos/tutorials to get a working test (if desired).
This task is meant to get you comfortable with looking for a technology that will be useful for our current project, with the end goal of implementing it into our app. It will help you learn how to judge pros and cons when choosing technologies, and understand how our app is built from the ground-up. As you can tell, it's harder for me to outline a step-by-step process for this type of task, but I have a few goals in mind:

• We want our app to have regular login: email + password. Some methods use Google OAuth (Google Sign In), but we will focus on the former according to our project specifications.

Success Metrics Checklist

• Look into AWS Amplify Features, specifically check if Amplify Auth is what we need for this app. If not, look into alternate methods.
• Formulate a document with your findings (can be as long as you deem necessary, don't worry -- I'm not grading you or anything). Also add anything you think was/will be helpful.

No need to submit a pull request for this task, just let me know when it's complete!

Description

Create the "Make a Donation - Location" screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue). This screen is extremely similar to the "Make a Donation - Item View" #9 so please reuse any components already coded in said screen when making this one.

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "donation" (if it already exists, skip this step)
3. Navigate into that folder named "donation"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• Error pops up for any empty input fields
• Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Add basic routing to the app. Let me know if you have any questions.

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the "Profile" screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue).

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "profile" (if it already exists, skip this step)
3. Navigate into that folder named "profile"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• Cursor changes when hovering over the "edit" button.

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Connect the current unstyled amplify login page, create account page, and forgot password page with our styled Habitat For Humanity /auth screens

This video should be really helpful: https://www.youtube.com/watch?v=t1Sceb1tmvA
Also feel free to reach out to me! I'm here to help! @ObjectJosh

Success Metrics Checklist

• Login is connected and works
• Create account is connected and works
• Forgot password is connected and works

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Make a Donation - Schedule (Drop off)/(Pickup)" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create a basic forgot password page based on Figma. Include error handling for input fields. If an error occurs, an alert pops up describing the error. Store all input fields in a state variable so it can be formatted as a JSON object later

Setup

1. Navigate to /frontend/src/components/
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Responsive screen handling
• Error pops up for invalid/empty input field
• Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

[BUG] Top part of the logo image on the navbar is too close/cut off for screen widths of 567px and above:

Description

Create admin view's active donations page based on Figma.
Use Materials UI for the bulk of this table view!

Setup

1. Navigate to /frontend/src/components/admin/
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Table items are clickable (eventually they will open a new page)
• Have it map from some dummy json data

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the home page screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue).

Setup

1. Navigate to /frontend/src/components/
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• The "Make a Donation" Button is clickable (but doesn't need to navigate to anywhere yet)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create a basic "create an account" page based on Figma. Include error handling for input fields. If an error occurs, an alert pops up describing the error. Store all input fields in a state variable so it can be formatted as a JSON object later
* Note: I would just name this component CreateAccount, rather than CreateAnAccount

Setup

1. Navigate to /frontend/src/components/
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Responsive screen handling
• Error pops up for invalid/empty input field
• Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Import and use color variables in /frontend/src/config/colors.css for "Create an Account" screen.

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the "[Contact Info Added] Make a Donation - Review + Submit (Drop off/Pickup)" screen based on Figma. These components are basically done in previous pages. Please reuse as much as possible!

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "donation" (if it already exists, skip this step)
3. Navigate into that folder named "donation"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the navbar based on Figma. This should basically be a component that is on top of certain screens, so take that into account when building this.

Setup

1. Navigate to /frontend/src/components/
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Responsive screen handling
• The underline switches based on which button on the navbar the user clicks

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the "Make a Donation - Schedule (Drop off)" screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue). For this screen, please reuse this component: instead of coding it from scratch. Check the Figma to see which screen you may be able to get it from! (Hint: it's also in the donator view) The component should be completed by the time you start this task... but if not, just leave said component blank and let me know in a comment when submitting the pull request.

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "donation" (if it already exists, skip this step)
3. Navigate into that folder named "donation"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Log In" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the "Make a Donation - Next Steps" screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue). For this screen, please reuse this component:

and adjust it according to your screen on Figma, instead of coding it from scratch. Check the Figma to see which screen you may be able to get it from! (Hint: it's also in the donator view) The component should be completed by the time you start this task... but if not, just leave said component blank and let me know in a comment when submitting the pull request.

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "donation" (if it already exists, skip this step)
3. Navigate into that folder named "donation"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• Prompt user to make a call when phone number is clicked (Refer to the functionality of their website's contact section at the bottom)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Connect our frontend "Create Account Page" to add new users/accounts to our database.

Currently users can create multiple accounts within our user database with the same information. Before adding a new user/account, check that the email isn't already in our database. This should prevent creating duplicate users/accounts if there is already an account linked to the email.

Success Metrics Checklist

• Connect Create Account page to Database
• Create backend route to find user by email
• Create frontend API method to call backend email endpoint
• Only 1 account can be created per email

Finally, on your pull request, please request a code review from (@ObjectJosh)

Navbar and underline moves over a little after selecting.
This is a minor issue. Labeled "wontfix". Will fix after MVP.

Description

Responsively switch to mobile view for "Forgot Password" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Required Library Specs:

• UI similar to Google Calendar, where you can scan through weeks/months
• Shows an event's details
  At minimum:
  • Name
  • Contact info (email, phone)
  • Address
  • Text (for which volunteer was assigned to this pick-up)

Nice to Have Specs:

• Event is editable
• Can mark as done / complete
• Can detect onClick -> to be able to handle when the user clicks on the event (such as navigating to another page in our website)

Recommendations

• Google Calendar API
• Calendly API
• React MUI Calendar

Description

Responsively switch to mobile view for "Home Page" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the "Make a Donation - Item Info" screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue). For the "Upload Your Images" section, just have it match the Figma for now, no need to code functionality for this part.

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "donation" (if it already exists, skip this step)
3. Navigate into that folder named "donation"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• Error pops up for any empty input fields
• Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

This is an interesting one. If you compare the desktop view vs. the mobile view, you can see that the schedule process is "split". If it's mobile view, it directs you to this page to reduce over-cluttering. Let me know if you're not sure what I'm talking about.
Responsively switch to mobile view for "Make a Donation - Time Availability" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma
• Page is scrollable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

This is a research and testing task. Some code may be required to prove functionality, if possible.
This task is meant to get you comfortable with Express.js. As you learned in the bootcamp, Express is used in the backend. You'll be applying what you learned and did in bootcamp into our app. As you can tell, it's harder for me to outline a step-by-step process for this type of task, but I have a few goals in mind:

• Get Express working in our app

• You may need to request some permissions on MongoDB Atlas from me (@ObjectJosh)

Success Metrics Checklist

• Understand the functionality of Express.js in the app (see "For Reference" below)
• Implement Express into our app (time permitting) Once you are comfortable & want to give it a try, check out the reference guides below (and online) & let me know if you run into any blockers. I have set up the /backend folder, server.ts file, and installed Express already <--(Express.js steps 1 & 2)

For Reference:

• Bootcamp
• Bootcamp Milestone 4
• Express.js

If you got to the point of setting it up in the app/testing it, submit a pull request!

Description

Create the "Profile - Edit" screen based on Figma. Don't worry about the navbar at the top for this task (this was assigned in a separate issue).

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "profile" (if it already exists, skip this step)
3. Navigate into that folder named "profile"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• Error pops up for invalid/empty input field
• Cursor changes on hover for buttons
• Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Just like in your bootcamp, in this task you'll need to edit the server.js file in /backend and connect files in the /api folder you create.

Success Metrics Checklist

• Successfully connected frontend and backend (test it out to make sure!)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create the success page based on Figma. Include error handling for input fields. If an error occurs, an alert pops up describing the error. Store all input fields in a state variable so it can be formatted as a JSON object later

Setup

1. Navigate to /frontend/src/components/
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Responsive screen handling

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Make a Donation - Review (Drop Off)/(Pickup)" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Set up AWS Amplify for our app

• You may need to request some permissions from me (@ObjectJosh)

Success Metrics Checklist

• Set up AWS Amplify Authentication/Login for our app

If you got to the point of setting it up in the app/testing it, submit a pull request!

Before starting this issue, please make sure that #11 is complete.

Description

Create the "Make a Donation - Review + Submit" page based on Figma. There are three screens for it on Figma, "Make a Donation - Review + Submit (Drop off)", "Make a Donation - Review + Submit (Pick up)", and "[Multiple Photos] Make a Donation - Schedule + Submit (Pick Up)", but it is really just one page (see image at the bottom of this issue). Please conditionally render the "ReStore Drop Off Hours" vs. "Time Availability" based on the user's input when they filled out their Scheduling section. See images:


For this issue, you don't need to grab any real data from previous screens... we'll do that later. I would recommend making some "dummy data" and displaying it as on the Figma (let me know if you have any questions on this). As always please reuse code -- anything you find similar from previous screens! Don't worry about the navbar at the top for this task (this will be assigned in a separate issue).

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "donation" (if it already exists, skip this step)
3. Navigate into that folder named "donation"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Responsive screen handling
• The view is scrollable (for cases when the height of the screen doesn't all the content)
• The radio button under the "Scheduling" section is static / not clickable.
• The amount of images are scalable (see Figma)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Email confirmation of details when donor submits a new request.

Description

Create the "Profile - Edit" screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue).

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "profile" (if it already exists, skip this step)
3. Navigate into that folder named "profile"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• Error pops up for any empty/invalid input fields
• Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

This is a research and testing task. Some coding shall be done to prove functionality. We need to find the best library/API to implement into our app to fit the calendar scheduling needs based on the Figma.

• Please check in with me to bounce back ideas!

Success Metrics Checklist

• Find the best method for our app's needs regarding the calendar & scheduling

For Reference:

• React FullCalendar
• React BigCalendar
  • BigCalendar Docs

If you got to the point of setting it up in the app/testing it, submit a pull request!

Description

Add the rest of the donator routing to the app. Let me know if you have any questions.

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Make sure #51 is complete before starting this issue

Description

Create admin view's donation approval - donation info page based on Figma.
Most of this task is just making the card that it's contained in. The content is exactly the same as the screen made in #74

Setup

1. Navigate to /frontend/src/components/admin/donationApproval
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Have it map from some dummy json data

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

The content for the Create Account Page isn't fitted correctly within the card.
(https://www.figma.com/file/MNRQAXLXzBqCR3aRZmXg0T/Habitat-for-Humanity).
Most of this task is just making the card that it's contained in. The content is exactly the same as the screen made in #74

Screen location: http://localhost:3000/Donor/Donate/ScheduleDropoffPickup

Success Metrics Checklist

• Looks like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Before starting this issue, please make sure that #11 is complete.

Description

Create* the "Make a Donation - Schedule (Pickup)" screen based on Figma. Don't worry about the navbar at the top for this task (this will be assigned in a separate issue). This is a harder component to code, and definitely may take more than a week, so let me know if you're struggling with anything. Just do as much as you can in the current sprint, and I may need to reassign you to complete this for the next sprint.
NOTE: You will be conditionally rendering this part

when the "I need the item to be picked up" radio button is chosen.
*You are NOT making a completely new screen, you are adding to/updating the screen made in #11.
Please look into React's Materials UI library to see if you can implement any similar components. Doesn't have to look exactly the same if you're implementing a component (check in with @ObjectJosh!)

Setup

1. Navigate to /frontend/src/components/donation
2. Add your code to the screen made in #11

Success Metrics Checklist

• Looks exactly like the Figma (again, disregarding the navbar)
• Responsive screen handling
• Calendar date selector works
• Time slot selector works
• Save the dates + times chosen. This will require some thought on the best way to store & pass around this data.

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Make a Donation - Location" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Create An Account" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Make a Donation - Item Info" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create a basic login page based on Figma. Include error handling for input fields. If an error occurs, an alert pops up describing the error. Store all input fields in a state variable so it can be formatted as a JSON object later

Setup

1. Navigate to /frontend/src/components/
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Responsive screen handling
• Error pops up for invalid/empty input field
• Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Get rid of current hardcoded colors in css files & import colors.css config.

Description

Make make the frontend calendar working, format the date & times for the DB. For more info on the DB date formatting, feel free to message @brandonhuynh1
(https://www.figma.com/file/MNRQAXLXzBqCR3aRZmXg0T/Habitat-for-Humanity).
Most of this task is just making the card that it's contained in. The content is exactly the same as the screen made in #74

Screen location: http://localhost:3000/Donor/Donate/ScheduleDropoffPickup

Success Metrics Checklist

• Right now, when you click on a new date, it doesn't clear
• For dates that have at least one timeslot filled out, highlight it (color it) so the user knows
• Datetimes that were checked off are formatted correctly (message me if you need specifics)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Add show/hide password buttons on to the existing screens created in #1 and #2 pages based on Figma.

Success Metrics Checklist

• Looks exactly like the Figma
• Responsive screen handling (placement of button is static relative to the input field)
• Functionality of the button (password shows up as dots when "hidden")

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create admin view's donation approval - scheduling info page based on Figma.
Most of this task is just making the card that it's contained in. The content is exactly the same as the screen made in #74

Setup

1. Navigate to /frontend/src/components/admin/donationApproval
2. Create a folder with the PascalCase naming convention (name based on the component you're working on)
3. Inside the folder, create a .tsx file with the same name as the folder
4. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• Looks exactly like the Figma
• Have it map from some dummy json data

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Profile" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Responsively switch to mobile view for "Make a Donation - Confirmation" page based on Figma.
(Screens less than 640px width)

Success Metrics Checklist

• Looks exactly like the Figma

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Create admin view's donation approval - receipt page based on Figma.
This task is just adding the receipt content inside the card already created in #96

Success Metrics Checklist

• Looks exactly like the Figma
• Working input fields and saves in state variables

Finally, on your pull request, please request a code review from me (@ObjectJosh)