Having a profile is one of the most commons 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 React Application 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
-
Navigate to your repo and create a Pull Request
You will start building the app creating the REST API. Create the app
using the irongenerator
with the --auth
flag. Then, modify the model so the User.js
have the following fields:
- username. String
- password. String
- campus. String. Possible values:
Madrid
,Barcelona
,Miami
,Paris
,Berlin
,Amsterdam
,México
,Sao Paulo
- course. String. Possible values:
WebDev
,UX/UI
,Data Science
. - image. String
The app will need the following routes:
Method | Endpoint | Parameters | Return Value |
---|---|---|---|
POST | /auth/login |
username, password | User logged |
POST | /auth/signup |
username, password, campus, course | User created |
POST | /auth/upload |
file | User updated |
POST | /auth/edit |
username, campus, course | User updated |
GET | /auth/logout |
OK Message | |
GET | /auth/loggedin |
User logged |
:::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 it's stored on the assets
folder, but for now, do not 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 (the same way we learned in class). You have to create the following methods:
- Signup. Make a POST request to the
auth/signup
route passing username, password, campus and course info. - Login. Make a POST request to the
auth/login
route passing username and password. - Upload. Make a POST request to the
auth/upload
route passing the file. - Edit. Make a POST request to the
auth/edit
route passing username, campus and course. - Logout. Make a GET request to the
auth/logout
route to destroy user session. - Loggedin. Make a GET request to the
auth/loggedin
route to check if a user is logged.
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.
Finally, you can style your app. On the assets
folder, you will find all the files you need. And here, you can check the color:
- Gradient background color: #C1DFC4 to #DEECDD
- Green ---> #638165
- Red ---> #D0021B