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 frontend. 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, SCSS knowledge

Run Locally

After extracting files, you need to go the file directory and run

Install dependencies

 npm install

Go to the project directory and Start the server

  npm run start

Option 2 Clone my Repo from GitHub

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

Change directory and run the application

  cd Movies-Site-Assignment

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.