FrameShift 🎨

A modern, highly interactive web application for sharing, curating, and discovering digital posters and visual art. Built with React, TypeScript, Vite, and Firebase.

✨ Features

• Secure Authentication: Google Sign-In powered by Firebase Auth.
• Interactive Uploads: Upload posters, create stories, and edit images with custom layouts (full, frame, split).
• Dynamic Profiles: Manage your uploaded posters, curate custom collections, and track your likes.
• Fluid Animations: High-performance, buttery-smooth UI transitions using Framer Motion and GSAP.
• Real-time Database: Instant updates for likes, messages, and feed content using Cloud Firestore.
• Fully Responsive: Optimized for both desktop and mobile viewing experiences.

🛠️ Tech Stack

• Frontend: React 19, TypeScript, Vite
• Styling: Tailwind CSS, clsx, tailwind-merge
• Animations: Framer Motion, GSAP
• Backend/BaaS: Firebase (Authentication, Firestore Database, Cloud Storage)
• Icons: Lucide React
• Routing: React Router v7

🚀 Local Development Setup

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn
• A Firebase Project

1. Clone the repository

git clone https://github.com/demon2202/FrameShift.git
cd FrameShift

2. Install dependencies

npm install

3. Environment Variables

Create a .env file in the root directory of the project and add your Firebase configuration keys:

VITE_FIREBASE_API_KEY=your_api_key_hereVITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.comVITE_FIREBASE_PROJECT_ID=your_project_idVITE_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.appVITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_idVITE_FIREBASE_APP_ID=your_app_idVITE_FIREBASE_MEASUREMENT_ID=your_measurement_idVITE_FIRESTORE_DATABASE_ID=your_database_id

4. Start the development server

npm run dev

The app will be running at http://localhost:5173 (or http://localhost:3000).

Note: Make sure to add localhost or 127.0.0.1 to your Firebase Authentication Authorized Domains settings to allow local logins.

🌍 Deployment (Vercel)

This project is optimized for deployment on Vercel.

1. Push your code to GitHub.
2. Import the repository into Vercel.
3. In the Vercel project settings, go to Environment Variables and add all the VITE_FIREBASE_* keys from your .env file.
4. Deploy the project.
5. Crucial: Copy your new Vercel domain (e.g., frameshift.vercel.app) and add it to your Authorized Domains in the Firebase Authentication console.

Note: The repository includes a vercel.json file to ensure React Router handles client-side routing correctly without throwing 404 errors on page refresh.

📜 Scripts

• npm run dev - Starts the local development server.
• npm run build - Compiles TypeScript and builds the app for production.
• npm run lint - Runs ESLint to check for code quality issues.
• npm run preview - Previews the production build locally.

📄 License

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