https://github.com/puzant/movies-tracker

React App to discover & search movies
https://github.com/puzant/movies-tracker

reactjs tailwindcss typescipt

Last synced: 4 months ago
JSON representation

React App to discover & search movies

• Host: GitHub
• URL: https://github.com/puzant/movies-tracker
• Owner: puzant
• Created: 2023-09-30T20:27:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-13T17:42:32.000Z (about 1 year ago)
• Last Synced: 2024-04-14T12:30:57.444Z (about 1 year ago)
• Topics: reactjs, tailwindcss, typescipt
• Language: TypeScript
• Homepage: https://react-app-movies-tracker.netlify.app/
• Size: 3.78 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Movie Tracker App :movie_camera:

[![Netlify Status](https://api.netlify.com/api/v1/badges/69b08752-c859-4ab6-a550-e45447ffb753/deploy-status)](https://app.netlify.com/sites/react-app-movies-tracker/deploys)

![Version](https://img.shields.io/badge/version-v1.0-blue)

![License](https://img.shields.io/badge/license-MIT-green)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=flat&logo=react&logoColor=%2361DAFB)

![React Query](https://img.shields.io/badge/-React%20Query-FF4154?style=flat&logo=react%20query&logoColor=white)

![React Router](https://img.shields.io/badge/React_Router-CA4245?style=flat&logo=react-router&logoColor=white)

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat&logo=typescript&logoColor=white)

![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=flat&logo=tailwind-css&logoColor=white)

![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=flat&logo=vite&logoColor=white)

![Jest](https://img.shields.io/badge/-jest-%23C21325?style=flat&logo=jest&logoColor=white)

![Testing-Library](https://img.shields.io/badge/-TestingLibrary-%23E33332?style=flat&logo=testing-library&logoColor=white)

**Live demo**: [Movie tracker app](https://react-app-movies-tracker.netlify.app/)

**Testing**: [Code coverage report](https://puzant.github.io/movies-tracker/)

Welcome to the React Movie Tracker App! This application allows users to track and manage their favorite movies, explore movie details, search for movies, and much more.

> This front-end React application was developed purely for fun. You can explore the newest movies and obtaining additional details about them. If you have a [TMDb account](https://www.themoviedb.org/), you have the option to log in to the app, enabling you to rate movies, include them in your favorites list, and access your profile overview.

## Preview

![app-screenshot](./public/app-screenshot.png)

## Features 🚀

### 1. Overview Page

- Filters and sorting options for movie lists.

- Genre selection for customized movie exploration.

- Infinite loading as users scroll through movie lists.

### 2. Movie Details Page

- Users can add movies to favorites, watch list, or rate them (requires login).

- Access to movie reviews, cast, and related information.

- Display of movie-related details.

### 3. Search

- Users can search for movies.

### 4. Upcoming Movies

- A dedicated page displaying upcoming movies.

- Infinite loading for user convenience.

### 5. User Authentication

- Users can log in.

- Manage favorite movies, watch later lists, and rate movies.

- Remove movie ratings.

## Technologies Used 🤖

- ReactJS with TypeScript: Building the user interface.

- React Query: Handling data fetching and server state management.

- React Router: Managing navigation between pages.

- Tailwind CSS: Styling the app for a modern look.

- Zustand: State management.

- Axios: Making API requests.

- Material UI: UI components.

- Headless UI: UI elements.

- Luxon: Date formatting.

- Formik with Yup: Form handling & validation

- React i18next: For handling translation

## Getting Started

This app was bootstrapped using Vite. Follow the steps below to run the app locally:

1. Clone the repository.

2. Install dependencies using `npm install`.

3. Start the development server using `npm run dev`.

4. The App should be live at `port:5173`