Simplified Erp System
React.js Front-End Application with Tailwind using Vite
This repository contains a front-end application built with React.js, Tailwind CSS, and bundled with Vite. Below are the instructions for setting up and running the application.
Prerequisites
- Node.js installed on your machine (Download Node.js)
- npm package manager installed (Download npm)
Setup
Clone this repository to your local machine:
git clone <repository-url>Navigate to the project directory:
cd <project-directory>Install dependencies using npm:
```bash npm install
Running the Application
To run the application locally, execute the following command:
```bash npm run dev
Please ensure that you have a stable internet connection while running the application (for images that are hosted online).
This command starts the development server. Once the server is running, you can access the application in your web browser at http://localhost:5173.
Building for production
To build the application for production, use the following command:
```bash npm run build
Simplified ERP System
This system consists of the following pages:
- Dashboard - Provides an overview of the system's features.
- Products Management - Allows for the management of product listings.
- Orders Management - Facilitates viewing and handling orders.
Objectives
- Developed a user-friendly interface for managing key aspects of a business.
- Utilized React for building modular components and managing application state.
- Implemented navigation between different sections of the ERP system using React Router.
- Created a responsive design suitable for both desktop and mobile devices.
Below are the steps to how to use this website and explore its interactiveness
Dashboard
Display of key metrics - Total products, Total revenue, Total ratio, Total users, Total visits, Total profit .
Display of revenue and website traffic statistics - Sales per week, Leads of source/ Website Traffic
Display of customers who made top deals.
User- friendly and fully responsive.
Interactive
Navbar
- Functionality - Quick navigation to the Products and Orders management pages.
Dropdown Navigation Bar at top of the page
User- friendly and fully responsive.
Products Management
- Display of categories of products the system deals in.
- Per month bar graph analysis of available stocks.
- A list of products with details such as name, category, price, and stock quantity, using mock data (ProductData).
- Functionalities - Add, edit, and delete products.
- User- friendly and fully responsive.
Orders Management
- HeroSection consisting of data about - total orders, refunds ratings, reviews, profit, revenue.
- A line curve depicting total orders of the product every month.
- A list of orders, including details like order ID, customer name, order date, and status, using mock data.
- Functionalities - Allow viewing of order details, updating the order status, and deletion of orders.
- User-friendly and fully responsive.
Enjoy exploring the React.js front-end application with Tailwind CSS! If you have any questions or need further assistance, don't hesitate to reach out at [email protected].
