A modern, interactive website for the "Festive Window Projections" YouTube channel, showcasing festive window projection videos for various holidays and seasons.
- Video Showcase: Browse and watch festive window projection videos organized by season and theme
- Playlist Organization: Explore curated playlists of related projection videos
- Interactive Tools:
- 3D Window Visualizer: See how projections look on a window in 3D
- Festive Catch Game: Fun mini-game with seasonal themes
- Projection Creator: Create custom window projections by combining elements
- Frontend: Next.js 14+ with React 18+ and TypeScript
- Styling: TailwindCSS for responsive design
- Animations: Framer Motion for smooth animations and transitions
- 3D Rendering: Three.js with React Three Fiber for 3D visualizations
- API Integration: YouTube Data API and RSS feeds for video content
- Node.js 18.0.0 or later
- npm or yarn
-
Clone the repository:
git clone https://github.com/yourusername/festive-ambience.git cd festive-ambience -
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser to see the result.
src/app: Next.js app router pagessrc/components: Reusable React componentslayout: Layout components (Header, Footer, etc.)video: Video-related components (VideoCard, VideoGrid, etc.)interactive: Interactive components (WindowVisualizer, FestiveGame, etc.)ui: UI components (Button, Card, etc.)seo: SEO components (MetaTags, StructuredData, etc.)
src/lib: Utility functions and API integrationsapi: API integration functionshooks: Custom React hooksutils: Utility functions
src/types: TypeScript type definitionspublic/assets: Static assets (images, models, fonts)
This project is configured for easy deployment on Vercel:
npm run build
# or
yarn buildThis project is licensed under the MIT License - see the LICENSE file for details.