Live Demo: https://movie-app100.netlify.app/

Please Click here to see the program in CodeSandBox

https://codesandbox.io/p/sandbox/adoring-feather-wdwdqn

CineQuest 🎥

A Complete ReactJS application.

Made by J Gaurav Varma

Project Description

CineQuest is a website designed to streamline the movie selection process based on user preferences inputted through three text fields: Country, Genre, and Language. Upon submission, the website suggests movies available in the JSON data that match the user's criteria. Utilizing the .map method, I dynamically filtered and rendered the matching movie data on the front end. To enhance user experience, I integrated unaliased MUI for rendering dropdown fields, ensuring a smoother, faster, and lighter system operation. Additionally, I prioritized responsiveness across all screen sizes by implementing custom styling directly in the SX, ensuring adaptability of fields and cards. The overall design aims to provide users with a visually appealing and pleasant browsing experience.

What I used

• ReactJS
• CSS
• MUI

Requirements

• Basic ReactJs knowledge
• Basic HTML, CSS knowledge

Run Locally

Clone my Repo from GitHub

Install dependencies

  git clone https://github.com/GauravOOO2/Movies-Site-Assignment.git

Change the directory and run the application

  cd Movies-Site-Assignment

Install Dependencies

 npm install

Start the server

  npm run start

Tools Used

• Code Editor: VS Code

Screenshots

Default Window

Filtered Window

This is the code component where the filter operation is performaed and movies are displayed.