SHELFLY

Note: This application was developed in Italian for educational purposes.

🌐 Live Demo

Visit Shelfly - Try the application now!

📱 About

Shelfly is a modern mobile application built with Ionic and Angular that revolutionizes the way customers shop at supermarkets. The app provides an intelligent platform for browsing products, discovering offers, managing shopping carts, and locating nearby stores.

Shelfly bridges the gap between customers and supermarkets by offering a comprehensive digital shopping experience with real-time product information, interactive maps, and personalized shopping features.

For Store Managers

Shelfly makes inventory management effortless! Store managers can add products to their catalog without worrying about:

• 📸 No Image Upload Required: The application automatically fetches product images through OpenFoodFacts integration
• 🔢 Barcode Optional: You can add products even without barcode information - the app handles it intelligently
• 📝 Auto-Complete Product Data: Product descriptions, nutritional information, and details are automatically retrieved when available

This means faster product onboarding and less manual data entry, allowing managers to focus on what matters most: running their business.

✨ Features

For Customers

• 🗺️ Interactive Store Locator: Find nearby supermarkets using geolocation with an interactive map powered by Leaflet
• 🛒 Smart Shopping Cart: Add products to cart with real-time price calculations and quantity management
• 🏷️ Offers & Promotions: Browse exclusive deals and special offers from your favorite supermarkets
• 🔍 Advanced Search: Search for products, offers, and supermarkets with intelligent autocomplete and recent search history
• 📦 Product Catalog: Explore detailed product information including prices, descriptions, and categories
• 📋 Order History: Track and review your past orders
• 👤 User Profile: Manage your account and preferences

For Store Managers

• 📊 Inventory Management: Add, edit, and manage product listings with ease
• 🤖 Smart Product Import: Automatic product data retrieval via OpenFoodFacts API - no need to manually enter images, descriptions, or barcodes
• 🖼️ Automatic Image Fetching: Product images are automatically loaded from OpenFoodFacts database
• 🏷️ Flexible Product Creation: Add products with or without barcodes - the system adapts to your needs
• 🏪 Store Dashboard: Monitor and control your supermarket's digital presence
• 💰 Offer Management: Create and manage promotional campaigns
• 📈 Product Analytics: Track product performance and customer preferences

🛠️ Tech Stack

• Framework: Ionic 8 + Angular 19
• Mobile: Capacitor 7
• Maps: Leaflet
• Language: TypeScript
• Styling: SCSS with Ionic Components
• State Management: RxJS
• Geolocation: Capacitor Geolocation Plugin
• Backend: Firebase (authentication and data storage)

📋 Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Ionic CLI: npm install -g @ionic/cli
• Angular CLI: npm install -g @angular/cli

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/FrancescoDiPatti/SHELFLY.git
   cd SHELFLY

2. Install dependencies

   npm install

3. Configure environment

   • Update src/environments/environment.ts with your Firebase configuration
   • Configure API endpoints in src/app/config/api.config.ts

4. Run the development server

   ionic serve
   # or
   npm start

5. Build for production

   npm run build:prod

6. Run on mobile devices

   # iOS
   ionic capacitor run ios
   
   # Android
   ionic capacitor run android

📱 Screenshots

Dashboard & Store Locator

Interactive map showing nearby supermarkets with real-time location

Product Catalog

Browse products by category with detailed information

Add Product

Quickly add new products to your inventory

Create Product

Customize product details and add them to your catalog

Shopping Cart

Manage your cart with real-time price calculations

Order Management

Track and review your order history

🏗️ Project Structure

SHELFLY/
├── src/
│   ├── app/
│   │   ├── auth/              # Authentication module
│   │   ├── config/            # App configuration
│   │   ├── home/              # Main app features
│   │   │   ├── carrello/      # Shopping cart
│   │   │   ├── dashboard/     # Store locator & map
│   │   │   ├── gestione/      # Store management
│   │   │   ├── offerte/       # Offers & promotions
│   │   │   ├── ordini/        # Order history
│   │   │   └── prodotti/      # Product catalog
│   │   └── services/          # Shared services
│   ├── assets/                # Images and static files
│   ├── environments/          # Environment configs
│   └── theme/                 # Global styles
├── capacitor.config.ts        # Capacitor configuration
├── ionic.config.json          # Ionic configuration
└── package.json               # Dependencies

🎯 Key Services

• AuthService: Handles user authentication and authorization
• HomeService: Manages app state and data flow
• SearchService: Powers the intelligent search functionality
• CarrelloService: Manages shopping cart operations
• SupermercatiService: Handles supermarket data and selection
• PosizioneService: Manages geolocation features
• MapService: Controls the interactive map functionality

👨‍💻 Author

Francesco Di Patti

• GitHub: @FrancescoDiPatti

Made with ❤️ for educational purposes