Event Dashboard

A modern event management dashboard built with React, Firebase, and Google Gemini AI. This application allows users to create, manage, and track events with AI-powered description generation.

Features

• User authentication (Sign up/Login) with Firebase Auth
• Create, read, update, and delete events
• AI-powered event description generation using Google Gemini
• Real-time database synchronization with Firebase Realtime Database
• Protected routes for authenticated users
• Responsive UI with React Icons
• Modern routing with React Router v7

Tech Stack

• Frontend: React 19 with Vite
• Authentication: Firebase Authentication
• Database: Firebase Realtime Database
• AI Integration: Google Gemini AI (gemini-2.0-flash-lite)
• Routing: React Router DOM v7
• Icons: React Icons
• Build Tool: Vite 7

Project Structure

event-dashboard/
├── public/
├── src/
│   ├── assets/          # Static assets (images, etc.)
│   ├── components/      # Reusable React components
│   │   ├── EventCard.jsx
│   │   ├── Navbar.jsx
│   │   └── ProtectedRoute.jsx
│   ├── config/          # Configuration files
│   │   ├── firebase.js  # Firebase configuration
│   │   └── gemini.js    # Gemini AI configuration
│   ├── context/         # React context providers
│   │   └── AuthContext.jsx
│   ├── pages/           # Page components
│   │   ├── CreateEvent.jsx
│   │   ├── EditEvent.jsx
│   │   ├── EventDetails.jsx
│   │   ├── EventList.jsx
│   │   ├── Login.jsx
│   │   └── SignUp.jsx
│   ├── App.jsx          # Main app component
│   ├── App.css          # App styles
│   ├── main.jsx         # Entry point
│   └── index.css        # Global styles
├── .env                 # Environment variables (not in git)
├── .gitignore
├── package.json
├── vite.config.js
└── README.md

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn package manager
• A Firebase account
• A Google AI Studio account (for Gemini API)

Setup Guide

1. Clone the Repository

git clone <your-repository-url>
cd event-dashboard

2. Install Dependencies

npm install

3. Firebase Setup

Create a Firebase Project

1. Go to Firebase Console
2. Click "Add project" and follow the setup wizard
3. Once created, click on "Web" icon to add a web app
4. Register your app with a nickname (e.g., "Event Dashboard")
5. Copy the Firebase configuration object

Enable Firebase Authentication

1. In Firebase Console, go to Authentication > Sign-in method
2. Enable Email/Password authentication
3. Click Save

Setup Firebase Realtime Database

1. In Firebase Console, go to Realtime Database
2. Click Create Database
3. Choose a location (e.g., asia-southeast1)
4. Start in Test mode (or set up security rules as needed)
5. Copy the database URL (e.g., https://your-project-id-default-rtdb.asia-southeast1.firebasedatabase.app)

Firebase Security Rules (Optional but Recommended)

For production, update your Realtime Database rules:

{
  "rules": {
    "events": {
      ".read": "auth != null",
      ".write": "auth != null",
      "$eventId": {
        ".validate": "newData.hasChildren(['title', 'date', 'location', 'description', 'userId'])"
      }
    }
  }
}

4. Google Gemini AI Setup

1. Go to Google AI Studio
2. Sign in with your Google account
3. Click Get API Key or Create API Key
4. Copy the generated API key

5. Environment Variables Configuration

Create a .env file in the root directory of the project:

touch .env

Add the following environment variables to your .env file:

# Firebase Configuration
VITE_FIREBASE_API_KEY=your_firebase_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
VITE_FIREBASE_DATABASE_URL=https://your-project-id-default-rtdb.region.firebasedatabase.app
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project-id.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

# Gemini AI Configuration
VITE_GEMINI_API_KEY=your_gemini_api_key_here

Where to Find Each Value

• VITE_FIREBASE_API_KEY: From Firebase project settings > General > Your apps > SDK setup and configuration
• VITE_FIREBASE_AUTH_DOMAIN: From Firebase config object (usually your-project-id.firebaseapp.com)
• VITE_FIREBASE_DATABASE_URL: From Firebase Realtime Database section (the database URL)
• VITE_FIREBASE_PROJECT_ID: From Firebase project settings > General
• VITE_FIREBASE_STORAGE_BUCKET: From Firebase config object
• VITE_FIREBASE_MESSAGING_SENDER_ID: From Firebase config object
• VITE_FIREBASE_APP_ID: From Firebase config object
• VITE_GEMINI_API_KEY: From Google AI Studio (generated API key)

Important: Never commit your .env file to version control. It's already included in .gitignore.

Available Scripts

Development Mode

Start the development server with hot module replacement:

npm run dev

The application will be available at http://localhost:5173

Build for Production

Create an optimized production build:

npm run build

The build output will be in the dist/ folder.

Preview Production Build

Preview the production build locally:

npm run preview

Linting

Run ESLint to check for code quality issues:

npm run lint

Usage

First Time Setup

1. Start the development server: npm run dev
2. Navigate to http://localhost:5173
3. Click Sign Up to create a new account
4. Enter your email and password
5. Once logged in, you'll be redirected to the Event List page

Creating an Event

1. Click Create Event in the navigation bar
2. Fill in the event details:
   • Title
   • Date
   • Location
   • Additional information (optional)
3. Click Generate Description with AI to auto-generate a compelling description using Gemini AI
4. Review and edit the description if needed
5. Click Create Event to save

Managing Events

• View Events: All events are displayed on the home page
• View Details: Click on an event card to see full details
• Edit Event: Click the edit button on an event card
• Delete Event: Click the delete button on an event card

Dependencies

Main Dependencies

• react (^19.1.1) - UI library
• react-dom (^19.1.1) - React DOM rendering
• react-router-dom (^7.9.4) - Routing
• firebase (^12.4.0) - Backend services
• @google/generative-ai (^0.24.1) - Gemini AI integration
• react-icons (^5.5.0) - Icon library

Dev Dependencies

• vite (^7.1.7) - Build tool
• @vitejs/plugin-react (^5.0.4) - React plugin for Vite
• eslint (^9.36.0) - Linting

Troubleshooting

Firebase Connection Issues

• Verify all Firebase environment variables are correct
• Check Firebase Console to ensure Authentication and Realtime Database are enabled
• Verify database security rules allow read/write access

Gemini AI Not Working

• Verify your VITE_GEMINI_API_KEY is correct
• Check the browser console for specific error messages
• Ensure you have API quota remaining in Google AI Studio

Build Errors

• Delete node_modules and package-lock.json, then run npm install again
• Clear Vite cache: rm -rf node_modules/.vite
• Ensure you're using Node.js v16 or higher

License

This project is open source and available under the MIT License.

Contributing

Contributions, issues, and feature requests are welcome!

Support

For support, please open an issue in the repository.