Anime Gallery & Cart Application

A modern React-based anime gallery application with cart functionality, user authentication, and download management.

Features

🎨 Core Features

• Anime Gallery: Browse and view anime cards with beautiful animations
• Shopping Cart: Add anime images to your cart for later download
• Image Download: Download your favorite anime images
• User Authentication: Firebase email link authentication
• Responsive Design: Fully responsive UI with Tailwind CSS
• Smooth Animations: Powered by Framer Motion and GSAP

🔐 Download System

• First Download Free: Users can download one image without logging in
• Login Required: Subsequent downloads require user authentication
• Auto-redirect: After login, users are automatically redirected back to complete their download

Tech Stack

• Frontend Framework: React 18 with TypeScript
• Routing: React Router DOM
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• Animations:
  • Framer Motion
  • GSAP with ScrollTrigger
• Authentication: Firebase Auth (Email Link)
• Build Tool: Vite

Project Structure

src/
├── app/
│   └── hooks.ts              # Redux hooks
├── components/
│   └── LoginCard.tsx         # Login modal component
├── features/
│   └── cart/
│       └── cartSlice.ts      # Cart state management
├── pages/
│   ├── Intro.tsx             # Landing page
│   ├── HomePage.tsx          # Main home page
│   ├── Cart.tsx              # Cart page with download functionality
│   ├── AnimeGallery.tsx      # Gallery view
│   └── Layout.tsx            # App layout wrapper
├── utils/
├── firebase.ts               # Firebase configuration
└── App.tsx                   # Main app component

Installation

1. Clone the repository:

git clone <repository-url>
cd <project-name>

2. Install dependencies:

npm install

3. Set up Firebase:

   • Create a Firebase project at Firebase Console
   • Enable Email/Password authentication
   • Copy your Firebase config to src/firebase.ts

4. Start the development server:

npm run dev

Usage

Adding Items to Cart

1. Navigate to the anime gallery
2. Click on an anime card to add it to your cart
3. View your cart by clicking the cart icon

Downloading Images

1. Go to your cart
2. Click the "Download" button on any image
3. First download: Image downloads immediately
4. Second download: Login modal appears
5. Complete login via email link
6. Download proceeds automatically after login

Authentication Flow

1. Click login when prompted
2. Enter your email address
3. Check your email for the magic link
4. Click the link to complete authentication
5. You'll be redirected back to complete your action

Key Components

Cart.tsx

Manages the shopping cart with the following features:

• Display cart items
• Remove items from cart
• Download images with authentication check
• Persist download state using localStorage
• Handle post-login redirects

App.tsx

Main application component that:

• Handles Firebase email link authentication
• Manages routing
• Processes redirect parameters after login

Environment Variables

Create a .env file in the root directory:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Scripts

# Development
npm run dev

# Build
npm run build

# Preview production build
npm run preview

# Lint
npm run lint

How Download Restriction Works

The application uses localStorage to track if a user has downloaded an image:

1. First Download:

   • No authentication required
   • Sets hasDownloadedOnce flag in localStorage
   • Image downloads immediately

2. Subsequent Downloads:

   • Checks for hasDownloadedOnce flag
   • If flag exists and user is not authenticated → shows login
   • After login → redirects back with download parameters
   • Download proceeds automatically

Future Enhancements

• Add favorites functionality
• Implement image sharing
• Add user profile page
• Include download history
• Add image categories and filters
• Implement search functionality

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Acknowledgments

• Anime artwork from various sources
• Firebase for authentication
• Framer Motion for smooth animations
• Tailwind CSS for styling