🎬 FrameVault

FrameVault is a sophisticated full-stack e-commerce platform built for cinema enthusiasts.
It provides a seamless experience for browsing, selecting, and purchasing premium film-related media such as posters and digital content.

Built with a robust Node.js + Express backend and a high-performance React + TypeScript frontend, the platform emphasizes secure authentication, real-time data integration, and responsive design.

🔗 Live Demo: http://frame-vault-old.vercel.app/

---

🏗️ Architecture Overview

FrameVault follows a Clean Architecture pattern, ensuring clear separation between presentation, business logic, and data layers.

---

🌐 Frontend (Presentation Layer)

• Framework: React 18 + Vite
• Language: TypeScript
• State Management: Context API (Auth + Cart)
• Styling: Tailwind CSS
• Animations: Framer Motion

🔗 Integrations

• TMDB API → Dynamic movie catalog
• Stripe & PayPal → Secure payment processing

---

🖥️ Backend (Infrastructure & Data Layer)

• Runtime: Node.js + Express
• Database: MongoDB with Mongoose
• Authentication: JWT + Google OAuth (Passport.js)
• Cloud Storage: Cloudinary
• Security: Bcrypt, CORS, Cookie Parser

---

✨ Key Features

• 🔐 Secure Authentication (JWT + Google OAuth)
• 🎬 Dynamic Film Catalog (TMDB integration)
• 🛒 Persistent Cart System
• 📦 Order Tracking & History
• 💳 Multi-Gateway Payments (Stripe + PayPal)
• ☁️ Cloud Media Management (Cloudinary)

---

🛠️ Tech Stack

Layer	Technologies
Frontend	React, TypeScript, Vite, Tailwind CSS, Framer Motion
Backend	Node.js, Express, Passport.js, JWT, Bcrypt
Database	MongoDB, Mongoose
DevOps & Tools	Vercel, ESLint, Prettier, Nodemon

---

🚀 Local Setup & Installation

📌 Prerequisites

• Node.js (v18+)
• MongoDB (Local or Atlas)
• API Keys:
  • TMDB
  • Cloudinary
  • Google OAuth
  • Stripe / PayPal

---

1️⃣ Clone Repository

git clone https://github.com/rishabh1230/FrameVault.git
cd FrameVault

2️⃣ Backend Setup

cd server
npm install

Create a .env file inside /server:

MONGODB_URI=your_mongodb_uri
PORT=8000
ACCESS_TOKEN_SECRET=your_secret
REFRESH_TOKEN_SECRET=your_secret

CLOUDINARY_CLOUD_NAME=your_name
CLOUDINARY_API_KEY=your_key
CLOUDINARY_API_SECRET=your_secret

GOOGLE_CLIENT_ID=your_google_id
GOOGLE_CLIENT_SECRET=your_google_secret

3️⃣ Frontend Setup

cd ../client
npm install

▶️ Run the Application

Start Backend

cd server
npm run dev

Start Frontend

cd client
npm run dev

📁 Project Structure

FrameVault/
├── client/
│   ├── src/
│   │   ├── components/   # Reusable UI components
│   │   ├── context/      # Auth & Cart providers
│   │   ├── pages/        # App screens
│   │   └── api/          # API & TMDB logic
│
├── server/
│   ├── src/
│   │   ├── controllers/  # Business logic
│   │   ├── models/       # Database schemas
│   │   ├── routes/       # API routes
│   │   └── middlewares/  # Auth & utilities
│
└── README.md

🧠 Key Learnings

Designing scalable full-stack architectures Implementing secure authentication systems Integrating third-party APIs (TMDB, Stripe, OAuth) Managing cloud-based media efficiently Building production-ready APIs

📬 Contact

GitHub: https://github.com/rishabh1230

LinkedIn: https://www.linkedin.com/in/rishabhpandey30/

⭐ Support If you found this project useful, consider giving it a ⭐ on GitHub!

---