Skip to main content

React Ecommerce Project: Setting Up Your Storefront

Building a React ecommerce project requires a solid foundation: you need fast development tooling, client-side routing to handle multiple pages, HTTP clients to fetch product data, and a clear folder structure from day one. This article walks you through scaffolding a production-ready storefront using Vite, React Router for navigation, and axios for API calls. In 2026, Vite has become the standard for React development because it offers instant hot module replacement and rapid builds—far faster than older bundlers. By the end, you'll have a project layout and development environment ready for adding products, carts, and checkout flows.

Why Vite Over Create-React-App?​

Vite is a modern JavaScript build tool that serves ES modules directly during development, eliminating the need for a full bundle. This means your dev server starts in milliseconds and hot module replacement (HMR) happens instantly. Create-React-App, by contrast, bundles your entire app each time you save, leading to 3–10 second delays on large projects. According to Vite's official benchmarks (2026), projects with Vite report 5–10x faster cold startup compared to Create-React-App. For an ecommerce site where you're iterating on product pages, carts, and checkout flows dozens of times a day, this speed difference compounds into real productivity gains.

Vite also gives you fine-grained control over your webpack config, tree-shaking, and code splitting without ejecting—no lock-in like Create-React-App.

Scaffold Your Project with Vite​

Start by creating a new Vite project:

npm create vite@latest my-ecommerce-store -- --template react
cd my-ecommerce-store
npm install

This generates a minimal project with React already configured. Vite automatically detects your JSX files and imports React—no manual Webpack config needed. Open package.json and you'll see the dev, build, and preview scripts already wired up:

{
  "name": "my-ecommerce-store",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Run npm run dev and open http://localhost:5173 (Vite's default). You'll see a live-reloading dev environment.

Install Essential Dependencies​

Add libraries your ecommerce store will need:

npm install react-router-dom axios zustand
npm install --save-dev tailwindcss postcss autoprefixer

Here's what each package does:

  • react-router-dom: Client-side routing for pages like /products, /cart, /checkout
  • axios: HTTP client to fetch products from your backend API (cleaner than native fetch())
  • zustand: Lightweight state management for cart, user session, and inventory (lighter than Redux for smaller projects)
  • tailwindcss: Utility CSS framework for rapid UI styling

Initialize Tailwind:

npx tailwindcss init -p

This creates tailwind.config.js and postcss.config.js. Update tailwind.config.js to scan your React files:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then add Tailwind's directives to your main CSS file (src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Folder Structure for Scalability​

Organize your project to grow from 10 products to 10,000. A common ecommerce structure:

my-ecommerce-store/
├── src/
│   ├── components/
│   │   ├── ProductCard.jsx
│   │   ├── Cart.jsx
│   │   ├── Navbar.jsx
│   │   └── Footer.jsx
│   ├── pages/
│   │   ├── Products.jsx
│   │   ├── ProductDetail.jsx
│   │   ├── CartPage.jsx
│   │   ├── Checkout.jsx
│   │   └── OrderHistory.jsx
│   ├── hooks/
│   │   ├── useCart.js
│   │   ├── useFetch.js
│   │   └── useAuth.js
│   ├── store/
│   │   └── cartStore.js
│   ├── api/
│   │   ├── products.js
│   │   ├── orders.js
│   │   └── auth.js
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── public/
│   └── favicon.ico
├── index.html
├── vite.config.js
├── tailwind.config.js
└── package.json

Components/ holds reusable UI pieces (ProductCard, Navbar).

Pages/ are full-page components that correspond to routes.

Hooks/ contain custom React hooks—useCart() for cart logic, useFetch() for data loading, useAuth() for user sessions.

Store/ holds your Zustand state management (cart, user, filters).

API/ abstracts HTTP calls to your backend, keeping routes clean and testable.

Set Up React Router​

Create your main App.jsx with routes:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Products from './pages/Products';
import ProductDetail from './pages/ProductDetail';
import CartPage from './pages/CartPage';
import Checkout from './pages/Checkout';
import OrderHistory from './pages/OrderHistory';

export default function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Products />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/cart" element={<CartPage />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/orders" element={<OrderHistory />} />
      </Routes>
    </Router>
  );
}

This gives users a way to navigate between product listing, individual product pages, the cart, checkout, and their order history. Each <Route> lazily loads only the code needed for that page.

Environment Variables for Your API​

Create a .env file in your project root:

VITE_API_URL=http://localhost:3000/api
VITE_STRIPE_PUBLIC_KEY=pk_test_your_key_here

Vite automatically exposes variables prefixed with VITE_ to your frontend. Access them in code:

const apiUrl = import.meta.env.VITE_API_URL;

This keeps sensitive keys out of version control (add .env to your .gitignore) and lets you swap URLs between local, staging, and production without rebuilding.

Key Takeaways​

  • Vite offers 5–10x faster builds and HMR compared to Create-React-App, critical for ecommerce iteration speed.
  • Install React Router for navigation, axios for API calls, and Zustand for lightweight state management.
  • Organize code into components, pages, hooks, store, and API layers—this structure scales from prototype to enterprise.
  • Use Tailwind CSS for rapid utility-based styling with minimal custom CSS.
  • Environment variables keep your app portable across local, staging, and production deployments.

Frequently Asked Questions​

What if I don't want to use Vite?​

Create-React-App still works but is officially in maintenance mode as of 2026. Vite, Remix, and Next.js are the industry standards now. If you're on a legacy Create-React-App project, the rest of this series still applies—just skip the Vite setup and use your existing tooling.

Do I need Zustand or can I use Redux?​

Zustand is lighter and requires less boilerplate for medium-sized apps. Redux is more verbose but offers better devtools and is stronger for very large teams. For an ecommerce store, Zustand is recommended—you can always migrate to Redux later if your state grows complex.

Should I set up TypeScript from the start?​

TypeScript adds ~10% overhead to setup but prevents bugs in larger projects. For this series, plain JavaScript keeps examples cleaner. If your team uses TypeScript, Vite fully supports it—just name your files .tsx and add a tsconfig.json.

How do I handle environment variables in production?​

Most hosting platforms (Vercel, Netlify, AWS) let you set environment variables in their dashboard. Vite builds these into your bundle at build time, so they're "baked in." Never commit .env files with real API keys.

Further Reading​