Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahdi-q/inventory-app-project
A web app for save and list your products based on your categories, styled using Tailwind CSS framework.
https://github.com/mahdi-q/inventory-app-project
inventory inventory-app tailwind tailwind-css web-app web-application
Last synced: 1 day ago
JSON representation
A web app for save and list your products based on your categories, styled using Tailwind CSS framework.
- Host: GitHub
- URL: https://github.com/mahdi-q/inventory-app-project
- Owner: mahdi-q
- Created: 2024-05-24T17:40:02.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-11-01T16:23:20.000Z (17 days ago)
- Last Synced: 2024-11-01T16:28:27.315Z (17 days ago)
- Topics: inventory, inventory-app, tailwind, tailwind-css, web-app, web-application
- Language: JavaScript
- Homepage: https://inventory-app-project.vercel.app
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Inventory App Project
A web app for save and list your products based on your categories, styled using Tailwind CSS framework.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Features](#features)
- [Key Concepts](#key-concepts)
- [Contact Information](#contact-information)
## Installation
### Prerequisites
- Node.js and npm should be installed on your machine.
### Steps
1. Clone the repository:
```bash
git clone https://github.com/mahdi-q/Inventory-App-Project.git
```
2. Navigate to the project directory:
```bash
cd Inventory-App-Project
```
3. Install the dependencies:
```bash
npm install
```
4. Convert the Tailwind classes to the CSS properties:
```bash
npm run dev
```
5. Run the HTML file with live server extention in VS Code.
## Usage
To start using the Inventory App, follow the steps below:
1. Open the app in your browser.
2. Add a new category by entering a title and a description.
3. Add a new product by entering a title and the quantity , and selecting the related category.
4. Edit your products and categories if needed.
5. Use the sorting and searching options to organize your products.
## Features
- **Add Category**: Add categories with a title and description.
- **Add Product**: Add products with a title, quantity and category.
- **Edit Category**: Edit categories by changing title or description.
- **Edit Product**: Edit products by changing title or quantity or category.
- **Remove Product**: Delete products from the list.
- **Search Products**: Search products instantly.
- **Sort Notes**: Sort products based on:
- Type of categories
- Newest
- Oldest
## Key Concepts
This project explores several important concepts from JavaScript:
- **ES6 JS module**: Learn how to use ES6 modules to organize and reuse your code.
- **OOP programming**: Understand the principles of Object-Oriented Programming and how to apply them in JavaScript.
- **DOM concepts**: Manipulate the Document Object Model (DOM) to dynamically update and interact with web pages.
- **Local Storage concepts**: Use Local Storage to store and manage data on the client-side.
## Contact Information
For any questions or feedback, please contact me at [[email protected]](mailto:[email protected]).
---
Thank you for using the Inventory App!