https://github.com/paishanmadusha/pern-stack-product-store

Product Store is a fullstack web application built using the PERN Stack. It allows users to add, view, edit, and delete product entries with features like theme toggling (light/dark), bot protection, rate limiting, and smooth UI using Tailwind + daisyUI.
https://github.com/paishanmadusha/pern-stack-product-store

arcjet bot-protection client-server-architecture daisyui express helmet javascript lucide-icons neon-postgres nodejs postgresql rate-limiting react-toast reactjs tailwindcss theme-switcher zustand-state-management

Last synced: 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/paishanmadusha/pern-stack-product-store
Owner: PAIshanMadusha
License: mit
Created: 2025-06-21T13:26:59.000Z (12 months ago)
Default Branch: main
Last Pushed: 2025-07-02T14:54:05.000Z (11 months ago)
Last Synced: 2025-08-09T21:37:47.192Z (10 months ago)
Topics: arcjet, bot-protection, client-server-architecture, daisyui, express, helmet, javascript, lucide-icons, neon-postgres, nodejs, postgresql, rate-limiting, react-toast, reactjs, tailwindcss, theme-switcher, zustand-state-management
Language: JavaScript
Homepage:
Size: 220 KB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

🛒 Product Store

BUILD WITH THE PERN STACK & CLIENT-SERVER ARCHITECTURE

---

**Product Store** is a fullstack web application built with the **PERN stack** (PostgreSQL, Express, React, Node.js). It uses **PostgreSQL via Neon** as the database and allows users to **add**, **view**, **edit**, and **delete** product entries. The app features **light/dark theme toggling**, **Arcjet** for bot protection and rate limiting, and a smooth, responsive UI built with **Tailwind CSS** and **daisyUI**.

---

## 🚀 Features:

* 🌐 Full client-server architecture (Frontend + Backend).
* 📝 Add, edit, and delete products (name, brand, description, price, image).
* 🌙 Theme switcher with Zustand and localStorage.
* 📦 PostgreSQL database hosted on [Neon](https://neon.com/).
* 🛡️ Arcjet integration for: Bot detection `detectBot`, Rate limiting `tokenBucket`.
* ✨ Clean and responsive UI using Tailwind CSS and daisyUI.
* 🔐 Helmet & CORS for basic security.

---

## 🧰 Tech Stack:
The following tech stack is used in this project (Frontend & Backend):

| Dependency | Description |
| ---------------------------- | ----------------------------------------- |
| React 19 + Vite: build tool | Modern frontend framework + fast bundler |
| **Zustand** | Lightweight state management |
| **Tailwind CSS** | Utility-first CSS framework |
| **daisyUI** | Tailwind-based UI component library |
| **React Router DOM** | Client-side routing |
| **Axios** | HTTP client for making API requests |
| **Lucide Icons** | Beautiful open-source icon set |
| **React Hot Toast** | Toast notification library |
| ---------------------------- | ----------------------------------------- |
| **Node.js + Express** | Server runtime and web framework |
| **PostgreSQL** | Relational database (via Neon serverless) |
| **@neondatabase/serverless** | Client for Neon-hosted PostgreSQL |
| **Helmet** | Secures HTTP headers |
| **CORS** | Enables Cross-Origin Resource Sharing |
| **Morgan** | HTTP request logger |
| **Arcjet** | Bot detection and rate limiting |

---

## ⚙️ How to Run the Project:
Follow these steps to successfully run the project:

### 1. Clone the repository:

```bash
https://github.com/PAIshanMadusha/pern-stack-product-store.git
```

##### And, navigate to the project directory:

```bash
cd pern-stack-product-store
```

### 2. Create `.env` File:

##### At the root of the project, create a `.env` file and add the following credentials.
##### Go to [**Neon**](https://neon.tech/) and sign in or create an account. Create a new project and copy your ** 🔐 database connection details** from the dashboard.
##### Then go to [**Arcjet**](https://arcjet.com/), log in, create a new site, and get your `🔐 ARCJET_KEY` from the **SDK Configuration** section.
##### Paste everything in your `.env` like this:

```env
PORT=3000

PGUSER=[your_neon_user]
PGPASSWORD=[your_neon_password]
PGHOST=[your_neon_host]
PGDATABASE=[your_neon_db]

ARCJET_KEY=[your_arcjet_key]

NODE_ENV=production
```

### 3. Install Dependencies, Build & Start (Production):

##### To prepare the app for production:

```bash
npm run build
```

##### Then start the application:

```bash
npm start
```

##### ✅ If everything is successful, your terminal should show:

```
Database initialized
Server is running on port: 3000
```

---

### ⚙️ Development Mode (Optional):

##### To run in development mode, edit your `.env` file and set:

```env
NODE_ENV=development
ARCJET_ENV=development
```

##### Then, navigate to the `pern-stack-product-store\server` and `pern-stack-product-store\client` folders and start both:

```bash
npm run dev
```

##### ✅ If successful, you should see the following in the **client** terminal:

```
http://localhost:5173/
```

##### ✅ And in the **server** terminal:

```
Database initialized
Server is running on port: 3000
```

### 🧪 Add Sample Products (Optional):

##### To quickly populate your database with test products, run this script from the root:

```bash
node server/seeds/products.js
```

##### ✅ This will insert a few sample items you can use to test the UI.

---

## 🧾 Scripts:
Use these commands to manage the app in development and production environments:

| Command | Description |
| --------------- | -------------------------------------------------------------------- |
| `npm install` | Install dependencies for both Client and Server |
| `npm run dev` | Run the app in development mode (client & server) |
| `npm run build` | Install all dependencies and build frontend & backend for production |
| `npm start` | Start the app in production mode |

## 📸 System Screenshots:
These screenshots illustrate how the system appears on desktop and mobile devices:

---

Screenshot 1

Screenshot 3

Screenshot 4