A lightning-fast, feature-rich React application for searching, tracking, and managing your movie watchlist. Built with Vite for blazing performance and organized with a modular, feature-based architecture.

# 1. Install dependencies
npm install

# 2. Create .env.local file
cp .env.local.example .env.local
# Edit .env.local and add your OMDb API key

# 3. Start dev server (< 1 second!)
npm run dev

🎉 Done! App runs at http://localhost:3000

• ⚡ Lightning Fast - Powered by Vite (<1s dev server startup)
• 🔍 Movie Search - Real-time search with OMDb API
• 📄 Pagination - Browse all search results
• 🎯 Movie Details - Comprehensive information

• 📝 Watched List - Track with ratings & notes
• 📌 To Watch List - Save for later
• ❤️ Favorites - Quick access to favorites
• ✏️ Edit Ratings - Update anytime
• 📊 Statistics - Genre analytics & averages

• 🌓 Dark/Light Theme - Toggle with persistence
• 📱 Fully Responsive - Mobile, tablet, desktop
• ⌨️ Keyboard Shortcuts - Enter, Escape
• 🔍 Search History - Last 10 searches
• 📥 Export/Import - Backup as JSON

• Sort by: Date, Title, Your Rating, IMDb Rating, Year
• Filter by: All, 7+, 8+, 9+ ratings

src/
├── main.jsx              # Entry point
├── App.jsx               # Main orchestrator
├── components/
│   ├── ui/               # Shared UI components
│   │   ├── Box, Loader, ErrorMessage
│   │   ├── EmptyState, Pagination, Tabs
│   │   └── index.js
│   └── StarRating.jsx    # Rating component
├── features/
│   ├── search/           # Search functionality
│   ├── movies/           # Movie display
│   ├── lists/            # List management
│   └── theme/            # Theming
├── hooks/
│   ├── useKey.js         # Keyboard events
│   ├── useLocalStorageState.js
│   └── useMovies.js      # API fetching
├── services/
│   └── omdbApi.js        # API client
├── utils/
│   ├── constants.js      # App constants
│   └── helpers.js        # Utility functions
└── styles/
    └── index.css         # Global styles

Clean imports, no more ../../../:

import { useMovies } from "@hooks";
import { MovieList } from "@features/movies";
import { Box, Loader } from "@components/ui";

• Node.js (v18+)
• npm or yarn
• OMDb API Key (Get free key)

1. Clone repository

   git clone <your-repo-url>
   cd usePopcorn

2. Install dependencies

   npm install

3. Environment setup

   # Copy example file
   cp .env.local.example .env.local
   
   # Edit .env.local
   VITE_OMDB_API_KEY=your_actual_api_key

4. Run development server

   npm run dev

5. Build for production

   npm run build
   npm run preview

• Type 3+ characters → Instant results
• Use pagination arrows for more results
• Click search bar when empty → See history

1. Search and click a movie
2. Rate with stars (1-10)
3. Add personal notes (optional)
4. Click "Add to Watched"

• Tabs: Switch between Watched, To Watch, Favorites
• Edit: Click ✏️ to update ratings/notes
• Delete: Click X to remove
• Favorite: Click ❤️ to toggle

• Use dropdowns in Watched tab
• Sort: Date, Title, Rating, Year
• Filter: 7+, 8+, 9+ ratings

• Export: Download JSON backup
• Import: Restore from file

• Click 🌙/☀️ button to toggle
• Preference saved automatically

• ⚡ 30x faster dev server startup
• 🚀 Instant HMR - changes reflect immediately
• 📦 30% smaller bundle size

• 📁 Modular structure - 40+ organized files
• 🎯 Feature-based - easy to find code
• 🔄 Reusable components - DRY principle
• 📦 Barrel exports - clean imports

• 🛣️ Path aliases - no more ../../../
• 🎨 Better organization - clear structure
• 🧪 Testable - small, focused modules
• 📚 Well documented - inline comments

# Development
npm run dev          # Start dev server (Vite)
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint

• vite.config.js - Vite configuration
• jsconfig.json - Path aliases for IDE
• .eslintrc.cjs - ESLint rules
• index.html - HTML entry point

• VITE_MIGRATION.md - Migration details
• FEATURES.md - Complete feature list
• SETUP.md - Detailed setup guide
• CHANGELOG.md - Version history

Every file has comprehensive comments explaining:

• Component purpose
• Function parameters
• Complex logic
• Usage examples

mkdir src/features/my-feature

// src/features/my-feature/MyComponent.jsx
export default function MyComponent() {
  return <div>My Feature</div>;
}

// src/features/my-feature/index.js
export { default as MyComponent } from "./MyComponent";

import { MyComponent } from "@features/my-feature";

Contributions welcome! Please:

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

MIT License - See LICENSE file

• OMDb API - Movie database
• Vite - Build tool
• React - UI library

• Issues: GitHub Issues
• Discussions: GitHub Discussions

• Migrated from Create React App to Vite
• Restructured with modular architecture
• 40+ files instead of 1 monolithic file

• Lightning-fast development experience
• Instant hot module replacement
• Smaller production bundles

• Feature-based organization
• Path aliases for clean imports
• Barrel exports for easy importing
• Comprehensive inline documentation

• Small, focused components
• Single responsibility principle
• Easy to test and extend
• Clear folder structure

Enjoy your lightning-fast movie tracker! 🍿⚡

Built with ❤️ using React + Vite