This project involves the development of a web application using React for the frontend, structured with Vite, and a PHP backend. The application is designed to manage an inventory system for a production environment, along with a payment management system for an e-commerce platform.

The frontend is structured in a modular way, with distinct sections corresponding to the key functionalities of the application. This modularity not only promotes code reusability but also makes the project easier to manage and scale.

my-app/
├── frontend/
│   ├── public/
│   │   ├── index.html
│   │   ├── manifest.json
│   │   └── favicon.ico
│   │
│   ├── src/
│   │   ├── components/
│   │   │   ├── Inventory/
│   │   │   │   ├── TimeCounter.jsx
│   │   │   │   ├── MaterialSelection.jsx
│   │   │   │   ├── ProductionControl.jsx
│   │   │   │   ├── DataEntryForm.jsx
│   │   │   │   └── InventoryDashboard.jsx
│   │   │   ├── Authentication/
│   │   │   │   ├── Login.jsx
│   │   │   │   └── Register.jsx
│   │   │   ├── Payment/
│   │   │   │   ├── Cart.jsx
│   │   │   │   ├── Checkout.jsx
│   │   │   │   └── PaymentMethods.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── HeroContent.jsx
│   │   │   ├── MansoryImgList.jsx
│   │   │   ├── InfoContent.jsx
│   │   │   └── NavigationComponent.jsx
│   │   ├── pages/
│   │   │   ├── InventoryManagement.jsx
│   │   │   ├── HomePage.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   ├── CartPage.jsx
│   │   │   ├── CheckoutPage.jsx
│   │   │   ├── LoginPage.jsx
│   │   │   ├── RegisterPage.jsx
│   │   │   └── PaymentPage.jsx
│   │   │
│   │   ├── services/
│   │   │   ├── api.js
│   │   │   └── inventoryService.js
│   │   │
│   │   ├── store/
│   │   │   ├── inventorySlice.js
│   │   │   ├── cartSlice.js
│   │   │   ├── authSlice.js
│   │   │   └── index.js
│   │   │
│   │   ├── utils/
│   │   │   ├── timeUtils.js
│   │   │   └── paymentUtils.js
│   │   │
│   │   ├── App.js
│   │   ├── index.js
│   │   └── main.jsx
│   │
│   ├── package.json
│   ├── vite.config.js
│   ├── .env
│   └── .gitignore

• index.html: The entry point of the application. It loads the React app and injects it into the DOM.
• manifest.json: Metadata for the application, including details like the app's name, icons, and theme colors, essential for Progressive Web Apps (PWA).
• favicon.ico: The favicon for the application, displayed in the browser tab.

• components/: Houses reusable React components, organized into subfolders based on their functionality.

  • Inventory/
    • TimeCounter.jsx: Tracks the time spent on production processes.
    • MaterialSelection.jsx: Allows users to select materials for production.
    • ProductionControl.jsx: Controls the production workflow (start, stop, submit data).
    • DataEntryForm.jsx: Form for inputting production data.
    • InventoryDashboard.jsx: Provides an overview of the inventory status.
  • Authentication/
    • Login.jsx & Register.jsx: Manage user authentication (login, registration).
  • Payment/
    • Cart.jsx: Manages the shopping cart.
    • Checkout.jsx: Handles the checkout process.
    • PaymentMethods.jsx: Allows users to choose and manage payment methods.
  • General Components
    • Navbar.jsx: The navigation bar for the application.
    • HeroContent.jsx: Main content area on the homepage.
    • MansoryImgList.jsx: Displays a grid of images, typically for showcasing products.
    • InfoContent.jsx: Used to present additional information on the homepage.

• pages/: Contains the main pages of the application.

  • InventoryManagement.jsx: Integrates inventory-related components into a single management interface.
  • HomePage.jsx: The homepage of the application.
  • Dashboard.jsx: Displays an overview and categories of products or other data.
  • CartPage.jsx, CheckoutPage.jsx: Pages for managing the cart and completing the purchase process.
  • LoginPage.jsx, RegisterPage.jsx: Authentication pages.
  • PaymentPage.jsx: Dedicated page for handling payments.

• services/

  • api.js: Sets up and manages HTTP requests to the backend using Axios.
  • inventoryService.js: Specifically handles API requests related to inventory management.

• store/: Manages the global state of the application using Redux.

  • inventorySlice.js: Manages the state related to inventory.
  • cartSlice.js: Manages the state of the shopping cart.
  • authSlice.js: Handles user authentication state.
  • index.js: Combines all Redux slices and sets up the store.

• utils/

  • timeUtils.js: Contains utility functions for managing time (e.g., countdowns, timers).
  • paymentUtils.js: Utility functions for payment processes (e.g., formatting, validation).

• App.js: The root component that wraps all other components.

• index.js: Entry point for the React application, responsible for rendering the app to the DOM.

• main.jsx: Main application file, typically used in Vite projects to start the React application.

• package.json: Contains metadata about the project, including dependencies and scripts for building and running the application.
• vite.config.js: Configuration file for Vite, which sets up the development server, build process, and more.
• .env: Stores environment variables used by the application.
• .gitignore: Specifies which files and directories Git should ignore.

Of the directory FE

npm run dev

The backend is responsible for handling the application’s data, including user authentication, inventory management, and payment processing. It ensures secure and efficient data operations, supporting the functionalities implemented on the frontend.

ProgEcoV0.1/
├── backend/
│   ├── controllers/
│   │   ├── authController.php
│   │   ├── inventoryController.php
│   │   └── paymentController.php
│   │
│   ├── models/
│   │   ├── User.php
│   │   ├── Inventory.php
│   │   └── Payment.php
│   │
│   ├── routes/
│   │   ├── authRoutes.php
│   │   ├── inventoryRoutes.php
│   │   └── paymentRoutes.php
│   │
│   ├── middleware/
│   │   ├── authMiddleware.php
│   │   └── errorHandler.php
│   │
│   ├── config/
│   │   ├── db.php
│   │   └── config.php
│   │
│   ├── .env
│   ├── composer.json
│   ├── .htaccess
│   ├── index.php
│   └── .gitignore

• authController.php: Manages user authentication, handling login, registration, and token management.
• inventoryController.php: Handles all inventory-related operations such as adding, updating, and retrieving inventory items.
• paymentController.php: Manages the payment processing flow, including handling payment data, verifying transactions, and ensuring secure processing.

• User.php: Defines the structure and operations related to users in the database.
• Inventory.php: Manages the database interactions for inventory items, including schema definition and data manipulation methods.
• Payment.php: Handles the schema and operations for payment records, ensuring accurate and secure storage of payment information.

• authRoutes.php: Defines the API endpoints for authentication operations (e.g., login, register).
• inventoryRoutes.php: Contains the routes for inventory management, connecting the frontend requests to the appropriate controllers.
• paymentRoutes.php: Specifies the routes for payment processing, linking payment-related frontend actions to backend logic.

• authMiddleware.php: Ensures that only authenticated users can access certain routes, protecting the application from unauthorized access.
• errorHandler.php: Centralized error handling middleware that catches and processes errors, returning appropriate responses to the frontend.

• db.php: Contains the database connection settings, establishing the connection to the database used by the application.
• config.php: General configuration settings for the backend, including constants and other settings.

• .env: Stores environment-specific variables such as database credentials and API keys.
• composer.json: Manages the PHP dependencies and packages required for the application.
• .htaccess: Configuration file for Apache servers, used to define rewrite rules, access permissions, and other server-side settings.
• index.php: The entry point for the PHP backend, routing incoming requests to the appropriate controllers.
• .gitignore: Specifies which backend files and directories should be ignored by Git.

The inventory management system allows workers to start and stop production sessions, select materials, log quantities produced and damaged, and submit this data to the database. The frontend components communicate with the backend controllers to perform these operations. This ensures accurate tracking of inventory levels and efficient management of production processes.

The payment system allows users to browse products, add them to the cart, proceed to checkout, and complete payments securely. The backend is responsible for processing payments, verifying transaction details, and storing payment information securely. This integration ensures a smooth and secure shopping experience for users.

User authentication is managed through JWT (JSON Web Token), ensuring that users are securely logged in and their sessions are protected. The backend handles all authentication logic, including login, registration, and token validation, ensuring that only authorized users can access certain parts of the application.

The frontend communicates with the backend using HTTP requests (managed by Axios in the frontend). This integration is crucial for functionalities like user authentication, inventory management, and payment processing, ensuring that data flows seamlessly between the frontend and backend.

After implementation, the application undergoes rigorous testing to ensure that all functionalities work as intended. Debugging is performed to identify and resolve any issues, ensuring a stable and reliable application for end-users.

if the screen goes blank or the components are no longer shown and in the inspection section you only see the DIV with id='root' then try the commands

rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install

Of the directory ecommerce

php -S localhost:8000 -t ./BE