COFFEINO - Coffee E-commerce Store

COFFEINO is a modern coffee e-commerce store built with React and TypeScript. The application demonstrates best practices in frontend development with a clean architecture and responsive design.

🚀 Tech Stack

• React 18+ with TypeScript
• Redux Toolkit + RTK Query for state management
• React Router v7 for navigation
• CSS Modules for styling
• JSON Server for mock API

📦 Features

🛍️ Product Catalog

• Extended product cards with detailed information
• Product tags ("NEW" and collections)
• Quick add to cart functionality
• Responsive grid layout

🛒 Shopping Cart

• Real-time cart management
• Quantity controls (+/- buttons)
• Item removal functionality
• Total cost calculation
• Order checkout

🎨 User Interface

• Two-column layout (catalog + cart)
• Mobile-responsive design
• Smooth animations and transitions
• Intuitive user experience

🛠️ Installation & Setup

Prerequisites

• Node.js 16+
• npm or yarn

Installation Steps

1. Clone the repository

git clone <repository-url>
cd coffeino-frontend

2. Install dependencies

npm install

3. Start JSON Server (mock API)

npm run server

Server will run on http://localhost:3001

4. Start the application

npm start

Application will be available at http://localhost:3000

📁 Project Structure

src/
├── components/          # React components
│   ├── Basket/         # Shopping cart component
│   ├── ProductCard/    # Product card component
│   ├── ProductList/    # Products listing
│   └── Header/         # App header
├── pages/              # Application pages
│   ├── Home/           # Main page
│   └── ProductDetails/ # Product detail page
├── store/              # Redux store
│   ├── slices/         # Redux slices
│   └── api/            # RTK Query APIs
├── types/              # TypeScript type definitions
└── data/               # Mock data
    └── db.json         # JSON Server data

🎯 Architecture Highlights

State Management

• Redux Toolkit for global state
• RTK Query for API interactions
• Local state for UI components

TypeScript Implementation

• Strict typing for all components
• Interfaces for products and cart items
• Typed props and events

Styling Approach

• CSS Modules for style isolation
• Responsive design principles
• Modern CSS features

📸 Adding Screenshots

To add your application screenshot:

1. Take a screenshot of the main page
2. Save it in the project root as screenshot.png
3. Ensure the screenshot shows:
   • Product catalog on the left
   • Shopping cart on the right
   • Several products with different quantities

🔧 Available Scripts

• npm start - Start development server
• npm run server - Start JSON Server
• npm run build - Build production version
• npm test - Run test suite

🤝 Development

Code Standards

• ESLint for code linting
• Prettier for code formatting
• TypeScript strict mode

Git Workflow

• Feature branch development
• Semantic commit messages
• Code review process

🎉 Demo

After starting the application, you'll see:

• Main page with product catalog
• Side panel with shopping cart
• Ability to add/remove products
• Dynamic interface updates

---