🍦 Katsefet

Online Ice Cream & Frozen Treats Shop

A full-stack e-commerce web app for selling ice cream, milkshakes, Belgian waffles, crêpes, and frozen drinks

---

📖 About the Project

Katsefet is a full-stack e-commerce application for an ice cream and frozen desserts shop, built on the MERN stack (MongoDB, Express, React, Node.js). Customers can browse a rich product catalog — ice cream, milkshakes, bio/organic treats, frozen desserts, Belgian waffles, crêpes, hot drinks, and iced coffee — add items to a shopping cart, and manage their order, while shop admins get a dedicated management panel to add, update, and delete products, including image uploads.

The project is built with a clear separation between the API server and the client, role-based access control (regular user vs. admin), and global state management powered by Redux.

---

✨ Key Features

• 🛍️ Product Catalog — browse products by category (ice cream, shake, bio, frozen, Belgian waffle, crêpe, hot drink, iced coffee) with a detailed single-product page
• 🛒 Shopping Cart (Bag) — add, update quantity, remove, and calculate total price, per user
• 🔐 Authentication & Authorization — secure register/login flows with JWT and bcrypt password hashing
• 👑 Admin Manager Panel — admin-only product management: create, edit, delete, and upload product images (via Multer)
• 📦 State Management — global state (user roles, cart) handled with Redux
• 🎨 Modern UI — responsive design built with PrimeReact and PrimeFlex
• 🌐 REST API — secure Express server with controlled CORS and role-protected routes

---

🧱 Tech Stack

Layer	Technologies
Frontend	React 19, React Router, Redux, PrimeReact, PrimeFlex, Axios
Backend	Node.js, Express 5, Mongoose (MongoDB)
Auth & Security	JSON Web Tokens (JWT), bcrypt, controlled CORS
File Uploads	Multer for product image uploads

---

🗂️ Project Structure

katsefet-project/
├── CLIENT/
│   └── my-app/                # React application
│       └── src/
│           ├── Components/
│           │   ├── products/  # catalog and single-product page
│           │   ├── manager/   # admin panel
│           │   ├── user/      # login and register
│           │   ├── cart.jsx   # shopping cart
│           │   └── header.jsx
│           └── store/         # Redux (actions + reducers)
│
└── SERVER/                    # Node.js / Express server
    ├── Models/                 # Mongoose schemas: User, Product, Bag
    ├── controlers/              # business logic
    ├── routes/                  # API routes
    ├── middleware/               # JWT auth and admin authorization
    └── config/                    # DB connection and CORS settings

---

🚀 Local Setup

Prerequisites

• Node.js (v18 or later recommended)
• A MongoDB database (local or Atlas)

1. Clone the repository

git clone https://github.com/Ester-Developer/katsefet-project.git
cd katsefet-project

2. Set up the server (SERVER)

cd SERVER
npm install

Create a .env file inside the SERVER folder with the following variables:

PORT=9000
mongoDB_URI=your_mongodb_connection_string
ACCESS_TOKEN_SECRET=your_jwt_secret

Run the server in development mode:

npm run dev

3. Set up the client (CLIENT)

cd ../CLIENT/my-app
npm install
npm start

The app runs at http://localhost:3000, while the server listens on port 9000 by default.

---

🔌 API Overview

Method	Endpoint	Description	Access
POST	/api/user/register	Register a new user	Public
POST	/api/user/login	Log in	Public
GET	/api/product	Get all products	Public
POST	/api/product	Create a new product	Admin
PUT	/api/product	Update a product	Admin
DELETE	/api/product	Delete a product	Admin
GET	/api/bag	Get the shopping cart	Authenticated
POST	/api/bag	Add a product to the cart	Authenticated
PUT	/api/bag	Update a cart item	Authenticated
DELETE	/api/bag	Remove a cart item	Authenticated
POST	/api/upload	Upload a product image	Admin

---

🗺️ Project Scope

This project was built as a complete full-stack example for an online food/ice cream shop, and serves as a solid base for future extensions such as checkout and payments, inventory management, promotions and discounts, and sales reporting for shop admins.

---

Built with ❤️ and 🍦 by Ester-Developer