Having a profile is one of the most common features you will need to add on your projects, so today we are going to practice creating one.

We will create a backend REST API using NodeJS and a frontend using React where users will be able to signup, login, upload a profile picture, check their profiles and edit it.

• Fork this repo
• Clone this repo

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin master
  

• Create Pull Request so your TAs can check up your work.

You will start building the app creating the REST API. Create the app using the irongenerator. Then, create the user model so the User.js have the following fields:

• username, type String,
• password, type String
• campus, type String. Possible values: Madrid, Barcelona, Miami, Paris, Berlin, Amsterdam, México, Sao Paulo,
• course, type String. Possible values: WebDev, UX/UI, Data Analytics.
• image, type String.

The app will need the following routes:

:::info Remember to test the REST API using Postman, to make sure everything is working! 😉 :::

You should create a React App using the create-react-app. On the HomePage you only need to display two buttons: Signup and Login. Each of them should redirect to the routes /signup and login.

::: All the assets you need for the design are stored inside the assets folder, but for now, don't worry about that, focus on the functionality! :::

You should create an authService file, where you will have all the methods to call your REST API. You have to create the following methods:

• signup that makes a POST request to the auth/signup route passing username, password, campus and course info,
• login that makes a POST request to the auth/login route passing username and password,
• upload that makes a POST request to the auth/upload route passing the file,
• edit that makes a POST request to the auth/edit route passing username, campus and course,
• logout that makes a GET request to the auth/logout route to destroy user session,
• loggedin that makes a GET request to the auth/loggedin route to check if a user is logged in.

You should create the <Signup /> and <Login /> components, where the user will be able to fill the form with the specified fields.

If the signup or login is successful, the user must be redirected to the profile route.

On the profile route, the user should be able to upload a photo to the profile. In this iteration, you should create all that is necessary to upload a new profile picture and store it in the database.

Feel free to style it how ever you want. 🎨 Or you can use .png inside of the assets folder that you can use as a background image. Don't forget to copy the image inside public folder of your React app. Here you can check the colors:

• Gradient background color: #C1DFC4 to #DEECDD
• Green: #638165
• Red: #D0021B

Happy coding! ❤️