hdmovies database webapp

Check out the cool webapp below -

Visit Website

Overview

This is a movies database application with top notch frontend tech like Redux & SCSS. Using the TMDB movies Api I created a database webapp where a user can go and search the trenidng, toprated and every other movie and tv show available on the internet and choose his next Sunday night watch!

Tech Stack

The following technologies:

• React 18
• Redux Toolkit
• Vite
• Sass
• TMDB Api
• Axios
• Netlify

Objectives

The idea is described in the following points:

• This is a webapp with multiple pages. The Home page opens up on visiting the website and the user can search for a specific movie or lookup up the popular or to prated ones.
• Easy maintainable and scalable folder structure
• Created carousel/slider without library just like in popular steraming platforms
• Created Infinite scrolling cause movies collection should be endless!
• Loading Skeleton while fetching data from API
• Error handling & 404 forbidden page
• Redux Toolkit used to hold state data throughout the app
• Responsive layout with perfectly placed media queries
• I access the movie database info from the TMDB api.
• Implement best practices and standards when structuring the files using nested elements, indentation, comments, and line breaks
• Implemented CSS styling via class, id and element selectors using external stylesheets, inline styles and embedded style tags.I used Sass instead of vanilla CSS to better format the css file.
• Used Vite instead of Create-React-App as Vite is provides better features likes faster hot reload and less project setup time.
• I used netlify to deploy and host the app as it is very convenient and free.

how to run this project on your local system

• Clone the repo
• Run npm install to get the dependencies
• Get the api key from Api
• Create a .env file to store your personal api key
• Run the app npm run dev