Storefront Admin

A modern full-stack e-commerce inventory workspace

Manage products, pricing, stock, and categories through a polished, responsive dashboard backed by Node.js, Express, and MySQL.

---

Overview

Storefront Admin is a responsive inventory management application designed for the complete product-management workflow. Administrators can securely sign in, review store health at a glance, and create, search, edit, filter, or remove products without leaving the dashboard.

The project pairs a refined browser experience with an Express API and MySQL database. It was built to demonstrate real CRUD operations, authenticated management flows, responsive UI/UX design, and production-minded environment configuration.

Highlights

• Secure administrator access with bcrypt password verification and signed, expiring server sessions
• Complete product CRUD: create, read, update, and delete inventory items
• Live inventory insights: total products, stock units, low-stock alerts, and inventory value
• Fast product discovery with search and category filtering
• Responsive dashboard that works across desktop, tablet, and mobile
• Light and dark modes with the selected preference remembered locally
• Thoughtful interaction design including validation, loading states, confirmations, toasts, keyboard search shortcut, and empty states
• Deployable architecture with .env.example, MySQL schema, API documentation, and Render/Firebase guidance

Product tour

Inventory dashboard

The overview brings product health into one calm, easy-to-scan workspace. At a glance, administrators can see catalogue size, stock, low-stock items, and the current listed inventory value.

Product management

The product form keeps creation and editing focused with clear required fields, optional image and description fields, and friendly validation feedback.

Dark mode

The same workflow remains clear and polished in dark mode, making long inventory-management sessions more comfortable.

Technology

Area	Tools used
Frontend	HTML5, CSS3, Vanilla JavaScript, Font Awesome, Google Fonts
Backend	Node.js, Express.js
Database	MySQL with mysql2
Authentication	bcryptjs and signed HMAC session tokens using Node's crypto module
API style	RESTful JSON API
Configuration	dotenv, environment variables, .env.example
Deployment-ready	Render-compatible Express service and Firebase Hosting guidance

Features in detail

Dashboard experience

• Inventory summary cards that calculate product count, stock count, low-stock alerts, and stock value from live data
• Responsive product table and mobile-friendly product cards
• Search products by name, category, or description
• Filter products by category
• Refresh data on demand
• Theme toggle with persistent preference

Product workflow

• Add a product with name, category, price, stock, image URL, and description
• Edit any existing product from the dashboard
• Confirm before deleting an item
• Validate prices, stock levels, text lengths, and request payloads on the server

API routes

Method	Route	Description	Auth required
POST	/api/login	Sign in and receive a session token	No
GET	/api/me	Read the current signed-in user	Yes
GET	/api/health	Verify API and database connectivity	No
GET	/api/products	List, search, and filter products	No
POST	/api/products	Create a product	Yes
PUT	/api/products/:id	Update a product	Yes
DELETE	/api/products/:id	Delete a product	Yes

For compatibility with the original Flutter client, the legacy /login and /products routes are also available.

Run locally

1. Install dependencies

npm install

2. Configure environment variables

Copy .env.example to .env, then add your local MySQL credentials.

PORT=3000
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=ecommerce
DB_SSL=false
SESSION_SECRET=replace-with-a-long-random-secret

3. Create the database

Open schema.sql in MySQL Workbench and run it. It creates the ecommerce database, the required tables, sample products, and a demo administrator account.

If your MySQL version reports an error for ADD COLUMN IF NOT EXISTS, comment out those upgrade-only ALTER TABLE lines and run the script again. They are not needed for a newly created database.

4. Start the application

npm start

Visit http://localhost:3000.

Demo account

Email: admin@example.com
Password: 1234

Change or remove the demo account before a public deployment.

Project structure

ecommerce-crud-fullstack/
|- assets/
|  `- screenshots/             # README product-tour images
|- public/
|  |- index.html               # Login and dashboard layout
|  |- styles.css               # Responsive UI and themes
|  `- app.js                   # UI interactions and API client
|- .env.example
|- .gitignore
|- package.json
|- schema.sql                  # Database setup and sample data
|- server.js                   # Express API and static server
`- README.md

Deployment notes

The app can run as one Express service on Render. Add the variables in .env.example to Render's environment settings, use npm install as the build command, and npm start as the start command.

If the dashboard is later hosted separately on Firebase Hosting, set CORS_ORIGIN on the backend to the Firebase domain and point the browser app to the deployed API URL.

Security checklist

• Never commit .env; it is already excluded by .gitignore
• Replace the demo password before production use
• Set a long random SESSION_SECRET
• Set a specific CORS_ORIGIN for public deployments
• Use TLS for managed MySQL services where required
• Add rate limiting and account-management features before a public multi-user release

---

Built to turn routine inventory work into a focused, polished experience.