README.md

🚗 Car Manager

A responsive CRUD app for managing a list of cars. Bootstrapped with Vite + React, styled with Tailwind CSS, and animated with Framer Motion.

Features

• Full CRUD: Create, Read, Update, and Delete operations on the car list.
• Client-Side State: State is managed via React Context and persisted in localStorage.
• Animated UI: All state changes (add, delete, sort) have smooth, animated transitions powered by Framer Motion.
• Client-Side Routing: Uses React Router for the main list and detail views (/ and /cars/:id).
• Search & Sort: Simple client-side filtering and sorting by price/year.
• Form Validation: The "Add/Edit" form includes real-time validation and a submission state.

Tech Stack

• Core: Vite, React 18 (Hooks)
• Styling: Tailwind CSS v4 with the @tailwindcss/forms plugin for the floating labels.
• Routing: react-router-dom v6
• Animations: framer-motion
• State Management: React Context API + a useLocalStorage custom hook.
• Misc: uuid for unique ID generation, heroicons for icons.

Running Locally

Prerequisites: Node.js (v18+) and npm.

1. Clone the repo:

   git clone https://github.com/AnuarSv/CarManager.git

2. Navigate into the directory:

   cd CarManager

3. Install dependencies:

   npm install

4. Run the dev server:

   npm run dev

   The app should now be running on http://localhost:5173.

Project Structure

The code is organized into a standard feature-based structure. No surprises here.

├── components/     # Reusable components (CarCard, CarForm, Header)
├── context/        # CarContext for global state
├── hooks/          # useLocalStorage hook
├── pages/          # Main route components (HomePage, CarDetailsPage)
├── App.jsx         # Root component, router setup
├── index.css       # Global styles, Tailwind directives, CSS variables
└── main.jsx        # App entry point