AnimeStore - Modern Ecommerce Website

A beautiful, modern ecommerce website built with React, Vite, TypeScript, Tailwind CSS, and GSAP. Features anime-themed products with a sleek dark mode design and smooth animations.

🚀 Features

• Modern Tech Stack: React 19, Vite, TypeScript, Tailwind CSS, GSAP
• Dark Mode: Default dark theme with light/dark toggle
• Anime Products: Curated collection of anime merchandise including figures, manga, apparel, and collectibles
• Shopping Cart: Persistent cart functionality with local storage
• Wishlist: Save favorite products for later
• Product Search & Filtering: Advanced filtering by categories, price, rating, and more
• Responsive Design: Mobile-first approach with beautiful layouts
• Smooth Animations: GSAP-powered animations and transitions
• Bento Grid Layout: Featured products in an attractive grid layout

🛠️ Technologies

• Frontend: React 19, TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Animations: GSAP with ScrollTrigger
• State Management: Zustand
• Routing: React Router
• Icons: Lucide React
• Payment: Stripe (demo integration)

📦 Installation

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser and navigate to http://localhost:5173

🎨 Design Features

• Bento Grid: Homepage features a Pinterest-style bento grid for featured products
• Dark Mode: Beautiful dark theme as default with seamless toggle
• Anime Aesthetic: Clean, modern design inspired by Japanese aesthetics
• Smooth Animations: GSAP-powered animations for enhanced user experience
• Mobile Responsive: Looks great on all device sizes

🛒 Ecommerce Features

• Product Catalog: Browse anime figures, manga, apparel, and more
• Advanced Filtering: Filter by categories, price range, ratings, stock status
• Shopping Cart: Add/remove items, update quantities, persistent storage
• Wishlist: Save products for later
• Checkout Process: Demo checkout with Stripe integration
• Product Reviews: Display ratings and customer reviews

🎯 Categories

• Figures & Collectibles: Scale figures, Nendoroids, Figmas, Prize figures
• Manga & Light Novels: Latest volumes and art books
• Apparel & Accessories: T-shirts, hoodies, accessories, cosplay
• Gaming & Electronics: Gaming gear, phone cases, keychains
• Home & Lifestyle: Posters, mugs, pillows, stickers

🚀 Deployment

The project is ready for deployment on platforms like Vercel, Netlify, or any static hosting service.

Build for Production

npm run build

Production Hardening

• Security headers are set in vercel.json (X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy).
• API CORS is origin-restricted in api/_lib/razorpay.ts — update the allowlist if your domain changes.
• HTML caching is disabled; static assets under /assets are immutable.
• Add environment variables in Vercel Project Settings:
  • RAZORPAY_KEY_ID
  • RAZORPAY_KEY_SECRET
  • RAZORPAY_WEBHOOK_SECRET

SEO

• index.html includes canonical URL, OpenGraph/Twitter tags, and JSON‑LD for the site.
• public/robots.txt and public/sitemap.xml are provided. Update sitemap as routes evolve.

Performance

Authentication (Google OAuth)

This project includes a secure Google Sign-In flow handled on the server:

• Endpoints: /api/auth/google/start (begin OAuth), /api/auth/google/callback (handle redirect), /api/auth/me, /api/auth/logout.
• Session: httpOnly Secure cookie with a signed JWT (see api/_lib/session.ts).
• Frontend: the login page redirects to Google via the start endpoint.

Environment variables (see .env.example):

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET
• GOOGLE_REDIRECT_URI (e.g., https://aapex.vercel.app/api/auth/google/callback)
• SESSION_SECRET (a long random string for JWT signing)
• PUBLIC_URL (base site URL; used as default redirect base)

Setup:

1. Create OAuth credentials in Google Cloud Console (OAuth consent screen + Web credentials).
2. Add Authorized redirect URI: https://aapex.vercel.app/api/auth/google/callback (plus localhost for dev).
3. Set the variables above in Vercel Project Settings → Environment Variables.
4. Deploy; the “Continue with Google” button redirects through server to Google.

Security:

• Client secret is never sent to the browser; token exchanges happen only on the server.

• Session cookie is httpOnly, Secure, SameSite=Lax with 24h expiry.

• CSP and CORS are configured in vercel.json and api/_lib/razorpay.ts.

• Route-based code splitting via React.lazy in src/App.tsx.

• Image tags in listings use loading="lazy" and explicit dimensions to reduce CLS.

Built with ❤️ for the anime community