Platzi Fake Store - React E-Commerce App

A functional front-end e-commerce application built with React, Vite, and Tailwind CSS. It uses the Platzi Fake Store API to populate products, categories, and handle user authentication.

✨ Features

• Product & Category Listing: Displays lists of products and categories dynamically fetched from the API.
• Authentication: User login system that generates and stores JWT tokens (Access and Refresh tokens) in localStorage.
• Shopping Cart:
  • Add products to the cart.
  • Update product quantities.
  • Remove single items or clear the entire cart.
  • Cart state managed globally using React Context (CartContext).
• Checkout System: Simulates a checkout process including app fee calculations and a success modal upon completion.
• Responsive UI: Built with modern UI components from Flowbite React and customized with Tailwind CSS.

🛠️ Tech Stack

• Framework: React 19 + Vite
• Routing: React Router DOM
• Styling & UI: Tailwind CSS v4, Flowbite, Flowbite React
• Icons: React Icons
• State Management: React Context API (AuthContext, CartContext)

📂 Project Structure

src/
├── assets/         # Static assets like images
├── components/     # Reusable UI components (Navbar, Cards, Modals, etc.)
├── contexts/       # React Contexts for global state (Auth, Cart)
├── middleware/     # Custom middleware (if any)
├── pages/          # Page components (Login, Cart, Checkout, Products, Profile)
├── routes/         # Routing configurations
├── App.jsx         # Main layout and data fetching logic
└── main.jsx        # App entry point

🚀 Getting Started

Prerequisites

Make sure you have Node.js installed on your machine.

Installation

1. Clone the repository and navigate to the project directory:

   cd platzi-fake-store

2. Install the dependencies:

   npm install

Running the App

Start the development server:

npm run dev

The application will usually be available at http://localhost:5173.

Building for Production

To create a production build:

npm run build

To preview the production build locally:

npm run preview

🔗 API Reference

This project relies on the Platzi Fake Store API:

• Base URL: https://api.escuelajs.co/api/v1
• Docs: https://fakeapi.platzi.com/