GDG Post - Social Post App

A minimalistic social web application for sharing photo and video moments from events.

Features

✅ Authentication

• Google OAuth sign-in (mock implementation)
• Persistent sessions with localStorage

✅ Timeline Feed

• Reverse chronological post display
• Infinite scroll with automatic loading
• Pull-to-refresh functionality
• Skeleton loading states

✅ Post Interactions

• Like posts with single tap or double-tap on images
• View full-screen gallery with swipe navigation
• Download and share posts
• Navigate to user profiles

✅ Media Upload

• Select up to 3 images or videos
• Client-side compression
• Real-time compression progress
• 160-character description limit
• File validation and error handling

✅ User Profiles

• View own profile with stats
• View other users' profiles
• Post grid layout (responsive)
• Delete own posts with confirmation
• Sign out functionality

✅ Full-Screen Gallery

• Swipe between multiple media items
• Video playback controls
• Like, download, and share actions
• Keyboard navigation (arrow keys, escape)

✅ Design

• Mobile-first responsive design
• Minimalistic hollow aesthetic
• Rounded borders throughout
• Consistent spacing and typography
• Smooth animations and transitions

Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Routing: React Router v6
• State Management: React Context API
• Styling: CSS Modules with CSS Variables
• Date Formatting: date-fns
• Backend: Firebase
  • Authentication: Firebase Auth (Google OAuth)
  • Database: Cloud Firestore
  • Storage: Firebase Storage
  • Hosting: Firebase Hosting (optional)

Getting Started

Prerequisites

• Node.js 18+ and npm
• Firebase account (free tier available)

Installation

cd gdg-post-app
npm install

Firebase Setup

Complete setup instructions: See FIREBASE_SETUP_GUIDE.md

Quick setup:

1. Create a Firebase project at console.firebase.google.com
2. Enable Google Authentication
3. Create Firestore Database
4. Create Storage bucket
5. Copy your Firebase config to .env file:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

Preview Production Build

npm run preview

Project Structure

gdg-post-app/
├── src/
│   ├── components/
│   │   ├── shared/          # Reusable UI components
│   │   ├── pages/           # Page components
│   │   ├── PostCard/        # Post card component
│   │   ├── UploadFlow/      # Upload interface
│   │   └── FullScreenGallery/ # Gallery viewer
│   ├── contexts/            # React Context providers
│   ├── services/            # Mock services (Auth, Post, Media)
│   ├── types/               # TypeScript interfaces
│   ├── App.tsx              # Main app with routing
│   └── index.css            # Global styles & design system
├── public/                  # Static assets
└── package.json

Design System

Colors

• Background: #FFFFFF
• Text Primary: #000000
• Text Secondary: #666666
• Border: #000000
• Accent: #FFD700

Spacing Scale

• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px
• 2xl: 48px

Border Radius

• Small: 8px (buttons)
• Medium: 16px (cards)
• Large: 24px (modals)

Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

Firebase Integration

The app is fully integrated with Firebase:

• AuthService: Real Google OAuth authentication via Firebase Auth
• PostService: Firestore database with pagination and CRUD operations
• MediaService: Firebase Storage for image/video uploads with compression
• Security: Firestore and Storage security rules configured

See FIREBASE_SETUP_GUIDE.md for complete setup instructions.

Future Enhancements

• Real-time updates with Firestore listeners
• User search and discovery
• Comments on posts
• Notifications with Firebase Cloud Messaging
• Dark mode
• Progressive Web App (PWA) features
• Image filters and editing
• Video trimming and editing

License

MIT