Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simonc56/o-movies-front
Website to explore, review and rate movies based on TMDB data
https://github.com/simonc56/o-movies-front
cinema postgresql reactjs redux-toolkit tmdb-api
Last synced: about 1 month ago
JSON representation
Website to explore, review and rate movies based on TMDB data
- Host: GitHub
- URL: https://github.com/simonc56/o-movies-front
- Owner: simonc56
- Created: 2024-06-19T07:57:08.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-02T19:00:16.000Z (about 1 month ago)
- Last Synced: 2024-12-02T19:45:22.274Z (about 1 month ago)
- Topics: cinema, postgresql, reactjs, redux-toolkit, tmdb-api
- Language: TypeScript
- Homepage: https://omovies.simonc56-server.eddi.cloud
- Size: 2.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# O'Movies - front
[![React][react-badge]](https://react.dev/) [![Redux][redux-badge]](https://redux-toolkit.js.org/) [![Mantine][mantine-badge]](https://mantine.dev/)
Site web, conçu en un mois, pour les passionnés de cinéma. Il permet de consulter les informations sur les films existants et à paraître, faire des recherches, commenter, noter et faire des listes personnalisées de films.
La partie back-end est disponible ici : https://github.com/simonc56/o-movies-back
Source de données : [TMDB](https://www.themoviedb.org/)
[react-badge]: https://img.shields.io/badge/React-18-20232A?logo=react&logoColor=61DAFB
[redux-badge]: https://img.shields.io/badge/Redux_Toolkit-593d88?logo=redux&logoColor=white
[mantine-badge]: https://img.shields.io/badge/Mantine-7.11-blue
## Fonctionnalités
- Recherche de films par titre
- Affichage des films actuellement/prochainement au cinéma
- Création de compte utilisateur
- Création de playlists personnalisées
- Donner une note aux films
- Donner son avis sur les films (écrire un commentaire)
- Trier et filtrer les films par genre, date, popularité,...
- Voir la moyenne des notes données par les autres utilisateurs du site
## Installation
Cloner le repo :
```
git clone [email protected]:simonc56/filmovies-front.git
```
Installer les dépendances (avec npm, yarn ou pnpm) :
```
pnpm install
```
Copier le `.env.exemple` en `.env` et modifier la variable d'environnement pour communiquer avec la [partie back-end](https://github.com/simonc56/filmovies-back) du site.
```
VITE_API_BASE_URL=http://localhost:3000/api
```
⚠️ Il faut garder le chemin `/api` dans cette url.
Puis build :
```
pnpm build
```
Le site est prêt dans le répertoire `/dist`
Vous pouvez le tester avec :
```
pnpm preview
```
## Technologies utilisée
- html / css > https://developer.mozilla.org/fr/docs/Web
- sass > https://sass-lang.com/documentation/
- react > https://fr.react.dev/reference/react
- react-icons > https://react-icons.github.io/react-icons/
- redux toolkit > https://redux-toolkit.js.org/
- mantine > https://mantine.dev/
- axios > https://axios-http.com/fr/docs/intro
- eslint > https://eslint.org/docs/latest/use/getting-started