🛒 React Shop — Backend

REST API server for the React Shop e-commerce application. Provides endpoints for products, cart management, delivery options, orders, and payment summaries.

Live API: https://react-shop-backend-jg62.onrender.com Frontend repository: React-Shop

---

📌 About

This backend is based on the open-source e-commerce backend created by SuperSimpleDev: github.com/supersimpledev/ecommerce-backend-ai

The original project used SQLite (via sql.js-as-sqlite3) as its database — which works perfectly for local development but is not suitable for cloud hosting where the filesystem is ephemeral (resets on every deploy).

Changes made to the original

• Added PostgreSQL support alongside the existing SQLite driver
• Added SSL configuration (dialectOptions) required by Neon.tech and most managed PostgreSQL providers
• The database engine is selected automatically via environment variables — SQLite is used by default locally, PostgreSQL when RDS_HOSTNAME is set

// models/index.js — added SSL support for cloud PostgreSQL
dialectOptions: {
  ssl: {
    require: true,
    rejectUnauthorized: false
  }
}

---

🚀 Tech Stack

Technology	Purpose
Node.js	JavaScript runtime
Express	Web framework and routing
Sequelize	ORM for database models and queries
PostgreSQL + pg	Production database driver
sql.js-as-sqlite3 + sql.js	SQLite driver for local development (no native binaries needed)
patch-package	Applies the sql.js-as-sqlite3 compatibility patch on install
cors	Enables cross-origin requests from the frontend
nodemon	Auto-restart during local development

---

📡 API Endpoints

Method	Endpoint	Description
GET	/api/products	All products
GET	/api/delivery-options	Available delivery options
GET	/api/cart-items?expand=product	Cart contents with product details
POST	/api/cart-items	Add item to cart
PUT	/api/cart-items/:id	Update quantity or delivery option
DELETE	/api/cart-items/:id	Remove item from cart
GET	/api/orders?expand=products	Order history
GET	/api/orders/:id?expand=products	Single order details
POST	/api/orders	Place a new order
GET	/api/payment-summary	Cart totals and tax calculation
POST	/api/reset	Reset all data to defaults
GET	/images/*	Serve product and icon images

---

🗄️ Database

Local development

SQLite is used automatically — no setup required. The database is stored in memory via sql.js and seeded with default products, cart items, delivery options, and orders on every start.

Production

Neon.tech — serverless PostgreSQL with a free tier that never expires.

Neon was chosen over Render's built-in PostgreSQL specifically because Render's free database is deleted after 90 days, while Neon's free tier has no such time limit.

---

🌐 Hosting & Infrastructure

Web Service — Render.com (Free tier)

The API is deployed as a Web Service on Render's free plan:

• Build command: npm install
• Start command: node server.js
• Region: Frankfurt (EU Central)
• Auto-deploys on every push to main

Note: Render's free tier suspends services after 15 minutes of inactivity.

Keep-Alive — UptimeRobot (Free tier)

To prevent the server from sleeping, UptimeRobot pings the API every 5 minutes:

Monitor URL: https://react-shop-backend-jg62.onrender.com/api/products
Interval:    5 minutes

This is completely free and keeps the service always available without upgrading to a paid plan.

Infrastructure diagram

React Shop Frontend (GitHub Pages)
            │
            ▼
  Render.com — Node.js / Express
  ◄── UptimeRobot pings every 5 min
            │
            ▼
  Neon.tech — PostgreSQL (always free)

---

⚙️ Environment Variables

Variable	Description	Example
DB_TYPE	Database engine	postgres
RDS_HOSTNAME	Database host	ep-xxx.eu-central-1.aws.neon.tech
RDS_USERNAME	Database user	neondb_owner
RDS_PASSWORD	Database password	your-password
RDS_DB_NAME	Database name	neondb
RDS_PORT	Database port	5432

When RDS_HOSTNAME is not set, the server falls back to SQLite automatically.

---

🛠️ Getting Started Locally

# Clone the repository
git clone https://github.com/VSCRM/React-Shop-Backend.git
cd React-Shop-Backend

# Install dependencies (also applies sql.js patch automatically)
npm install

# Start dev server with auto-reload
npm run dev

# Start production server
npm start

The server starts at http://localhost:3000 and seeds the database with default data on first run.

---

☁️ Deploy Your Own

1. Database — Neon.tech

1. Sign up at neon.tech
2. Create a new project → region EU Central (Frankfurt)
3. Copy the Host, Username, Password, and Database name

2. Backend — Render.com

1. Sign up at render.com via GitHub

2. New + → Web Service → connect your repository

3. Settings:

   Field	Value
   Runtime	Node
   Build Command	npm install
   Start Command	node server.js
   Instance Type	Free

4. Add environment variables from the Neon dashboard

5. Deploy — the API will be live in ~2 minutes

3. Keep-Alive — UptimeRobot

1. Sign up at uptimerobot.com
2. Add a new HTTP(s) monitor pointing to /api/products
3. Set interval to 5 minutes

---

🙏 Acknowledgements

This project is based on the backend created by SuperSimpleDev as part of their open-source React course materials.

• 📦 Original backend: github.com/supersimpledev/ecommerce-backend-ai
• 📺 React course video: youtube.com/watch?v=TtPXvEcE11E
• 💻 Course GitHub: github.com/SuperSimpleDev/react-course

Thank you to SuperSimpleDev for the excellent open-source learning materials and the well-structured backend that made this deployment possible. 🙏

---

📄 License