filmClu 2.0

Discover movies to watch!

With filmClue 2.0, you can search for movies and check out their details. Each film page includes links to cast bio information, so you can learn all about your favorites. Built with the most excellent TMDB API.

Application Snapshot

Features

• Movie search bar
• Carousel slider with film cards and Modal pop ups
• Supports mouse and touch events (tested via emulator)
• Film detail pages with movie information and cast member links
• Cast member pages with bio and other films they are known for
• Infinite scrolling

Demo

Technology

1. Nextjs
2. Typescript
3. TailwindCSS
4. @Tanstack/React-Query
5. Continuos Deployment on Netlify

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You will need a TMDB account and an API Key. In the projects root folder, save a .env.local file with API_KEY=################## inside (the hashtags indicate where you need to put your own API key).

Installation

Easily set up a local development environment

• clone or download zip file
• cd into root
• npm install
• make sure you have your API key set up
• npm run dev

Usage

On the landing page, you can choose a movie from the category carousel or use the search.

Scroll and select a movie that interests you to see the details modal window.

If you want more information, simply click the 'details' button to view the movie details page

Read the details about your selected movie on the movie page:

Additional Documentation and Acknowledgments

• React Portals - for Modal
• Baby Yoda from freepngimg.com
• Kylo Ren from freepngimg.com
• Popcorn icon by Icons8

:books: Learning Resources

Infinite Scroll

• Load More Infinite Scroll by Tanner Linsley
• Infinite-Scroll by Rara-Record

NextJS

• Intermediate React with NextJS by Weibenfalk

:memo: Notes

1. OnTouch Events

This is the first project where I have used onTouch events for mobile webapps. If you're new too, here are some notes that may assist you on your journey.

Useful resources: React Long Press Event

2. SerializableError: Error serializing

Found the isSerializable error a few times with this Nextjs project. A quick solution that worked for this use case was to add " || null" to return items in getStaticProps. Specifically for date format or number format objects.

For further reading on the subject see:

• getServerSideProps cannot be serialized as JSON. Please only return JSON serializable data types
• Error: How to serialize data from getStaticProps : Next.js