Folder Structure For E-commerce

Create a Folder

**- src
  - components
  - context
  - pages
  - redux
  - firebase**

Step 1 : Create a Navbar Folder

**- components
  - navbar
    - Navbar.jsx**

Step 2 : Create a Footer Folder

**- components
  - footer
    - Footer.jsx**

Step 3 : Create a Layout Folder

**- components
  - layout
    - Layout.jsx**

Layout.jsx

**import React from 'react'
import Footer from '../footer/Footer'
import Navbar from '../navbar/TopNvbar'

function Layout({ children }) {
  return (
    <div>
      <Navbar />
      <div className="content">
        {children}
      </div>
      <Footer />
    </div>
  )
}

export default Layout**

Step 4 : Create a Page

**- pages
  - home
    - Home.jsx
  - allproducts
    - AllProducts.jsx
  - Order
    - Order.jsx
  - cart
    - Cart.jsx
  - admin
    - dashboard
      - Dashboard.jsx
  - nopage
    - NoPage.jsx**

**Home.jsx**

**import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home**

Step 5 : Import Layout in Home.jsx

**import React from 'react'
import Layout from '../../components/layout/Layout'

function Home() {
  return (
    <Layout>Home</Layout>
  )
}

export default Home**

Step 6 : Create a route of all page

Install React router dom for routing

**npm i react-router-dom**

Define routes in App.jsx

Import BrowserRouter as Router, Route, Routes, from react-router-dom

**import {
  BrowserRouter as Router,
  Route,
  Routes,
} from "react-router-dom";**

Complete Code

**import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Routes,
} from "react-router-dom";

import Home from './pages/home/Home';
import Order from './pages/order/Order';
import Cart from './pages/cart/Cart';
import Dashboard from './pages/admin/dashboard/Dashboard';
import NoPage from './pages/nopage/NoPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/order" element={<Order/>} />
        <Route path="/cart" element={<Cart/>} />
        <Route path="/dashboard" element={<Dashboard/>} />
        <Route path="/*" element={<NoPage/>} />
      </Routes>
    </Router>
  )
}

export default App**