Store Management System

📖 Product Overview

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.

Key Features

• 📦 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.

🏗️ Architecture & Tech Stack

This project follows a modern Client-Server Architecture, separating the frontend presentation layer from the backend logic and database.

Frontend (Client)

• 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)

Backend (Server)

• Framework: Flask
• Database: SQLite (Development) / PostgreSQL (Production ready)
• ORM: SQLAlchemy
• Data Analysis: Pandas (for complex report generation)
• Authentication: JWT (JSON Web Tokens)

📂 Project Structure

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 Guidelines

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Python (v3.9 or higher)
• Node.js (v18 or higher)
• npm (v9 or higher)

1. Backend Setup

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.py

Server runs at: http://localhost:5000

2. Frontend Setup

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 dev

Application runs at: http://localhost:5173

🎮 Usage

Once both the backend and frontend are running:

1. Dashboard: Navigate to http://localhost:5173/ to view the sales overview.
2. Inventory: Click on the "Inventory" tab to manage your products. You can add new items, update prices, or remove stock.
3. POS Terminal: Go to the "Point of Sale" section to process customer orders. Select items, review the cart, and checkout.

🔐 Environment Variables

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.db

See backend/README.md for more detailed configuration options.

📸 Screenshots

(Placeholder for screenshots of the Dashboard, Inventory Page, and POS Interface)

✍️ Author

Your Name

• Github: @MDF05
• LinkedIn: Muhammad Dava Fahreza
• Email: email@example.com

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for details on how to get started.

📄 License

This project is open-source and available under the MIT License.