Project Gallery - Portfolio Showcase

A modern, full-stack portfolio showcase application built with React, TypeScript, and Firebase, featuring real-time visitor tracking and engagement metrics. This dynamic project gallery combines elegant UI design with live interaction capabilities, allowing visitors to engage with projects through likes and providing real-time analytics.

🌟 Key Features

Real-Time Analytics & Engagement 📊

• Live visitor counting with Firebase Realtime Database
• Real-time like system with instant updates
• Project engagement tracking and statistics
• Analytics dashboard for visitor metrics

Interactive Project Gallery 🖼️

• Responsive grid layout with dynamic filtering
• Advanced image lightbox with zoom capabilities
• Smooth animations and transitions
• Category-based project filtering

Full-Stack Integration 🔥

Firebase Backend Integration

• Real-time data synchronization
• Visitor tracking system
• Like/reaction management
• Scalable data structure

Frontend Performance Optimization

• Efficient state management
• Lazy loading for images
• Optimized database queries

🛠️ Technology Stack

Frontend

• React 18
• TypeScript
• Vite (Build tool)
• Framer Motion (Animations)
• Tailwind CSS
• shadcn/ui components

Backend & Real-Time Features ⭐

Firebase Suite

• Realtime Database
  • Live visitor tracking
  • Real-time like system
  • Project engagement metrics
• Firebase Hosting
• Firebase Authentication (for admin features)
• Firebase Analytics

State Management

• React Hooks
• Custom hooks for Firebase integration
• Real-time data synchronization
• Custom hooks for analytics and scrolling
• Type-safe data handling with TypeScript

🏗️ Project Structure

src/
├── assets/
│   ├── images/
│   │   └── [Image assets]
│   └── projects/
│       └── [Project images]
├── components/
│   ├── header/
│   │   ├── LikeCounter.tsx
│   │   └── Logo.tsx
│   ├── layout/
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   └── Layout.tsx
│   ├── loading/
│   │   ├── ProjectCardSkeleton.tsx
│   │   ├── ProjectDetailsSkeleton.tsx
│   │   └── ProjectSkeleton.tsx
│   ├── project-header/
│   │   ├── HeroSection.tsx
│   │   ├── ProjectHeader.tsx
│   │   └── VisitorCounter.tsx
│   ├── projects/
│   │   ├── ImageLightBox.tsx
│   │   ├── ImageThumbnailStrip.tsx
│   │   ├── ProjectCard.tsx
│   │   ├── ProjectGallary.tsx
│   │   ├── ProjectList.tsx
│   │   └── ProjectModal.tsx
│   └── stats/
│       ├── LikeCounter.tsx
│       └── StatsSection.tsx
├── config/
│   └── firebase.ts
├── constants/
│   └── technologies.ts
├── data/
│   ├── constants.ts
│   └── projects.ts
├── hooks/
│   ├── useScrollEffect.tsx
│   └── userVisitorCount.tsx
├── pages/
│   ├── api/
│   ├── Home.tsx
│   └── ProjectDetails.tsx
├── services/
│   ├── LikeService.ts
│   └── VisitorService.ts
├── styles/
│   └── index.css
├── types/
│   ├── images.d.ts
│   └── project.ts
└── utils/
    └── utils.ts

🚀 Getting Started

1. Clone the repository

git clone https://github.com/yourusername/project-gallery.git
cd project-gallery

2. Install dependencies

npm install

3. Set up environment variables
   Create a .env file in the root directory and add your Firebase configuration:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_DATABASE_URL=your_database_url

4. Start the development server

npm run dev

5. Build for production

npm run build

🎯 Core Functionalities

Project Display

• Grid layout with project cards
• Smooth hover effects and transitions
• Project filtering by category

Analytics Features

• Visitor counting system
• Like/reaction functionality
• Project engagement tracking

Image Gallery

• Smooth image carousel
• Lightbox with zoom functionality
• Touch gesture support
• Dynamic scroll indicator

Project Details

• Detailed project information display
• Technology stack badges
• Interactive image gallery
• Project links (GitHub, Demo)

🔧 Key Components

• ImageLightBox: Advanced image viewer with zoom and navigation
• ProjectGallary: Main project display component
• VisitorCounter: Tracks and displays visitor statistics
• LikeCounter: Handles project likes and reactions
• ProjectHeader: Displays project details and metadata
• Layout: Main layout component with header and footer

📱 Responsive Design

• Mobile-first approach
• Adaptive layouts
• Touch-friendly interactions

🚀 Deployment

The application is configured for deployment on:

• Firebase Hosting (primary hosting)
• GitHub Pages
• Netlify