🛒 A modern, feature-rich e-commerce management system built with React.js. Manage products, track sales, monitor stock, and view dashboards—all from one modular and scalable platform.
- 📝 Table of Contents
- 🌟 Features
- 📐 Preview
- 💭 How it Works
- 🏁 Getting Started
- 📁 Folder Structure
- ⛏️ Built Using
- 🤝 Contributions
- 📜 License
- 📊 Dashboard Analytics: Get insights into product performance and sales.
- 🛍 Product Management: Add, update, or delete products with ease.
- 💰 Sales Tracking: View and manage recent and historical sales.
- 📦 Stock Management: Monitor stock levels in real-time.
- 🌍 Localization Support: Switch between English and French with i18n.
- ♻️ Reusable Components: Shared UI and logic for consistent experience.
- 🔌 Service-Based Architecture: Clean separation of API logic.
- Dashboard: Visualize stats through charts and cards.
- Products: Navigate to products tab to create, edit or delete items.
- Sales: Access sales records and revenue insights.
- Stock: Keep an eye on inventory levels.
- Languages: Switch UI language using the toggle (EN/FR).
- Architecture: Modular, scalable structure using React hooks and context.
-
Clone the repository:
git clone https://github.com/yourusername/e-store-reactjs.git
-
Navigate into the project directory:
cd e-store-reactjs -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Visit
http://localhost:1337in your browser.
src # Source code
├── App.jsx # Main React app component
├── main.jsx # Entry point for React app
├── api # API client and endpoints
│ ├── Client.js
│ ├── Endpoints.js
│ └── test.js
├── assets # Static assets like images and styles
│ ├── images # Image files
│ └── styles # CSS styles
│ ├── App.module.css
│ └── index.css
├── config # Configuration files
│ └── i18n.js # Internationalization setup
├── features # Feature modules
│ ├── dashboard # Dashboard feature
│ │ ├── index.jsx # Dashboard main component
│ │ ├── components # Dashboard UI components
│ │ │ ├── Activity.jsx
│ │ │ ├── CardStats.jsx
│ │ │ └── charts # Chart components
│ │ │ ├── AreaChart.jsx
│ │ │ ├── BarChart.jsx
│ │ │ └── PieChart.jsx
│ │ └── hooks # Dashboard hooks
│ │ ├── useGetData.js
│ │ ├── useProductsStats.js
│ │ ├── useRecentActivities.js
│ │ └── useStockSalesData.js
│ ├── products # Products feature
│ │ ├── index.jsx # Products main component
│ │ ├── components # Products UI components
│ │ │ └── ProductTable.jsx
│ │ ├── hooks # Products hooks
│ │ │ ├── useAddProduct.js
│ │ │ ├── useDeleteProduct.js
│ │ │ ├── useEditProduct.js
│ │ │ ├── useProductModal.js
│ │ │ └── useProducts.js
│ │ └── services # Products services
│ │ └── productService.js
│ ├── sales # Sales feature
│ │ ├── index.jsx # Sales main component
│ │ ├── components # Sales UI components
│ │ │ └── SaleTable.jsx
│ │ ├── hooks # Sales hooks
│ │ │ ├── useAddSale.js
│ │ │ ├── useDeleteSale.js
│ │ │ ├── useEditSale.js
│ │ │ ├── useSale.js
│ │ │ └── useSaleModal.js
│ │ └── services # Sales services
│ │ └── saleService.js
│ ├── stock # Stock feature
│ │ ├── index.jsx # Stock main component
│ │ ├── components # Stock UI components
│ │ │ └── StockTable.jsx
│ │ ├── hooks # Stock hooks
│ │ │ ├── useAddStock.js
│ │ │ ├── useDeleteStock.js
│ │ │ ├── useEditStock.js
│ │ │ ├── useStock.js
│ │ │ └── useStockModal.js
│ │ └── services # Stock services
│ │ └── stockService.js
├── layouts # Layout components
│ └── MainLayout.jsx
├── pages # Page components
│ └── ErrorPage.jsx
├── routes # Route definitions
│ └── index.jsx
└── shared # Shared components and utilities
├── components # Shared UI components
│ ├── common # Common reusable components
│ │ ├── Divider.jsx
│ │ ├── EntityModal.jsx
│ │ ├── ListTable.jsx
│ │ ├── Loading.jsx
│ │ ├── SelectOptions.jsx
│ │ └── TableDefault.jsx
│ ├── Header # Header components
│ │ └── Header.jsx
│ ├── SideBar # Sidebar components
│ │ └── SideBar.jsx
│ └── Toolbar # Toolbar components
│ └── Toolbar.jsx
├── hooks # Shared hooks
│ ├── useModalState.js
│ ├── useSearch.js
│ └── modalStates # Modal state hooks
│ ├── useArticleList.js
│ ├── useOperationModalState.js
│ └── useProductModalState.js
└── utils # Utility functions
├── dateUtils.js
└── validators.js
- React.js
- Vite
- React Router
- Axios
- React Context API
- i18next
- Chart.js
- CSS Modules
Your contributions are welcome! Feel free to fork the repo and submit pull requests, open issues, or suggest features.
This project is licensed under the MIT License. See the LICENSE file for details.