OpenStore - Full-Stack E-Commerce Template

A modern, clean full-stack e-commerce template built with React, TypeScript, Vite, and Express.

Project Structure

OpenStore-Fullstack/
├── frontend/              # React + Vite + TypeScript
│   ├── public/           # Static assets
│   ├── src/
│   │   ├── components/   # React components
│   │   │   ├── common/
│   │   │   ├── layout/
│   │   │   ├── product/
│   │   │   ├── cart/
│   │   │   └── checkout/
│   │   ├── pages/        # Page components
│   │   │   ├── Home/
│   │   │   ├── Products/
│   │   │   ├── ProductDetail/
│   │   │   ├── Cart/
│   │   │   ├── Checkout/
│   │   │   └── Auth/
│   │   ├── routes/       # React Router setup
│   │   ├── hooks/        # Custom React hooks
│   │   ├── services/     # API services
│   │   ├── utils/        # Utility functions
│   │   ├── types/        # Frontend-specific types
│   │   ├── styles/       # Global styles
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── index.html
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
│
├── backend/              # Express + TypeScript
│   ├── src/
│   │   ├── routes/       # API routes
│   │   │   ├── auth.routes.ts
│   │   │   ├── products.routes.ts
│   │   │   ├── orders.routes.ts
│   │   │   └── users.routes.ts
│   │   ├── controllers/  # Route controllers
│   │   ├── middleware/   # Express middleware
│   │   ├── models/       # Data models
│   │   ├── services/     # Business logic
│   │   ├── utils/        # Utility functions
│   │   ├── types/        # Backend-specific types
│   │   ├── config/       # Configuration
│   │   └── server.ts     # Express app setup
│   ├── package.json
│   ├── tsconfig.json
│   └── .env.example
│
└── shared/               # Shared types and utilities
    ├── types/            # Shared TypeScript types
    │   ├── user.types.ts
    │   ├── product.types.ts
    │   ├── order.types.ts
    │   ├── cart.types.ts
    │   └── index.ts
    ├── utils/            # Shared utilities
    ├── constants/        # Shared constants
    ├── package.json
    ├── tsconfig.json
    └── index.ts

Features

• Frontend: React 18 with TypeScript and Vite for fast development
• Backend: Express with TypeScript for type-safe API development
• Shared: Common types and utilities shared between frontend and backend
• Routing: React Router for frontend, Express Router for backend
• Type Safety: Full TypeScript support across the entire stack

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Install frontend dependencies:

cd frontend
npm install

2. Install backend dependencies:

cd backend
npm install

3. Install shared dependencies:

cd shared
npm install

Development

1. Start the backend server:

cd backend
npm run dev

2. Start the frontend development server:

cd frontend
npm run dev

The frontend will be available at http://localhost:5173 The backend API will be available at http://localhost:3000

Next Steps

• Add Firebase authentication and Firestore integration
• Implement business logic in controllers and services
• Add state management (Context API, Redux, or Zustand)
• Implement product catalog and shopping cart functionality
• Add payment processing
• Implement order management
• Add user profiles and authentication flows

License

MIT