TODOLIST

📌 How to start

Client

npm start

Server

cd server
yarn add

Test E-mail & Password

E-mail : [email protected]
PW : 123412345

📌 Stacks

📌 Folder Tree

I tried to consider a principal of locality

├─assets
│  ├─fonts
│  ├─img
│  └─svg
├─atoms
├─Auth
│  ├─components
│  │  ├─Signin
│  │  └─Signup
│  └─hooks
├─components  //common components
├─constants
├─pages
│  ├─auth
│  └─todo
├─router
├─styles
├─Todo
│  ├─atoms
│  ├─TodoDetail
│  │  └─components
│  ├─TodoList
│  │  ├─components
│  │  └─hooks
│  │      ├─queries
│  │      └─recoils
│  ├─TodoModal
│  │  ├─components
│  │  │  ├─common
│  │  │  ├─todoAdd
│  │  │  └─todoUpdate
│  │  └─hooks
│  └─types
└─utils //axios, localstorage

📌 Features

Sign in & Sign out page

• E-mail & Password validation
  • Email must contain (@,.)
  • Password must be at least 8 characters
• when Sign in is success, user's email is saved as USERNAME in localstorage and it shows at the top of the app

To do list page

• to-do, to-do list CRUD
• For delete, update, add a to-do, use optimistic update by react-query
• When delete or log-out button is clicked, confrimed box for double check shows
• If a to-do in to-do list is clicked, the detail components for the clicked to-do is rendering
• If user click the log out button, the authenticated token is deleted and also username is deleted, then navigate to sign in page

Token check

• At the first time, app checks which available token is in localstorage or not, if there is the token, it moves to a main page but if not, it leads to sign in page
• When sign in works, a token is saved
• By axios intercepters, when CRUD happens, there is a token check and if there isn't valid token, redirect to sign in page

📌 Simulation

Sign up page

Sign in page

Add to-do

Update to-do