Project Structure

anidojo/
├── src/                    # Source code
├── public/                 # Static assets
├── .env.local             # Environment variables (not in git)
├── next.config.ts         # Next.js configuration
├── tailwind.config.js     # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
├── package.json           # Dependencies and scripts
└── README.md              # Project documentation

src/
├── app/                   # Next.js App Router pages
│   ├── anime/            # Anime-related pages
│   │   └── [id]/         # Dynamic anime detail pages
│   │       ├── page.tsx           # Anime detail page
│   │       └── review/            # Review pages
│   │           └── page.tsx       # Write/edit review
│   ├── auth/             # Authentication pages
│   │   └── page.tsx              # Auth page (deprecated)
│   ├── browse/           # Browse anime page
│   │   └── page.tsx
│   ├── dashboard/        # User dashboard
│   │   └── page.tsx
│   ├── discover/         # Discover new anime
│   │   └── page.tsx
│   ├── my-lists/         # User's custom lists
│   │   └── page.tsx
│   ├── my-reviews/       # User's reviews
│   │   └── page.tsx
│   ├── profile/          # User profile
│   │   └── page.tsx
│   ├── search/           # Global search
│   │   └── page.tsx
│   ├── settings/         # User settings
│   │   └── page.tsx
│   ├── signin/           # Sign in page
│   │   └── page.tsx
│   ├── signup/           # Sign up page
│   │   └── page.tsx
│   ├── upcoming/         # Upcoming anime
│   │   └── page.tsx
│   ├── layout.tsx        # Root layout (wraps all pages)
│   └── page.tsx          # Home page
│
├── components/            # Reusable React components
│   ├── AddAnimeModal.tsx         # Modal for adding anime to list
│   ├── AnimeSearch.tsx           # Anime search component
│   ├── AuthNavbar.tsx            # Navigation for auth pages
│   ├── GlobalSearch.tsx          # Global search overlay
│   ├── HeroBackground.tsx        # Hero section background
│   ├── Navbar.tsx                # Main navigation
│   ├── Providers.tsx             # Context providers wrapper
│   └── ThemeToggle.tsx           # Dark/light theme toggle
│
├── contexts/              # React Context providers
│   ├── AuthContext.tsx           # Authentication state
│   └── ThemeContext.tsx          # Theme state
│
├── hooks/                 # Custom React hooks
│   └── useAnime.ts               # Anime data fetching hook
│
├── lib/                   # Utility functions and services
│   ├── supabase/         # Supabase integration
│   │   ├── client.ts            # Browser client
│   │   ├── server.ts            # Server-side client
│   │   ├── middleware.ts        # Session middleware
│   │   ├── queries.ts           # Database queries
│   │   └── storage.ts           # File storage utilities
│   ├── animeApi.ts              # Jikan API integration
│   ├── migration.ts             # Database migration utilities
│   ├── mockData.ts              # Mock data for development
│   └── utils.ts                 # General utilities
│
├── types/                 # TypeScript type definitions
│   └── database.ts              # Database schema types
│
└── proxy.ts               # API proxy configuration

'use client'

import { useState } from 'react'
import { useAuth } from '@/contexts/AuthContext'

export function ComponentName() {
  const [state, setState] = useState()
  const { user } = useAuth()
  
  return <div>...</div>
}

// lib/supabase/queries.ts
export async function getUserAnimeList(userId: string) {
  const supabase = createClient()
  const { data, error } = await supabase
    .from('anime_entries')
    .select('*')
    .eq('user_id', userId)
    .order('updated_at', { ascending: false })
  
  if (error) throw error
  return data
}

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

// 1. React imports
import { useState, useEffect } from 'react'

// 2. Next.js imports
import Image from 'next/image'
import Link from 'next/link'

// 3. External libraries
import { Search, Heart } from 'lucide-react'

// 4. Internal imports (use @ alias)
import { useAuth } from '@/contexts/AuthContext'
import { Navbar } from '@/components/Navbar'
import { getAnimeById } from '@/lib/animeApi'
import type { Profile } from '@/types/database'

// 5. Relative imports
import './styles.css'

'use client' // If client component

// Imports
import { useState } from 'react'
import { useAuth } from '@/contexts/AuthContext'

// Types/Interfaces
interface Props {
  title: string
  onClose: () => void
}

// Component
export function ComponentName({ title, onClose }: Props) {
  // Hooks
  const { user } = useAuth()
  const [state, setState] = useState()
  
  // Event handlers
  const handleClick = () => {
    // ...
  }
  
  // Effects
  useEffect(() => {
    // ...
  }, [])
  
  // Render
  return (
    <div>
      {/* JSX */}
    </div>
  )
}

// lib/supabase/queries.ts

import { createClient } from './client'
import type { AnimeEntry } from '@/types/database'

/**
 * Get user's anime list
 * @param userId - User ID
 * @returns Array of anime entries
 */
export async function getUserAnimeList(userId: string): Promise<AnimeEntry[]> {
  const supabase = createClient()
  
  const { data, error } = await supabase
    .from('anime_entries')
    .select('*')
    .eq('user_id', userId)
    .order('updated_at', { ascending: false })
  
  if (error) {
    console.error('Error fetching anime list:', error)
    throw error
  }
  
  return data
}

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key