The web application is specifically designed for supermarkets to effectively manage their products and customer carts. It offers a range of features tailored to streamline supermarket operations. Key functionalities of the application include:
-
Product Management: The application allows supermarkets to easily manage their product .inventory, including adding new products, updating product details, and removing products when necessary.
-
Cart Management: Supermarkets can handle multiple customer carts concurrently, enabling efficient management of checkout processes for multiple customers at the same time.
-
Total Amount Calculation: The application provides the ability to calculate the total amount for each customer's cart, considering factors such as product prices, quantities, and any applicable discounts or taxes.
-
Cart Descriptions: Supermarkets can add descriptions to each cart, allowing cashiers or customers to provide additional details or notes for better organization and reference.
By utilizing this web application, supermarkets can streamline their product and cart management processes, enhance customer service, and ensure accurate calculation of order totals for a seamless shopping experience.
Product Management
Multi-Cart Management
Search & Filteration system
Category Manpluation page
Unit of measure Management
Dashbaord for Users
Authentication System
User Authorization
Switch Between Themes
The application is developed using the Node environment with React.js. To install the project, you have two options: cloning the repository or downloading it as a ZIP file.
Cloning the repository:
Open your terminal or command prompt. Run the following command:
git clone [repository_url]- Navigate to the project directory:
cd [project_directory]- Install the project dependencies by running:
npm installDownloading as a ZIP file:
- Download the ZIP file from the repository.
- Extract the contents of the ZIP file to a desired location on your computer.
- Open your terminal or command prompt.
- Navigate to the extracted project directory: cd [project_directory]
cd [project_directory]- Install the project dependencies by running:
npm installAfter completing the installation process, you can proceed with running and using the application
npm startThe system is tightly integrated with a backend that I have built. Without the backend, the system will not function properly, and its features will not be accessible. To install and set up the backend, please follow these steps:
- Access the POS-BACKEND repository through this link: POS-BACKEND.
- Clone the repository or download it as a ZIP file.
- Open your terminal or command prompt.
- Navigate to the backend directory.
- Install the necessary dependencies by running the command:
npm install- Configure the backend by setting up the required environment variables, database connections, and any other necessary configurations.
- Run the backend server using the command:
npm startThe backend will now be up and running, providing the APIs required for the system's functionality.
NOTE: The system database is MongoDB and the uri of the database connection is hidden in .env file. To Setup mongodb configuration correctly you have add .env file with line below
MONGOPATH = "mongodb+srv://(username):ixrwZDUrxf6qcTei@cluster0.tubw4as.mongodb.net/(collection name)?retryWrites=true&w=majority"
After installing and configure our app. The main page once we starting the page at localhost at port 3000 the page run this url https::/localhost:3000 will shown as the figure below
Noway to navigate to any page without login to the page.There's no users yet. excpt only the admin.
Note: That once you configure MongoDB the system will not create the admin user. you have to Create one manually.
interface User{
username:string;
password:string;
admin:boolean;
}
The search bar and select inputs are utilized to apply filters to the list of products. You can enter search terms in the search bar to find specific products based on their names or other relevant information. The select inputs allow you to choose specific criteria for filtering the products, such as category or unit of measure. By selecting the desired options, you can refine the list and view only the products that meet the specified filter criteria.
Also You can change the display way of products list from Cards to list as shown
By clicking on the headers of the tables, you can sort the entire list based on the selected column. The sorting will be applied to organize the data in ascending or descending order. Additionally, you can utilize the search functionality to quickly find specific carts based on their descriptions. Enter relevant keywords in the search field to filter the list and narrow down the results.
After selecting a cart from the list, you will be directed to the following view. In this view, you have the option to modify the description or quantity of individual products within the cart. You can also delete products from the list or add new products by selecting from the available product list. Additionally, each cart has taxes and discounts associated with it. Similar to the cart table, you can apply sorting and filtering options to refine the displayed data.
interface Cart {
cartId: string;
description: string;
tax: number;
discount: number;
products: Product[];
}
The Category page is designed to provide users with the ability to manage categories effectively. It offers a range of functionalities, including adding, editing, and deleting categories.
The Unit of Measure page is designed to provide users with the ability to manage Unit of Measures effectively. It offers a range of functionalities, including adding, editing, and deleting Unit of Measure.
The Product page is a versatile tool that puts users in control of managing their products effectively. With this page, users have the ability to add new products, make changes to product categories, and modify the unit of measure for each product. Additionally, the page offers powerful filtering and searching capabilities to help users navigate through their product inventory effortlessly.
The Dashboard is a central hub provided to all users, offering essential functionalities for efficient navigation and personalization. With the Dashboard, users gain access to valuable features such as viewing checked carts and switching themes. Additionally, the administrative role holds exclusive privileges to add or delete users.
In this application, the primary configuration option available is related to theming. All users within the system have the ability to customize the color theme according to their preferences. This can be done by navigating to the dashboard and accessing the theme settings.
The application offers four pre-defined themes for users to choose from:
-
Dark Theme: This theme provides a visually appealing and modern dark color scheme, which is ideal for users who prefer a sleek and immersive interface.
-
White Theme: The white theme offers a clean and minimalist look, utilizing light colors to create a bright and refreshing user experience.
-
Material Theme: Inspired by the Material Design principles, this theme incorporates vibrant colors and subtle shadows to provide a visually rich and interactive interface.
-
Green Theme: The green theme embraces a color palette centered around shades of green, delivering a nature-inspired and visually calming experience.
Users can select their desired theme from the available options within the dashboard, enabling them to personalize the application's appearance to match their preferences. This flexibility in theming enhances the overall user experience, making the application more engaging and enjoyable to use.
In this project, I have utilized several React libraries to enhance the functionality and user experience. Here are the key libraries that have been employed:
-
React-Redux: I have leveraged React-Redux for efficient state management, enabling seamless data flow and ensuring a consistent application state across components.
-
Storybook: To facilitate system design and component development, I have integrated Storybook. This powerful tool allows for isolated component testing and the creation of a comprehensive UI component library.
-
Axios: For seamless data fetching from APIs, I have utilized Axios. This library simplifies the process of making HTTP requests, providing a convenient and efficient means of retrieving data.
-
Yup: To ensure robust data validation and schema creation, I have incorporated Yup. This library allows for easy and comprehensive validation of form inputs and data objects, ensuring data integrity and consistency.
-
React-Router-DOM: For smooth navigation between pages, I have employed React-Router-DOM. This library facilitates dynamic routing, enabling users to move between different sections of the application with ease.
-
Fontawesome: To enrich the user interface with scalable vector icons, I have integrated Fontawesome. This library offers a vast collection of icons that can be easily incorporated into the application, enhancing its visual appeal and usability.
By incorporating these React libraries, I have enhanced the functionality, state management, UI design, data fetching, data validation, navigation, and visual aspects of the project. These libraries contribute to an improved overall user experience and efficient development process.
POS System project is licensed under the MIT License.