A feature-rich movie discovery and tracking application showcasing advanced React development skills, including TypeScript integration, API handling, custom component development, and modern UI/UX patterns.
- React Hooks: useState, useEffect, useRef, useMemo, custom hooks
- TypeScript: Full type safety with custom interfaces
- API Integration: RESTful API calls with error handling
- Performance: Debounced search, memoization
- UX: Keyboard shortcuts, auto-focus, loading states
| Feature | Technical Implementation | Business Value |
|---|---|---|
| Smart Search | Debounced input, regex validation, dual search modes | Real-time user experience without performance loss |
| Year Filtering | Material-UI DatePicker integration with custom theming | Advanced filtering demonstrates complex component integration |
| Watchlist Management | LocalStorage API with CRUD operations | Data persistence shows full-stack thinking |
| Rating System | Custom StarRating component with event handling | Interactive UI components, highly customizable |
- Full TypeScript Integration with custom interfaces, type guards, and strict typing
- Component Composition following React best practices and separation of concerns
- Error Boundary Implementation with graceful fallbacks and user-friendly error states
- Environment Variable Management for secure API key handling across environments
- Instant Search: Real-time movie search with 700ms debounce
- Auto-focus: Start typing anywhere on the page to search
- Dual Search Modes:
- Partial match for broader results
- Exact match for precise searches
- Year Filtering: Filter movies by release year (1900-current)
- Input Validation: Minimum 3 characters for partial search
- Complete Information: Plot, cast, director, runtime, ratings
- IMDb Integration: Real-time data from OMDB API
- Expandable Text: Click to read full movie plots
- High-Quality Posters: Crisp movie artwork display
- Custom Ratings: Rate movies with interactive star component
- Edit Ratings: Double-click to modify your ratings
- Smart Statistics: Average ratings and runtime calculations
- Persistent Storage: Your data saves automatically
- Quick Actions: Double-click to reopen movie details
- Responsive Design: Works perfectly on desktops and tabs
- Dark Theme: Easy on the eyes along with Material-UI theming
- Keyboard Navigation: Full keyboard support including Escape to close and hotkeys to switch result pages
- Loading States: Smooth loading indicators
- Error Handling: Graceful error messages and recovery
- Tooltips: Helpful hints throughout the interface
Demonstrates Ability To:
- ✅ Build complex, interactive web applications from scratch
- ✅ Integrate third-party APIs and handle real-world data
- ✅ Implement modern React patterns and TypeScript best practices
- ✅ Create responsive, accessible user interfaces
- ✅ Deploy and maintain production applications
- ✅ Write clean, maintainable, and well-documented code
Solves Real Development Challenges:
- API rate limiting and request optimization
- Complex state management across components
- User experience design for data-heavy applications
- Cross-browser compatibility and responsive design
- Production deployment with environment security
- Node.js 16+
- npm or yarn
- OMDB API key (free at omdbapi.com)
-
Clone the repository
git clone https://github.com/yourusername/flickypedia.git cd flickypedia -
Install dependencies
npm install
-
Set up environment variables
# Create .env file in project root echo "VITE_OMDB_API_KEY=your_api_key_here" > .env
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
Create a .env file in your project root:
VITE_OMDB_API_KEY=your_omdb_api_key_hereNote: Get your free API key from OMDB API. The free tier includes 1,000 requests per day.
- Type anywhere on the page to start searching
- Use the year picker 📅 to filter by release year
- Toggle word match 🔍 for exact vs. partial matching
- View results instantly as you type
- Click any movie to view detailed information
- Rate with stars ⭐ to add to your watchlist
- Double-click watched movies to edit ratings
- Delete movies with the X button
- Type anywhere: Focus search input
- Escape: Close movie details
- Tab: Navigate through interface
- Shift + Arrow keys to navigate through pages
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- Material-UI - Component library
- Material-UI Date Pickers - Date selection
- Day.js - Date manipulation
- Custom CSS - Responsive design and animations
- OMDB API - Movie database
- LocalStorage - Persistent data storage
├── App.tsx # Main application component
├── index.css # Global styles
├── main.tsx # Application entry point
├── types.tsx # TypeScript types and interfaces
├── vite-env.d.ts # TypeScript environment types
├── assets/ # Static assets (icons, images)
│ ├── react.svg
│ ├── w2.png
│ └── w3.png
├── components/ # All UI components
│ ├── Box.tsx
│ ├── ErrorMessage.tsx
│ ├── index.tsx
│ ├── Loader.tsx
│ ├── Logo.tsx
│ ├── MovieDetails.tsx
│ ├── MovieList.tsx
│ ├── NavBar.tsx
│ ├── StarRating.tsx
│ ├── TextExpander.tsx
│ ├── WatchedMoviesList.tsx
│ ├── WatchedSummary.tsx
│ └── ... (other components)
├── hooks/ # Custom React hooks
│ ├── useLocalStorage.tsx
│ └── ... (other hooks)
public/
├── logo.png # Application logo
└── favicon files # Browser icons (e.g., favicon.ico)
App
├── NavBar
│ ├── Logo
│ ├── Search (with DatePicker)
│ └── NumResults
└── Main
├── Box (Movie List)
│ ├── MovieList
│ └── Movie Items
└── Box (Watchlist/Details)
├── MovieDetails (when selected)
│ └── StarRating
└── WatchedMovies (default)
├── WatchedSummary
└── WatchedMoviesList
└── Movie Items
- Connect to GitHub: Link your repository in Netlify dashboard
- Build Settings:
- Build command:
npm run build - Publish directory:
dist
- Build command:
- Environment Variables: Add
VITE_OMDB_API_KEYin site settings - Deploy: Automatic deployment on every push
# Build for production
npm run build
# Preview build locally
npm run preview| Variable | Description | Required |
|---|---|---|
VITE_OMDB_API_KEY |
OMDB API key for movie data | Yes |
Movies not loading?
- Check your OMDB API key in
.env - Verify internet connection
- Check browser console for errors
Search not working?
- Ensure minimum 3 characters for partial search
- Try exact match mode for specific titles
- Check year filter isn't too restrictive
Build failing?
- Run
npm installto update dependencies - Check TypeScript errors with
npm run type-check - Verify environment variables are set
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- OMDB API for providing movie data
- Jonas Schmedtmann for providing with most of the CSS and inspiring to build this app
- Material-UI for beautiful components
- React Community for excellent documentation
- 🐛 Bug Reports: Create an issue
- 💡 Feature Requests: Start a discussion
- 📧 Contact: your.email@example.com
Made with ❤️ and lots of 🕚