Sleepless in Seattle 🏙️

A comprehensive web application that helps users discover, explore, and plan exciting activities in the Seattle area. Built with React and Firebase, this platform addresses the common challenge of finding new adventures by providing a user-friendly interface for discovering Seattle's diverse offerings.

🚀 Live Demo

Visit the live application: https://seattlehangoutguide.web.app/

✨ Features

🔍 Activity Discovery

• Comprehensive Database: Browse a curated collection of Seattle activities including attractions, restaurants, outdoor activities, and cultural experiences
• Smart Search: Find activities using the search bar with real-time filtering
• Category Filtering: Explore activities by categories like:
  • Family-Friendly Activities
  • Outdoor Activities
  • Foodie Delights
  • Historic/Cultural
  • Best Scenic Spots
  • Local Markets

📋 Itinerary Planning

• Custom Itinerary Builder: Create personalized trip plans by adding activities
• User Authentication: Secure sign-in functionality using Firebase Authentication
• Saved Itineraries: Store and access your planned activities across sessions
• Activity Details: View comprehensive information including:
  • Descriptions and images
  • Location details
  • Operating hours
  • Cost information

🎨 User Experience

• Responsive Design: Mobile-friendly interface built with Bootstrap and Material-UI
• Trending Spots: Discover popular activities and hidden gems
• Visual Gallery: Rich image gallery for each activity
• Interactive Navigation: Smooth routing between pages

🛠️ Technology Stack

• Frontend: React 18.2.0
• Styling: Bootstrap 5.3.3, Material-UI (@mui/material)
• Backend: Firebase (Authentication & Realtime Database)
• Routing: React Router DOM 6.22.3
• Deployment: Firebase Hosting

🏗️ Project Structure

sleepless-seattle/
├── public/                 # Static assets and HTML template
├── src/
│   ├── components/        # React components
│   │   ├── Indexhome.js  # Main homepage
│   │   ├── NavBar.js     # Navigation component
│   │   ├── SearchBar.js  # Search functionality
│   │   ├── Categories.js # Category filtering
│   │   ├── BoxList.js    # Activity listings
│   │   ├── FinalFinalItinerary.js # Itinerary display
│   │   └── ...           # Additional components
│   ├── data/             # Activity data and configuration
│   │   ├── activities.json
│   │   ├── subcat.json
│   │   └── ...
│   ├── App.js            # Main app component and routing
│   └── index.js          # App entry point and Firebase config
├── package.json          # Dependencies and scripts
└── firebase.json         # Firebase hosting configuration

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone [repository-url]
cd sleepless-seattle

2. Install dependencies

npm install

3. Start the development server

npm start

4. Open http://localhost:3000 to view in browser

Available Scripts

• npm start - Runs the app in development mode
• npm run build - Builds the app for production
• npm test - Launches the test runner
• npm run eject - Ejects from Create React App

🔥 Firebase Configuration

The app uses Firebase for:

• Authentication: User sign-in/sign-up
• Realtime Database: Storing user itineraries
• Hosting: Production deployment

Firebase configuration is located in src/index.js.

🎯 Target Users

• Seattle Residents: Looking to explore their city in new ways
• Tourists: Seeking authentic Seattle experiences
• Students: Wanting to discover hidden gems and affordable activities
• Trip Planners: Anyone organizing visits to the Seattle area

🤝 Contributing

This project was developed as part of a group effort. The codebase includes collaborative elements and is structured for team development.

📱 Responsive Design

The application is fully responsive and optimized for:

• Desktop browsers
• Tablets
• Mobile devices

Built with Bootstrap and custom CSS for a seamless experience across all screen sizes.