BlooFi - E-Commerce Platform

BlooFi is a full-stack e-commerce platform specializing in balloon and floral decor. Registered users can browse, search, and order products with a fast-loading, responsive UI. Built with a focus on clean user experience, secure authentication, and reliable payment processing.

---

Live Demo

• Storefront: https://bloofi.vercel.app

---

Screenshots

Home Page

Cart Page

---

Features

Storefront (Registered Users)

• Browse balloons, floral arrangements, and decor items with category-based filtering
• Advanced search querying across product names and descriptions
• Add to cart and manage cart items persistently
• Secure checkout flow with Paystack payment integration
• Digital receipts generated after successful orders
• OAuth social login and JWT-based session management
• Responsive design for mobile, tablet, and desktop

Admin Dashboard

• Manage products (create, update, delete)
• View and manage all orders and their statuses
• Manage registered users
• Full operational oversight from a dedicated admin panel

Security

• JWT-based authentication with secure session handling
• OAuth2 social login integration
• Protected routes for both user and admin panels
• Input validation and sanitization on all API endpoints

---

Tech Stack

Frontend:

Backend:

Data & Infra:

Auth & Payments:

---

Project Structure

BlooFi/
|-- frontend/                  # React + Vite frontend
|   |-- src/
|   |   |-- pages/           # Home, Product, Cart, Checkout, Admin views
|   |   |-- components/      # Reusable UI components
|   |   |-- store/           # Redux state management (cart, auth, products)
|   |   `-- services/        # API call handlers
|
|-- backend/                  # Node.js + Express backend
|   |-- src/
|   |   |-- routes/          # API route definitions
|   |   |-- controllers/     # Business logic
|   |   |-- middleware/      # Auth, validation, error handling
|   |   |-- services/        # Paystack integration
|   |   `-- models/          # MongoDB schema definitions (Mongoose)
|
`-- .env.example             # Environment variable template

---

Getting Started

Prerequisites

• Node.js v18+
• MongoDB 6+ (or MongoDB Atlas)

1. Clone the repository

git clone https://github.com/j-deku/BlooFi.git
cd BlooFi

2. Set up environment variables

cp .env.example .env

Open .env and fill in your values:

# Database
MONGO_URI=your_mongodb_connection_string

# Auth
JWT_SECRET=your_jwt_secret
JWT_EXPIRES_IN=7d

# OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# Paystack
PAYSTACK_SECRET_KEY=your_paystack_secret_key
PAYSTACK_PUBLIC_KEY=your_paystack_public_key

# App
PORT=5000
CLIENT_URL=http://localhost:5173

3. Install dependencies

# Backend
cd backend && npm install

# Frontend
cd ../fy && npm install

4. Run the development servers

# Start backend (from /backend)
npm run dev

# Start frontend (from /fy or /admin)
npm run dev

Frontend: http://localhost:5173 Backend: http://localhost:5000

---

User Roles

Role	Access
Guest	Browse products only
Registered User	Browse, search, cart, checkout, order history
Admin	Full product, order, and user management

---

Roadmap

• Full backend deployment
• API documentation (Postman/Swagger)
• Product reviews and ratings
• Order tracking system
• Wishlist feature
• Email notifications for order updates

---

Acknowledgments

• Paystack for payment integration
• MongoDB Atlas for cloud database
• Vite for ultra-fast frontend builds

---

Author

Jeremiah Deku

---

License

This project is licensed under the MIT License.