Poster 🎨

The frontend for Poster is a modern, high-performance web application built with React and Vite. It leverages Tailwind CSS and Shadcn UI for a premium, responsive user experience.

🛠️ Tech Stack

• Core: React 18, Vite
• Styling: Tailwind CSS, Shadcn UI
• Icons: Lucide React, React Icons
• Authentication: Firebase Auth (Google Provider)
• Media: ImageKit React SDK
• Routing: React Router 7
• Notifications: Sonner

🌟 Features

1. Authentication Flow

• Google Login/Signup: Integrated with Firebase for secure, one-click access.
• Protected Routes: Custom PrivateRoute component to secure sensitive pages (e.g., Create Post, Messages).
• Redirection: Automatically saves the user's intended destination and redirects back after authentication.

2. Post Management

• Creative Suite: Rich post creation with image support.
• Sharing: Integrated sharing logic for copying links and external platform sharing.
• Engagement: Interactive components for likes, comments, and views.

3. Media Integration

• ImageKit: High-performance image uploads and optimized delivery.
• Previews: Real-time image previews during post creation and profile updates.

🚀 Getting Started

Installation

npm install

Development

npm run dev

Build

npm run build

🔑 Environment Variables

Required variables in .env:

• VITE_apiKey: Firebase API Key
• VITE_authDomain: Firebase Auth Domain
• VITE_projectId: Firebase Project ID
• VITE_storageBucket: Firebase Storage Bucket
• VITE_messagingSenderId: Firebase Messaging Sender ID
• VITE_appId: Firebase App ID
• VITE_API_URL: Backend API URL (e.g., http://localhost:3000)
• VITE_IMAGEKIT_PUBLIC_KEY: ImageKit Public Key
• VITE_IMAGEKIT_URL_ENDPOINT: ImageKit URL Endpoint

📂 Architecture

• /src/components: Reusable UI components and feature-specific blocks.
• /src/page: Main application views/pages.
• /src/Provider: Context providers for global state (Auth).
• /src/Router: Routing configuration and protection logic.
• /src/Firebase: Firebase initialization.

---

Part of the Poster ecosystem.