https://github.com/ridwanullahi-code/movie-search-app
Develop a movie search app that allows users to search for movies by title or genre, and displays detailed information about each movie. Use React for the front-end and Redux for state management, Typescript for type checking, and TailwindCSS for styling. Host the code on GitHub and deploy the app on Render.
https://github.com/ridwanullahi-code/movie-search-app
css html javascript react redux
Last synced: 2 months ago
JSON representation
Develop a movie search app that allows users to search for movies by title or genre, and displays detailed information about each movie. Use React for the front-end and Redux for state management, Typescript for type checking, and TailwindCSS for styling. Host the code on GitHub and deploy the app on Render.
- Host: GitHub
- URL: https://github.com/ridwanullahi-code/movie-search-app
- Owner: Ridwanullahi-code
- Created: 2022-11-07T18:24:08.000Z (over 3 years ago)
- Default Branch: development
- Last Pushed: 2023-03-06T06:56:50.000Z (over 3 years ago)
- Last Synced: 2025-03-25T07:17:21.102Z (about 1 year ago)
- Topics: css, html, javascript, react, redux
- Language: JavaScript
- Homepage:
- Size: 2.35 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## **Project Demo**
[Live Demo](https://movieweb-app.netlify.app/)
## **Description**
**A Movie Search App** that allows users to search for movies by title or genre, and displays detailed information about each movie.
The application is designed to provide users with a user-friendly interface that displays relevant movie information and allows users to save their favorite movies.
Use React for the front end and Redux for state management, JavaScript for creating interactive websites, and CSS for styling. Deploy the app on Render. Follow software development best practices like code reviews, automated testing, and continuous integration.
## **Features:**
- Home page: A landing page that displays popular movies and provides a search bar to search for movies.
- Search: A search bar that allows users to search for movies by title, genre, or actor.
- Movie Details: A page that displays detailed information about a movie, including the title, genre, director, actors, synopsis, and ratings.
- Favorite Movies: A page that displays a list of the user's favorite movies and allows them to add or remove movies.
- Login/Sign Up: A page that allows users to create an account or log in to an existing account to save their favorite movies.
## **Frontend Technology Stack:**
- HTML, CSS, and JavaScript: To build the user interface and create a responsive design.
- Use [HTML Semantic and CSS best practice](https://github.com/microverseinc/curriculum-html-css/blob/main/articles/html_css_best_practices.md) to improve web accessibility and user experience
- [React.js](https://github.com/microverseinc/curriculum-react-redux/blob/main/math-magicians/lessons/what_is_react.md): To create a dynamic and interactive user interface.
- [Tailwind CSS](https://tailwindcss.com/docs/installation): To style the application and create a modern and professional look.
- Use TMDB API : To fetch movie data and display it on the application.
- Use Redux: To store user's favorite movies and retrieve them when the user logs in.
- Use GitHub flow
- Use [Gitflow](https://github.com/microverseinc/curriculum-transversal-skills/blob/main/git-github/gitflow.md).
## **Project Deliverables:**
- A functional and responsive application that meets the requirements specified in the project description.
- Source code with proper documentation.
- User manual and installation instructions.
## **Prerequisites:**
- Basic Knowledge of HTML & CSS
- Basic Knowledge of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) & [ES6](https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/lessons/lesson_es6-what_is_it_about.md) syntax
- Basic Knowledge of [React Setup](https://reactjs.org/docs/getting-started.html) setup
- [Tailwind CSS](https://tailwindcss.com/docs/installation)
## **SETUP**
To make use of this project, kindly run any of the following commands.
```
git clone https://github.com/Ridwanullahi-code/Movie-Search-App.git
```
or
```
git clone git@github.com:Ridwanullahi-code/Movie-Search-App.git
```
## **INSTALL**
```
npm install
```
## **Run On Server**
To run the project on server, run below command
```
npm start
```
## **Run Test**
To test run the project
## **Show your support**
Give a ⭐️ if you like this project!
## **Authors**
- Github: [Ridwan](https://github.com/Ridwanullahi-code)
- LinkedIn: [Ridwan](https://www.linkedin.com/in/ajayi-ridwan/)
## 🚀 **About Me**
I'm full stack software developer, Computer science, and Microverse student.
**Stack:** Python, JavaScript, Bootstrap, Ruby, Rails, React, Redux. Available for hire!
## 🤝 **Contributing**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/Ridwanullahi-code/Movie-Search-App/issues/)
## **Acknowledgements**
- [Microverse](https://www.microverse.org/)
## **License**
This project is [MIT](https://choosealicense.com/licenses/mit/LICENSE) licensed.