Building StockPilot AI: My First App
Engineering a Modern Platform for Stock Analysis and E-commerce
I’m excited to share that my first app, StockPilot AI, is now live!
StockPilot AI is designed to help small and medium-sized enterprises (SMEs) optimize their inventory using AI-powered insights. By combining real-time analytics with smart automation, the app empowers businesses to reduce costs, prevent stock issues, and streamline operations.
Building and launching this app was an exciting challenge, especially during deployment. But after plenty of trial and error, I’ve created something I’m truly proud of.
Here’s how it works and its key features.
The Architecture Behind StockPilot
StockPilot AI takes a modern approach to e-commerce inventory management and integrates AI capabilities with cloud services and Shopify to extract information. Making stock management more intelligent and efficient.
Tech Stack
The frontend is built with React and Next.js to keep it fast and smooth. I used TypeScript and Tailwind CSS to give it a sharp and modern look. React Query keeps the data fresh, so stock prices and inventory levels update instantly.
The backend runs on Firebase, handling user logins, data storage, and small cloud programs that keep everything humming. Real-time updates flow through Firebase and WebSockets, ensuring you always see the latest info. Also, to get over problems with CORS, I’ve created an edge function on Netlify— Netlify is the platform where the app is hosted— that retrieves data from Shopify.
Dashboard Components
The dashboard is designed to provide a clear, data-driven overview of inventory performance. It offers key features such as:
Intelligent Inventory Management
Smart Restock Suggestions: AI-driven recommendations for optimal inventory levels
Overstocking Prevention: Identification of slow-moving products to avoid capital tie-up
Low Stock Alerts: Proactive notifications to prevent stockouts
Advanced Analytics
Sales Trend Analysis: Visual representation of historical sales data
Product Performance Metrics: Detailed insights into which products drive revenue
Predictive Analytics: AI-powered forecasting of future inventory needs
Key Components:
ProductSalesStockChart: Visual representation of sales trends and inventory levels
AIRecommendations: Smart suggestions based on inventory data and sales patterns
AIStockPredictions: Forecasting of future inventory needs based on historical data
After using the app, I’ve noticed that moving between pages there was a big delay, which was due to poor optimization of the fetching mechanism. To enhance performance, I’ve created a cached mechanism that uses memoization to prevent unnecessary re-renders and lazy loading for efficient data handling. This resulted in instant loading besides the initial load.
Building a Responsive Frontend
Nowadays, all apps should be responsive, from bigger screens to mobile view. People are mobile and want to get the most while on the move. Being able to quickly extract information on the go from the dashboard was key. Thus, creating an intuitive and responsive interface was a top priority!
Key technologies include:
React & TypeScript: Ensures maintainable, type-safe development.
React Query: Handles data fetching and caching efficiently.
TailwindCSS & Material UI: Provides a clean, consistent UI.
React Router: Enables seamless navigation within the app.
Frontend Structure
src/
├── components/
│ ├── analytics/ # Charts and data visualization components
│ ├── dashboard/ # Main dashboard interface components
│ ├── integrations/ # Connection components for external services
│ └── ui/ # Reusable UI elements
├── contexts/ # React context providers for global state
├── hooks/ # Custom React hooks for shared logic
├── pages/ # Page-level components
└── types/ # TypeScript type definitionsA responsive and modular layout ensures the dashboard works across different devices, prioritizing accessibility and clear information hierarchy.
Backend & API Services
StockPilot AI leverages Firebase and Netlify’s cloud functions for its backend services, ensuring security, scalability, and seamless API interactions.
Firebase
Authentication: Quick & Secure login with multiple sign-in methods.
Firestore: A NoSQL database storing user and store data.
Netlify
Cloud Functions: Handles Shopify integration and inventory synchronization.
Shopify API
One of the core features of StockPilot AI is its integration with Shopify, which enables real-time access to product and order data.
Backend Proxy System: A Netlify serverless function acts as a proxy for Shopify API communications. It verifies credentials, handles pagination for large datasets, and securely forwards requests while adding necessary parameters.
Data Transformation: Raw Shopify data is transformed into dashboard-friendly formats using utilities like the productMerger, combining product and order information, while context-aware AI queries filter the data for recommendations.
OpenAI API Integration
AI plays a crucial role in StockPilot. Utilizing tools like ChatGPT, enables to create a helpful assistant that provides valuable insights to businesses to make informed decisions.
Query Utilization: To maximize the value of the output, we have to optimize the value of the input. That’s why creating the best prompt and parsing the correct data is key. Because we can’t input the whole database into the algorithm, I’ve created a mechanism that aggregates and filters the products and sales being parsed as context to the model. This reduces costs and increases performance by selecting only relevant data.
AI Recommendation System: The AIRecommendations component dynamically displays actionable inventory insights by grouping and parsing all the products with their stock levels and their sales to OpenAI. Then the assistant delivers 3 types of actions: Restock, Warnings and Opportunity, while also assigning a priority to each of them, High, Medium and Low, to focus on the important actions.
Conversational AI Assistant: A conversational interface via the AIAssistantPanel leverages context-aware query analysis to deliver targeted responses. The AIAssistantContext Provider manages conversation states, dynamically filtering product and order data based on user queries, while a floating AIAssistantButton offers quick access to the chat interface.
Final Message
StockPilot is my first app, and building it has been an experience. Integrating AI, cloud functions, and modern web technologies into a single platform was both challenging and rewarding.
The result? A powerful and simple inventory management solution that helps e-commerce businesses reduce costs, optimize stock levels, and improve efficiency.
Feel Free to check it here: https://stockpilotai.com/
Check the repo: https://github.com/alex-kazos/stockpilot
Let’s Connect!
💼 LinkedIn: alex-kazos
👨🏻💻 GitHub: alex-kazos