Local Bytes 🍔

✨ LIVE DEMO ✨

Description & Use Case

Local Bytes is a lightweight, responsive food discovery app. Search by dish or cuisine to discover recommended items across a variety of food spots, including restaurants, bakeries, grocery stores, and more!

Screenshots

Mobile View

Desktop View

Data Update Flow

Food spot data is handled via a straightforward CSV-to-JSON workflow:

• Shared CSV: Users maintain a shared CSV file of visited places (restaurants, bakeries, grocery stores, etc.) with favourite items and location details. When new entries are added, the CSV is added to src/data for the next app refresh.
• Conversion to JSON: Before running or building the app, the CSV is converted to JSON using the built-in utility (npm run convert). This JSON is what the app reads at runtime.
• Static site usage: The app renders food spot data directly from the JSON. No database is required, keeping the site fast and mobile-friendly.

Workflow Diagram 📑

flowchart TD
    style CSV fill:#fef3c7,stroke:#f59e0b,stroke-width:2px
    style Converter fill:#fce7f3,stroke:#ec4899,stroke-width:2px
    style JSON fill:#dbeafe,stroke:#3b82f6,stroke-width:2px
    style App fill:#d1fae5,stroke:#10b981,stroke-width:2px
    style Contributor1 fill:#fef2f2,stroke:#ef4444,stroke-width:2px
    style Contributor2 fill:#fef2f2,stroke:#ef4444,stroke-width:2px

    Contributor1["🐦 Contributor 1"] --> CSV["📂 Shared CSV File"]
    Contributor2["🐿️ Contributor 2"] --> CSV
    CSV --> Converter["✨ CSV-to-JSON Converter"]
    Converter --> JSON["📄 Generated JSON"]
    JSON --> App["💻 Local Bytes App"]

Built With 👩‍💻

• React
• Vite
• Bootstrap
• Fuse.js for fuzzy search
• CSV-to-JSON conversion utility
• Umami (privacy-friendly analytics)
• Cloudflare Web Analytics

Thanks & Acknowledgements 🤗

• Hamburger, GitHub, and Search icons by Icons8

Installation 💻

• Clone this repo to your local machine.
• Install dependencies: npm i (or npm install).
• Create file localbytes.csv inside src/data, using example.localbytes.csv as a reference to ensure correct headers and formatting.

Start the Development Server

• Run npm run dev.
• The development app will be served at http://localhost:5173.

Build the Production-Ready Application

• Run npm run build.
• Static pages ready for deployment will be generated inside the dist folder.

Start the Production Server

• Run npm run preview.
• The production app will be served at http://localhost:4173.