In Phase 5 of our Software Engineering program, we were tasked with building a full-stack application that demonstrated advanced backend and frontend integration. For my project, I decided to build a Smart Inventory System—a real-world tool that combines product tracking, sales, expenses, reporting, and user authentication.
This blog post dives into the technologies I used, the architecture I followed, the challenges I faced, and what I learned during this exciting final phase.
🚀 Project Overview
The Smart Inventory System is a full-stack web application that allows users to:
Track Inventory: Add, edit, and delete products
Log Sales and Expenses: View product-level transactions
View Profit Reports: Calculate revenue and expenses per product
Authenticate Users: Secure login and registration using JWT
Visualize Trends: Display sales and expense charts using Chart.js
🧠 Technologies Used
Backend (Flask + SQLAlchemy)
Flask: A lightweight WSGI Python web framework
SQLAlchemy ORM: To model relationships and manage the SQLite database
Flask-JWT-Extended: For secure user authentication via JSON Web Tokens
Flask-CORS: For handling cross-origin requests between frontend and backend
Frontend (React + MUI)
React: A JavaScript library for building user interfaces
Material UI (MUI): For consistent, styled components
Chart.js: For rendering bar charts comparing sales and expenses
React Router: For navigation between routes like /login, /inventory, /sales, /reports
Deployment
Backend: Hosted on Render
https://smart-inventory-system-b8uj.onrender.com
Frontend: Hosted on Vercel
https://smart-inventory-system.vercel.app
🔗 App Features and Structure
- Authentication (Register/Login)
Using JWT tokens, the app allows users to register and login securely. Tokens are stored in local/session storage based on a "Remember Me" checkbox.
- Product Management
Users can add new products with fields like name, price, stock, category, and supplier. They can view, delete, and interact with detailed product pages.
- Sales and Expense Recording
Each product has an associated page where sales and expenses can be logged. Submitting a sale reduces stock and updates profit metrics automatically.
- Reports
Profit Reports: Revenue - Expenses per product
Sales Overview: Displays top-selling products
Bar Charts: Powered by Chart.js to visualize monthly performance
- Context and Error Handling
useContext manages user auth state
Error alerts are displayed for login failures, registration issues, or invalid data
⚒️ Challenges I Faced
Deployment CORS issues: Solved by correctly configuring Flask-CORS
JWT Expiry Handling: Implemented auto-redirect for expired tokens
Missing .env in Vercel: Fixed by forcing Git to commit .env for production
Database integrity: Unique constraints on email required graceful error messages
✅ Lessons Learned
This project helped me:
Strengthen full-stack integration skills
Understand real-world deployment pipelines
Debug frontend/backend interactions
Work with authentication and secure user flows
Build clean, interactive UIs using React and MUI
📎 Final Links
Live App: smart-inventory-system.vercel.app
Backend API: smart-inventory-system-b8uj.onrender.com
GitHub Repo: Smart Inventory System on GitHub
Final Thoughts
This Smart Inventory System was more than just a school assignment—it felt like building something for the real world. With authentication, CRUD, reporting, and analytics, this project is something I’d proudly include in my developer portfolio.