Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pavankulal9/m-flix

M-Flix is a web application built using the famous and well-known JavaScript library React. This is a movie review app, and due to the use of React, the user interface is smooth, providing a user-friendly experience. The app showcases movie reviews, including their description, rating, availability, release date, and many other details.
https://github.com/pavankulal9/m-flix

css html5 javascript movie-reviews reactjs sass-framework

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/pavankulal9/m-flix
Owner: Pavankulal9
License: mit
Created: 2024-02-16T11:34:23.000Z (12 months ago)
Default Branch: main
Last Pushed: 2024-12-17T06:54:21.000Z (about 2 months ago)
Last Synced: 2024-12-17T07:50:13.983Z (about 2 months ago)
Topics: css, html5, javascript, movie-reviews, reactjs, sass-framework
Language: JavaScript
Homepage: https://m-flix-react-app.netlify.app
Size: 465 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

## M-FLIX
M-Flix is a web application built using the famous and well-known JavaScript library React. This is a movie review app, and due to the use of React, the user interface is smooth, providing a user-friendly experience. The app showcases movie reviews, including their description, rating, availability, release date, and many other details. Please check the feature section below for more information.

## Features

- **Feature 1: Seach Movie**
- Search your favourite movie by entering the movie name precisively at the top right conner and click the search button it will show the list of movies based on your search

- **Feature 2: Menu Bar**
- If want more Movies recomendation you can click on hambeerger icon on the left side and a menu bar will open. you can select any movies suggestion you want like popular movies and popular movies page will open. Scroll down and you will see 'More' button click on it get more movies.

- **Feature 3: My Favourite**
- If you want to add your Favourite movies so that you can acess easly latter then select a movie that you want by searching or if get in the any Any of the Section in the home page then click on it a Movie page will open i will show all the detail on about the movie. At the bottom you will find 'Add Favourite' button click on it. A pop up will show that your movies has been saved to My Favourite which in menu bar open there the movies will be saved.

## Tech Stack

- JavaScript
- React
- Frontend-tools: React-Query, TanStack-Query, React Router Dom, Sass
- Backend & API: TMDB.

## Screenshots

- **Home Page:**
![Main Page](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702104515/M-Flix/home_page_1_libb4e.png)
-
![Main Page](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702104608/M-Flix/home_page_2_nhrlho.png)
-
![Main Page](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702104619/M-Flix/home_page_3_gwinhj.png)

- **Movie Details:**
- I recommed watch this movie!
![Movie details](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702104938/M-Flix/movie_details_go5xkt.png)

- **Search Movie:**
![Search](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702105191/M-Flix/search_lc9hji.png)
- I recommed watch this movie!
![Searched Movie](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702105213/M-Flix/kantara_ejkwmc.png)

- **Menu Bar:**
![Menu bar](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702105528/M-Flix/menu_bar_xjybzt.png)

- **Genre:**
![Genre](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702105629/M-Flix/genre_pehxd9.png)
![Genre Page](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702105696/M-Flix/genres_a2yof2.png)

- **Add to favoriets:**
![Add to favoriets button](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702105874/M-Flix/add_to_fav_zu8wwc.png)

- **My Favorites:**
![My favorites page](https://res.cloudinary.com/dnh2skxdh/image/upload/v1702105980/M-Flix/my_favList_qjtqnh.png)

## License

This project is licensed under the [MIT License](LICENSE).

## Reference

If you want a reference,But note that and have added lot of thing here by my self. you can watch this video [6 Pack Programmer/NETFLIX CLONE PROJECT, REACT JS COURSE 2023]([https://www.youtube.com/watch?v=fdcruaIiQxc](https://youtu.be/Y11HewNi3xc?si=FeiqLVhRtNxydTC7)).(Recomed to use latest React-Query by referring to this video [Cosden Solutions/React-Query]([https://www.youtube.com/watch?v=pBgQhZcQxMw](https://youtu.be/8K1N3fE-cDs?si=r1H81sWyo401-AB9))).

## Contact

- [Pavan] - [[email protected]]
- [LinkedIn](https://www.linkedin.com/in/pavan-kulal-0a105b268/)

---
#React#ReactQuery#TanStackQuery#Sass 🚀