🍽️ Basic Canteen Ordering App with Svelte & Firebase

A basic implementation of a canteen food ordering application built with SvelteKit and Firebase. This starter project demonstrates core features including a food menu, shopping cart, user authentication, and real-time order processing. It's designed as a foundation that you can extend with additional features and customizations.

🚀 Key Features

• 🔍 Browse food and drink menu
• 🛒 Interactive shopping cart system
• 🔐 User authentication with Firebase Authentication
• 📝 Real-time order processing
• 📱 Responsive design
• ⚡ Blazing fast performance with SvelteKit

🛠️ Technologies Used

• SvelteKit - Modern web framework
• Firebase - Backend as a Service
  • Firebase Authentication (Email/Password)
  • Cloud Firestore (NoSQL database)
  • Firebase Hosting (for deployment)
• Vite - Build tool and development server
• Firebase Admin SDK - For server-side operations (menu management)

🚀 Getting Started

Prerequisites

• Node.js 16.0.0 or newer
• Firebase account (free)
• Firebase CLI (for deployment)

Installation

1. Clone the repository

   git clone [REPOSITORY_URL]
   cd svelte-firebase-canteen
   

2. Install dependencies

   npm install
   

3. Set up Firebase

   • Create a new project in Firebase Console
   • Enable Authentication (Email/Password)
   • Create a Firestore database in test mode (choose a location close to your users)
   • Set up the following Firestore Security Rules in the Firebase Console (Firestore > Rules):

     rules_version = '2';
     service cloud.firestore {
       match /databases/{database}/documents {
         // Allow read access to all users
         match /menu/{document=**} {
           allow read: if true;
           // Only allow writes if authenticated as admin
           allow write: if request.auth != null && get(/databases/$(database)/documents/admins/$(request.auth.uid)).exists();
         }
              
         // Order-related rules
         match /orders/{orderId} {
           allow read: if request.auth != null && (
             request.auth.uid == resource.data.uid || // Owner can read
             get(/databases/$(database)/documents/admins/$(request.auth.uid)).exists() // Admin can read
           );
           allow create: if request.auth != null && request.resource.data.uid == request.auth.uid;
         }
         
         // Admin users collection
         match /admins/{userId} {
           allow read, write: if request.auth != null && get(/databases/$(database)/documents/admins/$(request.auth.uid)).exists();
         }
       }
     }
     

   • (Optional) Create a collection named admins and add admin user documents with the UID as the document ID
   • Get your Firebase configuration from Project Settings > General > Your apps > Web app

4. Configure Environment Copy the .env.example file to .env.local and fill in your Firebase configuration:

   cp .env.example .env.local
   

   Fill in the .env.local file with your Firebase configuration (you can find these in your Firebase Console > Project Settings > General > Your apps > Web app):

   VITE_FIREBASE_API_KEY=your-api-key
   VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
   VITE_FIREBASE_DATABASE_URL=https://your-project.firebaseio.com
   VITE_FIREBASE_PROJECT_ID=your-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-bucket.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
   VITE_FIREBASE_APP_ID=your-app-id
   VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
   

5. Run the Application

   Open http://localhost:5173 in your browser.

🧪 Development

Setting Up the Menu

To populate your database with sample menu items, you'll need to set up Firebase Admin credentials:

1. Set up Firebase Admin (one-time setup):

   • Go to Firebase Console
   • Navigate to Project Settings > Service Accounts
   • Click "Generate new private key" to download the service account JSON file
   • Rename it to service-account.json and place it in the project root

2. Install required dependencies (if not already installed):

   npm install firebase-admin
   

3. Run the setup script:

   node add_sample_menu.js
   

   This will create a menu collection with these sample items:

   • Nasi Goreng (Rp25,000)
   • Mie Ayam (Rp20,000)
   • Bakso (Rp18,000)
   • Sate Ayam (Rp22,000)
   • Gado-Gado (Rp15,000)
   • Rendang (Rp30,000)
   • Soto Ayam (Rp17,000)
   • Nasi Padang (Rp22,000)
   • Ayam Bakar (Rp24,000)
   • Ikan Bakar (Rp26,000)

     npm install -g firebase-tools
     

4. Login to Firebase:

   firebase login
   

5. Start the emulator:

   firebase emulators:start --only auth,firestore
   

🚀 Deployment

Deploy to Firebase Hosting

1. Build the application for production:

   npm run build
   

2. Deploy to Firebase:

   firebase deploy --only hosting
   

📁 Project Structure

src/
├── lib/
│   ├── components/           # Reusable Svelte components
│   │   ├── AuthForm.svelte   # Authentication form
│   │   ├── Cart.svelte       # Shopping cart component
│   │   └── Menu.svelte       # Menu display component
│   ├── firebase.js           # Firebase configuration and initialization
│   └── stores.js             # Svelte stores for state management
├── routes/
│   ├── orders/               # Order-related pages
│   │   └── +page.svelte      # Order history page
│   ├── +layout.svelte        # Main application layout
│   └── +page.svelte          # Main page (menu and cart)
└── app.css                   # Global styles

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

🔒 Security

Important Security Notes:

1. The default configuration includes placeholder API keys. In production:
   • Use environment variables as specified in the .env file
   • Configure proper Firebase Security Rules for Firestore
   • Enable only the authentication methods you need in Firebase Console
   • Set up proper CORS policies
   • Implement rate limiting if necessary

Development

To run the development server:

npm run dev

To build for production:

npm run build

To preview the production build:

npm run preview

📝 License

Licensed under the MIT License.