Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/dulanjalisenarathna/react-js-movie-web-application

React js movie application
https://github.com/dulanjalisenarathna/react-js-movie-web-application

movie movie-website movies movies-api movies-web-app movies-website moviesapp moviewebsite react react-movie-app react-movie-app-github react-router reactjs sass sass-mixins the-movie-database-api tv-series tv-shows tvseries tvshows

Last synced: 3 months ago
JSON representation

React js movie application

Awesome Lists containing this project

README

        

# Cinemx
A complete React js movie application.

**live demo: [https://cinemx.vercel.app/](https://cinemx.vercel.app/)**

---

### Made with ❤️ by [Dulanjali Senarathna](https://www.linkedin.com/in/dulanjali-senarathna/)

---

## Project Description

Cinemx contains all the functionalities that a movie website should have. Users can search for any movie/ tv show and the site will filter results and display them on a beautiful screen. Also, users can show all the trending movies and tv shows. Users can see popular, top-rated movies and tv shows. Users can see a single movie/tv show's details by clicking on a specific movie/ tv show. Bottom of the movie details page, the user can show related official videos. Anyone can see what is similar movies to the movie on the details page at the bottom of the page. Anyone can play the movie trailer using a video popup. Users can explore movies/tv shows by clicking the movies and tv shows the button in the header section. On explore page users can filter movies by their genres and also can sort.

## What I used

- [React](https://reactjs.org/)
- [React Redux](https://redux.js.org/)
- [The Movie Database API](https://www.themoviedb.org/)
- [React icons](https://react-icons.netlify.com/)
- [Vite](https://vitejs.dev/)
- More...

## Requirements

- Basic ReactJs knowledge
- Basic HTML, SCSS knowledge

## Getting Started

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

```shell
npm install
```

and after that start the dev server.

```shell
npm run dev
```

## Tools Used

1. Favicon: [Flaticon.com](https://www.flaticon.com/)
1. Code Editor: [VS Code](https://code.visualstudio.com/)

---

## FAQ

### Q: What are the prerequisites?

basics of html, css, javascript and some basic knowledge of react is enough to start this project. Rest you will learn in the tutorial.

### Q: Who the project is for?

The project is for the people who wanna get more skilled in `ReactJs`.

---

## Feedback

If you have any feedback, please reach out to us at [Dulanjali Senarathna](https://www.behance.net/dulanjasenarathna)

Happy Coding! 🚀

# Website's screenshots

## Home page

![1](https://user-images.githubusercontent.com/59603716/231998833-674974b5-bbda-4c2b-b7c9-8216e53cb9b5.PNG)
![2](https://user-images.githubusercontent.com/59603716/231998607-98921ba3-9a3f-44f8-a232-7ed645a0ab1c.PNG)
![3](https://user-images.githubusercontent.com/59603716/232000511-aa4c6ef0-77c5-4c99-9580-94aee52c2a6a.PNG)
![4](https://user-images.githubusercontent.com/59603716/232000621-9ce512ec-4bc7-4f70-bdb6-c6f3ec840f4c.PNG)
![5](https://user-images.githubusercontent.com/59603716/232000769-506e5560-ce1a-4f5d-8849-a64843600157.PNG)
![6](https://user-images.githubusercontent.com/59603716/232000908-3fe1cbc7-e326-484c-a63d-c5eeee99dc0b.PNG)
![7](https://user-images.githubusercontent.com/59603716/232001018-3d17317b-d148-4048-8fdd-f9f132f840ff.PNG)
![8](https://user-images.githubusercontent.com/59603716/232001089-61d87119-6986-4660-9ad3-70c9987e8334.PNG)

## Single movie detail
![9](https://user-images.githubusercontent.com/59603716/232001496-b737eafb-fb25-4578-9d2a-8a2ecf821c50.PNG)
![11](https://user-images.githubusercontent.com/59603716/232020563-e81d9a6a-10ac-461b-ba42-97f4521248b6.PNG)
![12](https://user-images.githubusercontent.com/59603716/232020582-3e0008e0-4577-42e4-b7f4-9fefb617f794.PNG)
![13](https://user-images.githubusercontent.com/59603716/232020605-258460ee-9802-4698-833f-c6188c4baa2d.PNG)

## Play trailer
![10](https://user-images.githubusercontent.com/59603716/232020438-ae399084-4946-4c0f-8af8-bbcfa11a3b11.PNG)

## Explore movies
![15](https://user-images.githubusercontent.com/59603716/232020764-4207ccbe-f19d-4f41-a1fa-887d8606005b.PNG)

## Explore tv
![16](https://user-images.githubusercontent.com/59603716/232020852-f0e74fa7-0c32-48b9-a583-038e0f02e5c1.PNG)

## Not found
![17](https://user-images.githubusercontent.com/59603716/232020936-875538ae-0437-4416-a5c7-95eb6f34d2de.PNG)

## Search results
![18](https://user-images.githubusercontent.com/59603716/232020981-f4110f04-c6c1-4ecc-8b88-5597c11c8619.PNG)