Project : my-youtube-project

1. Planning
2. Tech Stack
3. Features

Planning

Rough Drawing => Excalidraw Figma Drawing

Tech Stack

1. UI Layer => React
2. Data Layer => Redux Toolkit
3. Routing => react-router-dom
4. Styling => tailwindcss, styled-components
5. Bundler => React + Vite
6. Testing => jest
7. Backend => Youtube Live APIs

Features

• Search Functionality
  • Debouncing
• Lazy Loading
• Live Chat2.
  • Caching
• Nested Comments

Third Party Packages

1. styled-components
2. tailwindcss
3. react-icons

Developer Comfort VScode Extensions

Code :

• Bracket Pair Colorization
• React Snippets
• emojisence AI :
• codeGPT
• Blackbox
• Codeium Git :
• GitLens
• Git Grapg
• Git History Drawing :
• Figma
• Excalidraw

Hoisting

• netlify => https://my-youtube-website.netlify.app

React Roter working in netlify

In your public folder create a file called _redirects with no extension. Then, type the following inside it: /* /index.html 200

Commit and push to your github. Then React Router it handles all the routes.Netlify must know where to redirect you to. That is what we are specifying in the _redirects file.

APIs

• Developers Youtube

Industry Standards

• Don't write above 100 lines.

Folder Structure

• src
  • main.jsx
  • index.css
  • App.jsx
  • App.css
  • Assets