Giters

agdwm / lab-profile-app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

logo_ironhack_blue 7

IronProfile

Introduction

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.

Requirements

  • Fork this repo
  • Clone this repo

Submission

  • 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

Deliverables

Iteration 1 - The REST API

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! 😉 :::

Iteration 2 - The React App

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.

image

::: 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! :::

Iteration 3 - Auth Service

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.

Iteration 4 - Signup/Login Components

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.

image

image

Iteration 5 - Upload the Photo

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.

image

Iteration 5 - Styling your App

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

About