Create Sign Up Page for Users

[ShyelSingh]

AT A GLANCE

You'll be making a new page to create users within our application

CONTEXT

Currently there is no way to add users other than through a complex process for the NPO. You'll be developing a page for basic sign up with name, email, and project that will take advantage of both our npo_info table and user table's API endpoints.

TECHNICAL DETAILS

• Create a new file within client/src/components named signup.jsx that we will be creating our form in
• Use Chakra's input components to add a field for both name and email
• Use a select component from Chakra to provide a dropdown with all available projects for users to be a part of
• Use our GET endpoint from the npo_info table to obtain both the id and name of each project, showing the user only the name
• Using a button, allow users to submit this form
  - [ ] On submission, use our POST endpoint for our users table to provide the name, email, and npo_id selected and create a new row in the table
  - [ ] Once the button is clicked, navigate users to our projects page
• Add a /signup route to both our Routes in App.tsx along with our navbar to ensure users can access it at any time
• Test to ensure users are added to users table

LEARNING GOALS

What's Important To Understand:

• Using GET endpoints to limit user choices within selections
• Taking in input from user and using that to interact with our database
• Using POST endpoints

RESOURCES

• Button
• Input
• Select