UOLKut PB Challenge

✏️ Description

It's a alternative application, like the old "orkut", with auth forms, profile dashboard, search users and profiles.

💻 How to run

After you clone the repository and do a npm i command to install all the required packages, it's only have a few more steps to run the application correctly.

In this project we used a fake rest api made with json-server, and the only command you need to run to server is npm run server, it'll execute a custom script, make sure to run this command before start the project, if you don't do this, the project will not run correctly.

After this you can run a simple npm run dev in another terminal and the project will execute normally.

📱 Main Techs

🎆 Extra Techs

• React hook form
• React Hot Toast
• Json Server
• Json Server Auth
• JavaScript Cookie
• Axios

📄 Pages

• FormPage - The pagination in this page it's made with 'Outlet' component from the react-router-dom, so when you change the "url", the only page part that changes it's the form
• Profile Page
• Edit Profile Page

📁 Project Structure

├─── public
├─── src
│   ├─── api: Contains only the `db.json` file, the entire api runs by script
│   ├─── components
│   ├─── assets
│   ├─── config
│   ├─── context
│   ├─── hooks
│   ├─── interfaces
│   ├─── styles: Contains files like global styles and global theme
│   ├─── pages: Contains the pages files
│   └─── utils

✨ Features

• Login and register forms with real authentication
• Dynamic Data in profile with Context API and Session Storage
• Error handling server-side, like services offline, or wrong credentials in login, using pop up, made with react-hot-toast.
• Authentication, implementation and correct use of JWT.
• Search for users by name.
• When searching, show a list of results, where each result can be clicked to see that user's profile.
• Functionality to edit the password if the user forgets it.

💥 Problems Faced

We tried to keep a clean html structure, with semantic code, and in components we tried to avoid to use JS logic to change the layout, keeping the layout changes in the styled-components files, alternating css rules with custom props.

Pages like the main profile page were more hard than we expected, do the grid management without add unnecessary html structure and manipulate only with css was a really good challenge.