DevTinder

• Create a Vite + React application

• Remove unecessary code and create a Hello World app

• Install tailwind css

• Install Daisy UI

• Add nav Bar component to App.jsx

• Install react router dom

• Create Browser Router > Routes > Route=/ Body > Routechildren

• Create a outlet in your Body component

• Create a footer

• Create a login page

• Install axios

• CORS - install cors in backend => add middleware to app with configurations : origin and credentials: true

• Whenever you are making API call pass axions =>{withCredentials : true}

• Install Redux toolKit

• Install react-Redux + @reduxjs/toolkit =>create configure store =>provider =>create slice and export it properly and

• Add reducer to store

• Add redux devtools in chrome

• Login and see if your data is coming properly in the store

• NavBar should update as soon as user logs in

• Refactor our code to add constants file create a components folder

• You should be able to access to other routes without login

• if token is not present redirect user to login page

• logout

• Got the feed and the feed in the store

• build the userCard on feed in the store

• Edit profile feature

• Show toast Message on save profile

• See all my connections

• New Page See all my connections

• New Page - See all my Conenction REquest

• Feature Accept/Reject Connection Request

• You, now Uncommitted changes

• Body NavBar Route=/ => Feed Route=/login => login Route=/connections => connections Route=/profile => Profile

  RealTime Chat using WebSocket(socket.io)

  • Build the UI for chat window on /chat/:targetUserId
  • SetUp socket.io in backend
  • npm i socket.io
  • SetUp frontend socket.io-client
  • Initialize the chat
  • createSocketConnection
  • Listen to events
  • HomeWork: Improve the UI
  • HomeWork: Fix Security Bug - auth in web Sockets
  • HomeWork: Fix bug - if I'm not friend , then I should not be able to send message
  • Project ideas: Tic Tac
  • Project idea 2 : Chess