• Clone the repo

  git clone https://github.com/supriya-kotturu/movie-corner.git
  

• Install the dependencies

  npm install
  

• Build the files

  npm run build
  

• Run the tests

  npm run test
  

• Run the application in dev mode

  npm run dev
  

• Run the application

  npm start
  

• set up tailwind.css - reusable classnames with @apply
• add basic animations with framer-motion
• implement SSR for displaying movie lists
• Dashboard Component Layout - fetches the movie lists
  • Movie Component - child of Dashboard, shows the movie details
  • List Component - Carrosel component containing the list of movies
  • Get Random movie Card - display a random movie from the selected genre
• Pagination
• Dark mode based on user system pereferences
• Optimize component rerendering
• Add Redux-query for fetching requests
• Add Toggle button for dark mode
• Add Unit Tests
• Publish on Netlify

Page automatically switches to dark mode based on current system preferences of the user.

To try light/dark mode try switching the system preferences to dark mode

• On windows, go to settings > prersonalization > colors > choose dark/light in the dropdown

Tests are still not written for the components.

• next.js
• typescript
• tailwindcss
• framer-motion