Profile page is one of the most common features you will need to add to your projects, so today we are going to practice creating one.
We will create a backend REST API using NodeJS and a front-end app 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
$ cd lab-profile-app
-
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 by creating the backend REST API. Create a new server app using the Ironlauncher with the command npx ironlauncher profile-app-server --json
.
Once done, create the user model in the user.model.js
file with the following fields:
- username: String,
- password: String
- campus: String. Possible values:
"Madrid"
,"Barcelona"
,"Miami"
,"Paris"
,"Berlin"
,"Amsterdam"
,"México"
,"Sao Paulo"
,"Lisbon"
,"Remote"
. - course: String. Possible values:
"Web Dev"
,"UX/UI"
,"Data Analytics"
,"Cyber Security"
. - image: String.
The server should have the following routes:
Method | Endpoint | Request | Return Value |
---|---|---|---|
POST | /auth/signup |
{ username , password , campus , course } |
User object |
POST | /auth/login |
{ username , password } |
Authentication Token |
GET | /auth/verify |
Current user object | |
PUT | /api/user |
{ image } |
Updated user object |
GET | /api/user |
Current user object | |
POST | /api/upload |
form-data with the image file | Image URL |
:::info Remember to test the REST API using Postman, to make sure everything is working! 😉 :::
Create a new React App using the command npx create-react-app profile-app-client
.
Once done, set up the app routing using the react-router-dom
. Create a page component called HomePage
that displays two buttons: Sign up
and Log in
. Buttons should redirect to the front-end routes /signup
and /login
respectively.
:::
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 the Signup
and Login
page components, where the user will be able to fill the form with the specified fields.
If the signup is successful, the user should be redirected to the Login Page page. If the login is successful, the user should be redirected to the Home Page page.
You should create a new folder named context/
and inside of it a file auth.context.js
. Inside of the file you should create a new Context object and the AuthProviderWrapper
component.
-
To create a Context object use the method
React.createContext()
(example). -
The
AuthProviderWrapper
component should have the following state variables for storing the user information and the authentication state:isLoggedIn
,isLoading
anduser
(example). -
The
AuthProviderWrapper
component should also have functionsverifyStoredToken
,logInUser
andlogOutUser
used for handling the authentication logic (example). You will need to provide the above mentioned state values and functions through thevalue
prop (example). -
Finally, remember to wrap the
<App />
component with the<AuthProviderWrapper></AuthProviderWrapper>
(example). -
Use the React hook
useContext()
to access the values coming from theAuthProviderWrapper
and to finish implementing the log in (example).
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.
Create an authService
file, where you will have the methods to abstract the axios requests to your REST API. Create the following methods:
- signUp that makes a
POST
request to the server endpoint/auth/signup
passing username, password, campus and course info, - logIn that makes a
POST
request to the server endpoint/auth/login
passing username and password, - verifyToken that makes a
GET
request to the server endpoint/auth/verify
to check if a user is logged in. - uploadPhoto that makes a
POST
request to the server endpoint/api/upload
and sends the file, - getCurrentUser that makes a
GET
request to the server endpoint/api/user
to retrieve the current user data, - editUser that makes a
PUT
request to the server endpoint/api/user
passing username, campus, course and image.
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 (or move) 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! ❤️