https://github.com/geo-mena/movie-app
https://github.com/geo-mena/movie-app
javascript reactjs tailwind
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/geo-mena/movie-app
- Owner: geo-mena
- Created: 2023-11-25T22:18:14.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-07-07T23:31:33.000Z (12 months ago)
- Last Synced: 2024-12-30T01:57:12.376Z (6 months ago)
- Topics: javascript, reactjs, tailwind
- Language: JavaScript
- Homepage: https://en-minutos.vercel.app/
- Size: 274 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Movie App
In general summary, **En Minutos** is a personal project that revolves around recommending movies and providing their summaries extracted from YouTube. Considering the high consumption of movie summaries, I thought it was a great idea to create a project that not only recommends but also allows users to view the summary if they don't have time to watch the entire film.
### Main features:
- Displays a list of all available movies, along with their respective posters, titles, release years, ratings, and editors.
- Allows users to search for a movie; if not found, a message will be displayed indicating that it is not available.
- Implements pagination, showing a maximum of 12 movies per page; this may vary for computers and phones with different screen sizes.
- Clicking on a selected movie will open a screen with all its details, including: **Title, release year, poster, category, rating, trailer, review, main cast, director, writer, and YouTube editor.**
- For the trailer, users need to click on "watch trailer," and a popup will open with the trailer video.
- As important information, at the bottom of the poster, you will find a button that, when clicked, will take you to the **streaming platform** where that movie is available.
- As users scroll, a video player will appear with a movie summary extracted from YouTube, corresponding to the previously mentioned editor.
- It is worth noting that the app is fully **responsive** across most devices.
### Setup
1. Clone the repository to your local machine using:
```sh
git clone https://github.com/geo-mena/movie-app.git
```
2. Navigate to the project directory with the following command:
```sh
cd movie-app
```
3. Install the project dependencies with:
```sh
npm install
```
### Running the Project
To start the development server, use the command:
```sh
npm run dev
```
To build the project for production, use the command:
```sh
npm run build
```
To start the production server, use the command:
```sh
npm run start
```
### Resources
- API: It was developed in Python using Django and later deployed on **RENDER.** [See API](https://api-movies-exam.onrender.com/movies)
- DB: It was implemented in PostgreSQL and similarly deployed on **RENDER.**
- Docker: for improved API deployment.
- The project is built with **React.**
- React Router is used for navigation within the application.
- The project includes various React components, such as MovieDetail, MovieList, Loading, Footer, and Header.
- React Player is utilized for playing the trailers and summaries of the movies.
- The application's styles are written in separate CSS files for each component.
- ESLint is used for static code analysis and to identify coding issues.
- **VERCEL** is used for deploying the application: [See APP](https://en-minutos.vercel.app/)
- Also, it's worth mentioning that **POSTMAN** was used for querying and updating movies.
#### If you've made it this far, thank you very much.
> Geovanni Mena
