- Create a Vite + React Application
- Remove uncessary code and create a Hello World app
- Install Tailwind CSS and setup with Vite: https://tailwindcss.com/docs/guides/vite
- Install component liberary DaisyUI and complete its configuration with component Integration test.
- Add Navbar component to App.jsx
- Create Navbar seperate JSX component
- Install React Router DOM > create Browser Router Routes => Route => Body => RouteChildrens
- Create an Outlet in Body Component
- Create Footer
- Logo: https://www.svgrepo.com/svg/445298/people-distance-solid
- Create Login Page
- Install axios
- CORS - install cors on backend, add middleware to app with configurations: origin: url & credentials:true
- Whenever making an API call so pass the options as credentials: true (without this config authentication will failed, it will not pass token back to other API calls)
- Read Redux Toolkit - https://redux-toolkit.js.org/tutorials/quick-start
- install react-redux + @reduxjs/toolkit
- configureStore => Provider => createSlice => ass reducer to store
- Add Redux DevTool extension on chrome and check if data is populating properly from Redux store.
- NavBar should update as soon as User login. (With Redux store subscribe the component)
- Refactor code - create api/network and other URL file.
- Create folder structure and refactor code.
- Restrict access to other web pages without authentication - token check.
- If token is not present redirect user to login page
- Logout Functionality - API Integration & set notification.
- react-toastify added for Notification
- Integrate Notification with react-toastify & redux-toolkit
- Feed Page, Redux, API Integration.
- Create UserCard component & add Props validation.
- Profile Page create and add form details.
- Add Preview in Profile page.
- Connections Page created.
- Connection Request Page created.
- Feature - Accept/Request profile completed.
- Skeleton loaded component created.
- Redux store updated for Connections & Request with data & loading state
- Enhancement of Connections & Request page completed.
- Send/Ignore user card from Feed.
- Signup UI component creation and integration.
- End2End testing of Application.
- Fix Warning/Error from console.