Clover

Clover is a modern, full-stack e-commerce application designed for a seamless shopping experience. Built with the PERN stack, it features a dynamic public storefront and a robust administrative dashboard for comprehensive business management.

A short demo recording is included at screenshots/Clover.mp4.

Key Previews

Technologies

• Frontend: React 19, Vite, Lucide React, Recharts
• Backend: Node.js, Express, Multer (for local image uploads)
• Database: PostgreSQL (with pg driver)
• Authentication: JSON Web Tokens (JWT), bcrypt
• AI Tools: Gemini, Claude, GitHub Copilot

Features

• Public Storefront: Browse products by category, view detailed descriptions, and manage a shopping cart.
• Admin Dashboard: Full CRUD operations for products, order management, customer tracking, and message handling.
• Authentication: Secure login and registration for customers and a pre-configured admin account.
• Responsive Design: Optimized for various devices using modern CSS.
• Data Persistence: Relational data storage using PostgreSQL.

How I built it

The project follows a decoupled architecture, separating the concerns of the user interface and the data layer:

• Architecture: An MVC-inspired backend using CommonJS modules provides a RESTful API. The frontend is a modern React SPA using ES Modules and Vite for high-performance development.
• Workflow: Leveraged AI tools (Gemini, Claude, Copilot) to accelerate development, specifically for generating boilerplate, debugging complex queries, and refining UI components.
• File Handling: Implemented local storage for product images using multer, ensuring the app remains self-contained for local demonstrations.

What I learned

• Full-Stack Integration: Gained deep experience in connecting a React frontend with a Node.js/PostgreSQL backend, managing state across the entire stack.
• Database Design: Developed skills in relational database modeling, including schema design and writing efficient SQL queries.
• Security Best Practices: Implemented secure authentication workflows using JWTs and password hashing with bcrypt.
• AI-Assisted Development: Refined the process of using Large Language Models to improve code quality and development speed.

Future Enhancements

• Payment Gateway: Integrate Stripe or PayPal for real-world transaction processing.
• Email Notifications: Automated order confirmations and marketing emails via SendGrid or AWS SES.
• Advanced Analytics: Implement a more detailed admin dashboard with sales trends and customer behavior insights.
• Cloud Storage: Transition from local file uploads to AWS S3 for better scalability.

How to run the project

1. Requirements

• Node.js LTS
• npm
• PostgreSQL running locally

2. Setup Database

Create a PostgreSQL database named clover_db and import the schema:

psql -U postgres -d clover_db -f clover_db.sql

3. Backend Configuration

cd backend
npm install

Create a .env file in the backend/ directory:

PORT=5000
DB_USER=postgres
DB_HOST=localhost
DB_NAME=clover_db
DB_PASSWORD=yourpassword
DB_PORT=5432
JWT_SECRET=your_local_secret
CORS_ALLOWED_ORIGINS=http://localhost:5173

Run the backend: npm run dev

4. Frontend Configuration

cd frontend
npm install

Create a .env file in the frontend/ directory:

VITE_API_BASE_URL=http://localhost:5000/api

Run the frontend: npm run dev

---

Developed by aldrsze.