Streamy Using React + Vite

Routes

• /
  • home page - background poster & movies based on trending and popularity
• /:media_type/:id
  • details page - details, cast & videos of movie and tv shows
• /search/:query
  • search page - infinite scroll based on the search query
• /explore/:media_type
  • explore page - filter of genres, sort_by & infinite scroll for movie and tv shows
• * - 404 page - page not found

npm modules

• @reduxjs/toolkit
• axios
• dayjs
• react-circular-progressbar
• react-icons
• react-lazy-load-image-component
• react-player
• react-redux
• react-router-dom
• react-select
• sass

File Structure

• public - streamy logo shows in tab
• src
  • assets - images like avatar, no-photo etc..
  • components
    • cards - card like structure for movie, video & cast
    • carousel - scroll large list of movie card
    • form - filter and switching tab for fetching new request
    • helpers - rearly used and used for specific purpose
    • layout - mostly used component like header, footer & content wrapper
    • skeletons - showing when the data is in loading state
    • ui - small and mostly re-usable components like spinner, lazy load image etc..
  • pages - pages describe same as in Routes above
  • routes - set up custom routes using react-router-dom
  • services - fetching data using rtk qury modify data before set in store
  • store - store global state of fetch data and managed by react redux
  • App.jsx - providing store state the whole app
  • index.scss - reset css and set basic style in root
  • main.jsx - get root element and render app
  • mixins.scss - set up quick responsive design
• index.html - root element for single page application
• .gitignore - file name that you want push into github
• package.json - list of all dependencies that used in project

Project Setup

To run project locally

• Clone repo
• npm install in root directory to install all depedncies
• Set for environment variables in root
  • VITE_APP_TMDB_TOKEN - for get access of tmdb api to get result - get on tmdb site by login and get token
• npm run dev to start project