A modern, responsive web application for browsing movies and TV shows, built with Next.js 14, Framer-motion, and Tailwind CSS.

• Cross-page state management
• Smooth animations using Framer Motion
• Responsive design for all device sizes
• Accessibility features following WCAG guidelines
• Blurred image loading for improved user experience
• Dynamic page routing demonstrating advanced techniques
• Detailed pages for movies, TV shows, people, and companies
• Server-Side Rendering (SSR) for improved performance and SEO
• Advanced search functionality for movies, TV shows, and people
• Extended functionality with additional pages for a real-world feel
• Performance optimizations including image optimization and lazy loading
• Skeleton loading components for visual feedback during content loading

• Next.js 14 (React)
• TypeScript
• Tailwind CSS
• shadcn/ui components
• Framer Motion for animations
• TMDB API for movie and TV show data
• Vercel for deployment

The project follows a modular structure with separate directories for pages, components, and API integration:

• app/: Contains the main application pages and layouts
• components/: Reusable React components
• lib/: API integration and utility functions
• styles/: Global styles and Tailwind CSS configuration

For a detailed file structure, please refer to the Technical Documentation at the root of the project.

Clone the project

  https://github.com/Xanderyeng/cinereel.git

Go to the project directory

  cd cinereel

Install dependencies

  npm install

or

  bun install

or

yarn install

To run this project, you will need to add the following environment variables to your .env.local file

   TMDB_API_KEY=your_tmdb_api_key

Remember to create an account on Google cloud console and obtain a google tag manager ID.

GOOGLE_TAG_ID


## Run Locally

Start the development server

```bash
bun run dev

or

  npm run dev

Open http://localhost:3000 in your browser to see the app.

This app can be easily deployed to Vercel or any other Next.js-compatible hosting platform.

• Design inspired by Dreamshare Figma Design provided by WFD
• Movie and TV show data provided by The Movie Database (TMDB)
• UI components from shadcn/ui

Contributions are welcome! Please feel free to submit a Pull Request.

MIT

Add badges from somewhere like: shields.io