The Store Management System is a robust, full-stack application designed to streamline retail operations. It bridges the gap between inventory control and point-of-sale efficiency, offering a seamless experience for store managers and cashiers.
Built with a focus on modern user experience (UX) and data-driven decision-making, this system allows businesses to track stock in real-time, process sales quickly, and gain actionable insights through an interactive analytics dashboard.
- 📦 Smart Inventory Management: effortless addition, updating, and categorization of products.
- 🛒 Point of Sale (POS) Terminal: A responsive, intuitive interface for processing customer orders instantly.
- 📊 Real-Time Analytics: Visual dashboards displaying daily revenue, top-selling products, and sales trends.
- 🎨 Premium UI/UX: A dark-themed, glassmorphism-inspired design that is both aesthetic and functional.
- 🔐 Secure & Scalable: built on a solid Flask backend with SQLAlchemy ORM for reliability.
This project follows a modern Client-Server Architecture, separating the frontend presentation layer from the backend logic and database.
- Framework: Vue.js 3 (Composition API)
- Build Tool: Vite
- State Management: Pinia
- Routing: Vue Router
- Sytling: Vanilla CSS (Custom Variables & Glassmorphism)
- Visualization: Chart.js (via vue-chartjs)
- Framework: Flask
- Database: SQLite (Development) / PostgreSQL (Production ready)
- ORM: SQLAlchemy
- Data Analysis: Pandas (for complex report generation)
- Authentication: JWT (JSON Web Tokens)
Store-Manajemen/
├── backend/ # Flask API Server
│ ├── instance/ # Database constraints (SQLite file)
│ ├── routes/ # API Endpoints (Blueprints)
│ ├── app.py # Application Entry Point
│ ├── models.py # Database Schema (SQLAlchemy Models)
│ └── requirements.txt # Python Dependencies
├── frontend/ # Vue.js Client Application
│ ├── src/
│ │ ├── components/ # Reusable UI Components
│ │ ├── views/ # Page Views (Dashboard, POS, Inventory)
│ │ ├── stores/ # Pinia State Stores
│ │ └── assets/ # CSS, Images, Icons
│ └── package.json # Node.js Dependencies
├── README.md # Project Documentation
└── CONTRIBUTING.md # Contribution GuidelinesFollow these steps to set up the project locally.
- Python (v3.9 or higher)
- Node.js (v18 or higher)
- npm (v9 or higher)
Initialize the server first to handle API requests.
# Navigate to backend directory
cd backend
# Create a virtual environment
python -m venv venv
# Activate virtual environment
# Windows:
.\venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate
# Install Python dependencies
pip install -r requirements.txt
# Seed the database with initial data
python seed.py
# Start the development server
python app.pyServer runs at: http://localhost:5000
Launch the user interface.
# Open a new terminal and navigate to frontend directory
cd frontend
# Install Node.js dependencies
npm install
# Start the Vite development server
npm run devApplication runs at: http://localhost:5173
Once both the backend and frontend are running:
- Dashboard: Navigate to
http://localhost:5173/to view the sales overview. - Inventory: Click on the "Inventory" tab to manage your products. You can add new items, update prices, or remove stock.
- POS Terminal: Go to the "Point of Sale" section to process customer orders. Select items, review the cart, and checkout.
The backend relies on environment variables for configuration. Create a .env file in the backend/ directory:
SECRET_KEY=your_super_secret_key_change_this
SQLALCHEMY_DATABASE_URI=sqlite:///store.dbSee backend/README.md for more detailed configuration options.
(Placeholder for screenshots of the Dashboard, Inventory Page, and POS Interface)
Your Name
- Github: @MDF05
- LinkedIn: Muhammad Dava Fahreza
- Email: email@example.com
We welcome contributions! Please see CONTRIBUTING.md for details on how to get started.
This project is open-source and available under the MIT License.