Skip to main content

​
Quick Start Guide

Get Reseñas Gastronómicas running on your local machine in just a few minutes. This guide will walk you through the essential steps to start tracking your culinary adventures.
This quick start guide assumes you have basic familiarity with the command line and Node.js. For more detailed instructions, see the Installation Guide.

​
Prerequisites

Before you begin, make sure you have:
  • Node.js (version 14 or higher)
  • npm (comes with Node.js)
  • A Firebase account (free tier works perfectly)
  • A modern web browser
1
Clone or Download the Repository
2
Get the source code on your local machine:
3
# If using git
git clone <your-repository-url>
cd resenas-gastronomicas

# Or download and extract the ZIP file
4
Install Dependencies
5
Install the required npm packages:
6
npm install
7
This will install:
8
  • dotenv - For environment variable management
    • 9
    The application uses minimal dependencies and relies primarily on CDN-delivered libraries (Firebase, Tailwind CSS, Font Awesome) for a lighter footprint.
    10
    Set Up Firebase
    11
    Create and configure your Firebase project:
    12
  • Go to Firebase Console
  • Click Add Project and follow the setup wizard
  • Once created, click the Web icon (</>) to add a web app
  • Register your app with a nickname (e.g., “Reseñas Gastronómicas”)
  • Copy the Firebase configuration object
    • 13
    Configure Firebase Credentials
    14
    Create a Firebase configuration file:
    15
    mkdir -p src/js/data
    16
    Create src/js/data/firebase-config.js with your Firebase credentials:
    17
    // src/js/data/firebase-config.js
export const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};
    18
    Replace the placeholder values with your actual Firebase configuration. Keep this file secure and never commit it to public repositories.
    19
    Enable Firestore Database
    20
    In the Firebase Console:
    21
  • Navigate to Firestore Database in the left sidebar
  • Click Create Database
  • Choose Start in test mode (for development)
  • Select a location for your database
  • Click Enable
    • 22
    Test mode allows unrestricted read/write access. For production, you’ll want to configure proper security rules.
    23
    Start the Development Server
    24
    If you have a dev server configured:
    25
    npm run dev
    26
    Or use any static file server:
    27
    # Using Python
python -m http.server 8000

# Using Node.js http-server
npx http-server -p 8000

# Using PHP
php -S localhost:8000
    28
    Open the Application
    29
    Navigate to the application in your browser:
    30
    http://localhost:8000/public/
    31
    You should see the Reseñas Gastronómicas interface with the header:
    32
    “Reseñas Gastronómicas - Las aventuras culinarias de Gian & Yami”

    ​
    Verify Your Setup

    Once the app loads, verify everything is working:
    1
    Check Firebase Connection
    2
    Open your browser’s developer console (F12). You should see:
    3
  • No Firebase connection errors
  • The app initializing successfully
  • Firebase SDK loading messages
    • 4
    Add Your First Review
    5
  • Click the “Agregar Nueva Reseña” button
  • Fill in the form:
    • Restaurant name: “El Emperador”
    • Dish name: “Pizza Margherita”
    • Photo URL: Use any image URL or leave blank
    • Enable both Gian and Yami reviewers
    • Add ratings and reviews for each
  • Click “Guardar Reseña”
    • 6
    Verify Real-Time Sync
    7
  • Open the Firebase Console
  • Go to Firestore Database
  • You should see a reviews collection with your new review
  • Try editing the review in Firebase - it should update in the app instantly!

    • ​
    Understanding the Interface

    The main interface consists of several key areas: Displays the application title and tagline: 
    Reseñas Gastronómicas
Las aventuras culinarias de Gian & Yami

    ​
    Search & Filter Panel

    • Search bar: Find reviews by restaurant, dish, or content
    • Restaurant filters: Quick filter buttons for each restaurant
    • “Todos” button: Show all reviews

    ​
    Reviews Grid

    Displays review cards in a responsive grid (1-3 columns depending on screen size). Each card shows:
    • Dish photo
    • Restaurant and dish name
    • Combined rating
    • Visit date
    • Quick view of reviewers

    ​
    Statistics Sidebar

    Shows:
    • Total reviews and average rating
    • Best rated dish
    • Worst rated dish
    • Featured dish of the month

    ​
    Basic Usage

    ​
    Adding a Review

    // The form collects this data structure:
{
  restaurant: "Restaurant Name",
  dish: "Dish Name",
  photo: "https://image-url.com/photo.jpg",
  date: "05/03/2026",
  reviewers: {
    gian: {
      rating: 9,
      review: "Your review text"
    },
    yami: {
      rating: 8,
      review: "Your review text"
    }
  }
}

    ​
    Searching Reviews

    The search functionality looks through:
    • Restaurant names
    • Dish names
    • Review text from both reviewers
    // From src/js/modules/datastore.js:79
searchReviews(query) {
  const searchTerm = query.toLowerCase();
  return this.reviews.filter(review =>
    review.restaurant.toLowerCase().includes(searchTerm) ||
    review.dish.toLowerCase().includes(searchTerm) ||
    Object.values(review.reviewers).some(reviewer =>
      reviewer.review.toLowerCase().includes(searchTerm)
    )
  );
}

    ​
    Filtering by Restaurant

    Click any restaurant filter button to show only reviews from that restaurant. The “Todos” button shows all reviews.

    ​
    Troubleshooting

    Possible causes:
    • Firebase configuration is incorrect
    • Firestore database not enabled
    • Browser blocking third-party cookies
    • Network connectivity issues
    Solutions:
    1. Check browser console for Firebase errors
    2. Verify your firebase-config.js credentials
    3. Ensure Firestore is enabled in Firebase Console
    4. Check that test mode rules are active
    Possible causes:
    • Firebase SDK not loading from CDN
    • JavaScript errors preventing initialization
    • Missing firebase-config.js file
    Solutions:
    1. Check browser console for errors
    2. Verify internet connection (CDN access)
    3. Ensure src/js/data/firebase-config.js exists
    4. Clear browser cache and reload
    Possible causes:
    • JavaScript not fully loaded
    • Event listeners not initialized
    Solutions:
    1. Wait for page to fully load
    2. Check console for JavaScript errors
    3. Refresh the page

    ​
    Next Steps

    Now that you have the application running:

    Detailed Installation

    Learn about advanced configuration options and production setup

    Customization

    Customize colors, styles, and functionality to match your preferences

    Firebase Security

    Set up production-ready Firestore security rules

    Deployment

    Deploy your app to Firebase Hosting or other platforms
    Start by adding 5-10 reviews of your favorite restaurants to get a feel for the app’s statistics and filtering features!

    ​
    Getting Help

    If you encounter issues:
    1. Check the browser console for errors
    2. Verify all setup steps were completed
    3. Review the Installation Guide for detailed information
    4. Check Firebase Console for connectivity and quota issues
    ¡Buen provecho! Happy reviewing! 🍽️

    Build docs developers (and LLMs) love

    Get started for freeTalk to us