Skip to main content

​
Welcome to StockPro

StockPro is a complete inventory management and point-of-sale (POS) system built with Firebase. This guide will walk you through setting up the application from scratch to your first successful login.
This application uses Firebase Authentication and Firestore for backend services. You’ll need a Firebase account to run the application.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v14 or higher)
  • npm (comes with Node.js)
  • A Firebase account (free tier works perfectly)
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
1
Clone or Download the Project
2
First, get a copy of the StockPro source code on your local machine:
3
# If using Git
git clone <repository-url>
cd source

# Or download and extract the ZIP file, then navigate to the directory
cd path/to/source
4
Install Dependencies
5
StockPro uses Firebase SDK v12.10.0. Install it using npm:
6
npm install
7
This will install the Firebase package defined in package.json:
8
{
  "dependencies": {
    "firebase": "^12.10.0"
  }
}
9
The application uses Firebase’s modular SDK (v10.12.2) via CDN imports for better tree-shaking and performance.
10
Set Up Firebase Project
11
Create and configure your Firebase project:
12
  • Go to the Firebase Console
  • Click “Add project” or select an existing project
  • Enable Authentication with Email/Password provider:
    • Navigate to Authentication > Sign-in method
    • Enable “Email/Password”
    • Click Save
  • Enable Cloud Firestore:
    • Navigate to Firestore Database
    • Click “Create database”
    • Choose production mode or test mode
    • Select your preferred location
    • 13
    Configure Firebase Credentials
    14
    Update your Firebase configuration in public/js/firebase.js:
    15
    public/js/firebase.js
    // Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };
    16
    Replace all placeholder values with your actual Firebase project credentials. You can find these in: Firebase Console > Project Settings > General > Your apps > SDK setup and configuration
    17
    How to get your Firebase config:
    18
  • In Firebase Console, click the gear icon (⚙️) next to “Project Overview”
  • Select “Project settings”
  • Scroll down to “Your apps” section
  • If you haven’t added a web app, click the web icon (</>)
  • Register your app and copy the configuration object
    • 19
    Create Your First User
    20
    Before you can log in, you need to create a user account in Firebase:
    21
  • Go to Firebase Console > Authentication > Users
  • Click “Add user”
  • Enter an email address and password
  • Click “Add user”
    • 22
    StockPro currently requires manual user creation through the Firebase Console. User registration through the app interface is not implemented.
    23
    Run the Application Locally
    24
    StockPro is a static web application that can be served with any HTTP server. Here are several options:
    25
    Using Python (Python 3)
    # Navigate to the public directory
cd public

# Start a simple HTTP server on port 8000
python3 -m http.server 8000
    Using Node.js (http-server)
    # Install http-server globally (one-time)
npm install -g http-server

# Navigate to the public directory
cd public

# Start the server
http-server -p 8000
    Using PHP
    # Navigate to the public directory
cd public

# Start PHP's built-in server
php -S localhost:8000
    Using VS Code Live Server
    # If using VS Code with Live Server extension
# Right-click on public/login.html
# Select "Open with Live Server"
    26
    The application will be available at http://localhost:8000
    27
    Access the Login Page
    28
    Open your browser and navigate to:
    29
    http://localhost:8000/login.html
    30
    You should see the StockPro login interface with:
    31
  • Email input field
  • Password input field with show/hide toggle
  • “Iniciar Sesión” (Login) button
  • “¿Olvidaste la contraseña?” (Forgot password) link
    • 32
    Log In to the Dashboard
    33
    Enter the credentials you created in Step 5:
    34
  • Enter your email address
  • Enter your password
  • Click “Iniciar Sesión”

    • Successful Login

    After successful authentication, you’ll be automatically redirected to the main dashboard at index.html where you can:
    • View sales metrics and statistics
    • Manage inventory and products
    • Process new sales transactions
    • Access sales records

    ​
    What’s Next?

    Now that you have StockPro running locally, explore these features:

    Manage Inventory

    Add, edit, and track products in your inventory system

    Process Sales

    Create new sales transactions and view sales history

    Authentication

    Learn about the authentication system and user management

    Dashboard Metrics

    Understand the dashboard metrics and reporting features

    ​
    Troubleshooting

    Possible causes:
    • Incorrect email or password
    • User doesn’t exist in Firebase Authentication
    • Firebase configuration is incorrect
    Solution:
    1. Verify the user exists in Firebase Console > Authentication > Users
    2. Double-check your email and password
    3. Ensure your firebaseConfig in firebase.js is correct
    Cause: Authentication state is not persisting, or the auth check is redirecting authenticated users.Solution:
    1. Check browser console for JavaScript errors
    2. Verify that auth.js is properly loaded on protected pages
    3. Clear browser cache and cookies
    4. Ensure Firebase is properly initialized
    Cause: Browsers block ES6 module imports when opening HTML files directly (file:// protocol).Solution: Always use an HTTP server to serve the application (see Step 6). Never open HTML files directly in the browser.
    Cause: Missing or incorrect Firebase credentials.Solution:
    1. Verify all Firebase config values in firebase.js
    2. Ensure Authentication and Firestore are enabled in Firebase Console
    3. Check that your Firebase project is active and not deleted

    ​
    Project Structure

    Understanding the project structure will help you navigate and customize StockPro: 
    source/
├── public/
│   ├── css/                    # Stylesheets
│   │   ├── base.css
│   │   ├── dashboard.css
│   │   └── login.css
│   ├── js/                     # JavaScript modules
│   │   ├── firebase.js         # Firebase initialization
│   │   ├── auth.js             # Auth state management
│   │   ├── login.js            # Login functionality
│   │   ├── dashboard.js        # Dashboard logic
│   │   ├── productos.js        # Product management
│   │   ├── ventas.js           # Sales management
│   │   └── ...
│   ├── index.html              # Main dashboard
│   ├── login.html              # Login page
│   ├── panel_inventario.html   # Inventory panel
│   ├── panel_ventas.html       # Sales panel
│   └── ...
├── package.json
└── package-lock.json

    ​
    Support

    If you encounter issues not covered in this guide:
    1. Check the browser console for error messages
    2. Review the Authentication documentation for login-related issues
    3. Verify your Firebase project configuration and quotas
    4. Ensure all dependencies are properly installed

    Build docs developers (and LLMs) love

    Get started for freeTalk to us