POC Online Order and Cart API System

This repository contains a **Proof of Concept (POC)** built to validate the system architecture, dependencies, and core application flow.

The goal of this project is to serve as an experimental base for testing features, frontend/backend integration, and development environment setup.

Dependencies

Frontend

• React
• TypeScript
• Vite
• TailwindCSS
• shadcn/ui
• Lucide Icons

Backend

• Node.js
• Express
• TypeScript
• SQLite

Build

• npm
• Vite Dev Server

📂 Project Structure

/
├── frontend/
│   ├── src/
│   ├── index.html
│   └── vite.config.ts
├── backend/
│   ├── src/
│   ├── database/
│   └── tsconfig.json
├── package.json
├── package-lock.json
└── README.md

The project is managed from the root directory, which orchestrates both frontend and backend with npm concurrently.

⚙️ Prerequisites

Before running the project, make sure you have:

• Node.js 18+
• npm (included with Node.js)

Check your versions:

node -v
npm -v

📥 Installation

1. Clone the repository:

git clone https://github.com/life-is-string/POC-simple-online-order-system

2. Navigate to the project root:

cd POC-simple-online-order-system

3. Install dependencies:

cd backend
npm install
cd ..
cd frontend
npm install

Or run in the root directory

npm install

▶️ Running the Project

From the root directory, start the development environment:

npm run dev

This command runs both frontend and backend in development mode.

🔗 Default URLs

• Frontend: http://localhost:5173
• Backend API: http://localhost:3000

Ports may vary depending on configuration. Check the terminal output if needed.

Development notes

This initiative provided an opportunity to explore and strengthen my experience with full-stack development using and learning more about React and Node.js. The process all along involved architectural design and planning, full-time research, and iterative system implementations.

In the end, I am very satisfied with the final stable version, which guarantees a functional frontend–backend integration and a user-friendly graphical interface. Overall, this development journey was both technically enriching and professionally rewardful.

Implemented functionalities:

• Product Listing
  • Return a list of products from the database with: id, name, description, price, image (image is optional, can be static).
• Cart (API)
  • Add item to cart.
  • Remove item from cart.
  • Change quantity.
  • Validation (minimum quantity per product = 1, maximum quantity per product = 10). Order Checkout (simulated)
  • Endpoint that receives the cart, marks it as sent, and returns a success message.
• Order Checkout
  • Button to finalize.
  • Display success screen/message.
  • Clear cart after checkout.
• Functional
  • Cart persistence in localStorage.
  • Feedback toasts (e.g., "Product added successfully").
  • Componentization and UI reusability.
  • Styling with a framework
  • Folder organization following good practices.
  • Smooth animations or transitions.
  • Responsive layout.
  • Friendly error messages

🔮 Future ideas

• Search and filter api
• Automated test
• Modularization of services
• API docs
• Catalog pagination api