/MoviesTracker

An application with React to track movies

Primary LanguageTypeScript

Movies Tracker With React

Screenshot of the home page Screenshot of the movie details page

Table of Content

General Info

"Movies Tracker" is a web application built with React and TypeScript that allows users to create a collection of their favorites movies. I created this project to mainly practice my skills in React and TypeScript, with focus on practicing CRUD Operations, routing using React Router DOM and data management with React Query.

🛠️ Technologies used

  • React 18.3.1
  • TypeScript
  • React Router Dom 6.27.0
  • React Query 5.59.16
  • Json-server 0.17.4
  • React-fontawesome ^0.2.2

⚡To run the project

To run the project follow the steps bellow.

  1. Ensure Node.js is installed. To check it, run node -v in your terminal.
  2. Clone this repository and install the dependencies
git clone https://github.com/ThaynaraLimaa/MoviesTracker.git
cd MoviesTracker

npm install
  1. This application uses JSON Server to mock the backend, so you need start it before running the application. In the project root directory, open a new terminal and run:
npx json-server db.json
  1. Start the development server
npm run dev
  1. To view the application, open http://localhost:5173 in your browser

✨ Features

  • Add a Movie: Allows users to add new movies to their collection.
  • Edit Movies: Users can edit movie details directly in their collection.
  • Delete Movies: Enables users to remove movies from the collection.
  • API Error Handling: Displays error messages when there are issues with data fetching or saving.

To do

  • Implement movie search functionality
  • Add responsive design
  • Sorting Options
  • Enhanced Form Validation