An efficient and intuitive inventory management application designed for e-commerce businesses.
Designed and developed by: Priscilla Colon, Sebastian Nunez
Link to deployed app: https://stockpulse.up.railway.app/
Demo Video: https://www.youtube.com/watch?v=ZLVxP9Sl_cY
- Features
- Screenshots
- Technologies
- Demos
- Getting Started
- Kanban Board
- Wireframes
- ER Diagram
- System Design
- Tables
- License
-
Product Management:
- Add, update, and remove products with ease.
- Categorize and tag products for efficient organization.
-
Category & Tag Management:
- Create, update, and remove categories and tags for products.
- Assign products to multiple tags.
-
User-friendly Interface:
- Browse products, view details, and manage inventory via an Inventory or "card view"
- Browse products, view details, and manage inventory via a Dashboard or "tabular view"
- End-to-end form and input validation
- Login via OAuth using GitHub
-
Inventory Control:
- Monitor product quantities and make adjustments as needed.
- Receive low-stock alerts for timely restocking.
StockPulse - Design Process Overview
- Frontend
- Languages: JavaScript
- Frameworks: React.js (Vite)
- UI Components: NextUI, TailwindCSS
- Icons: Lucide Icons
- Data Fetching: useQuery, Axios
- Form Validation: react-hook-form, Zod
- Notifications/Toasts: react-hot-toast
- Backend:
- Languages: Node.js
- Frameworks: Express
- Authentication: Passport, OAuth2
- Database: PostgreSQL
- Hosting: Railway
- Design: Whimsical
Here's a GIF walkthrough of the final project
Users are able to see an individual product's full details via a responsive modal
StockPulse was design with a responsive architecture while following the latest WAI-ARIA accessability standards to accommodate a mobile and desktop experience.
Users are able to scroll through different pages of products
Input forms are fully validated before submission including user-friendly error messages and hints. Error and success notifications are displayed.
We've implemented loading skeletons to maximize UX and give users as much feedback as possible. Moreover, we've implemented extensive error handling through messages, modals, and cards.
Loading Skeletons
Error Handling
Users are able to filter items by their, related tags, and category.
Within the Inventory view, users will be able to see the most relevant details about a product. Also, they're able to click on an item and expand all it's details; moreover, users can edit an item.
All API endpoints validate their data and send helpful error messages back to the client.
- Clone the repository:
git clone https://github.com/sebastian-nunez/stock-pulse - Set up the backend:
- Navigate to the backend directory:
cd server - Install dependencies:
npm install - Update the environment variables: make a copy of the
.env.templaterename it to.envand fill in the variables - Run the backend server:
npm run start
- Navigate to the backend directory:
- Set up the frontend:
- Navigate to the frontend directory:
cd client - Install dependencies:
npm install - Run the frontend app:
npm run dev
- Navigate to the frontend directory:
- Open your browser and visit http://localhost:5173 to access StockPulse.
Note: The service currently relies on
Railwayfor database hosting and management. You can sign up and host your own instance. Learn more about Railway
You can find the full board on Whimsical.
The diagram ignores any authentication/authorization measures.
In this schema, we have the following relationships:
-
One-to-Many Relationship (Category to Products):
- Each product belongs to one category.
-
Many-to-Many Relationship (Products to Tags):
- Products can have multiple tags, and each tag can be associated with multiple products.
Stores information about individual products.
| Field | Type | Description | Constraints |
|---|---|---|---|
| product_id | SERIAL | Unique identifier for the product | Primary Key |
| name | VARCHAR(100) | Name of the product | Not Null, Unique |
| brand | VARCHAR(100) | Brand or manufacturer of the product | Not Null |
| description | VARCHAR(255) | Description of the product | Not Null |
| image | VARCHAR(255) | Image of the product | Not Null |
| quantity | INT | Quantity of the product in stock | Not Null |
| price | DECIMAL(12,2) | Price of the product in USD | Not Null |
| is_available | BOOLEAN | Information about the product's availability (true/false) | Not Null, true or false |
| weight | DECIMAL(10,2) | Weight of the product (in lbs) | Not Null |
| dimensions | VARCHAR(50) | Dimensions of the product (Length x Width x Height) | Default: "Unknown." |
| warranty_info | VARCHAR(255) | Details about the product's warranty | Default: "No warranty information available." |
| notes | TEXT | Any notes about the product | |
| date_added | DATE | Date when the product was added to the inventory | Not Null, Default: CURRENT_DATE |
| category_id | INT | Foreign key referencing a category | Foreign Key, ON DELETE SET NULL |
Stores information about product categories.
| Field | Type | Description | Constraints |
|---|---|---|---|
| category_id | SERIAL | Unique identifier for the category | Primary Key |
| name | VARCHAR(25) | Name of the category | Not Null, Unique |
| description | VARCHAR(255) | Description of the category | Default: "No description provided." |
Stores information about product tags. Ex. Discounted, Hotsale, Rebate etc.
| Field | Type | Description | Constraints |
|---|---|---|---|
| tag_id | SERIAL | Unique identifier for the tag | Primary Key |
| name | VARCHAR(25) | Name of the tag | Not Null, Unique |
| description | VARCHAR(255) | Description of the tag | Default: "No description provided." |
Establishes a many-to-many relationship between products and tags.
| Field | Type | Description | Constraints |
|---|---|---|---|
| product_id | INT | Foreign key referencing products | Foreign Key, ON DELETE CASCADE |
| tag_id | INT | Foreign key referencing tags | Foreign Key, ON DELETE CASCADE |
| PRIMARY KEY | (product_id, tag_id) | Composite primary key | Primary Key |
This project is licensed under the MIT License