ted-dino / turbo-eureka

Movie app using tanstack and nextjs 13. WASAK!

Tedflix (Yet Another Netflix clone)

Demo

Table of Contents

• Overview
  • Built With
• Features
• How to use
• Acknowledgements
• TODO's
• License

Overview

Built With

• Nextjs 13 App Directory
• Tailwind
• TMDB API
• shadcn
• Tanstack Query
• Drizzle ORM
• jose
• argon2
• Neon

Features

Enjoy a seamless movie-watching experience with Tedflix, where you can effortlessly create and manage personalized playlists while exploring a vast library of your favorite films.

How To Use

To use the TMDB API, obtain your API key here.

For the DATABASE URL, sign up on Neon and retrieve your connection string.

As for the Video Streaming API, you can choose one that suits your needs. An example is vidsrc.

After completing the setup, you can clone and run this application. To get started, make sure you have Git and Node.js installed on your computer. Node.js includes npm. Here are the steps from your command line:

# Clone this repository
$ git clone https://github.com/ted-dino/turbo-eureka.git

# Change directory
$ cd turbo-eureka

# Install dependencies
$ npm install

# Run the app
$ npm run dev

Acknowledgements

• react query run only when submit function is called
• import Image with different name
• update a query param using next js 13 app directory
• spinner component
• netflix like search input
• react hook form and zod validation
• setting up neon database and drizzle
• set cookie on login

TODO List

• Refactor the code for improved maintainability and performance.
• Implement a mechanism to prevent users from clicking on other media items while content is loading.
• Address and fix the issue of iframe content blinking or flickering.
• Synchronize tabs for consistent user experience.
• Implement mobile navigation to ensure a seamless experience on small screens.

License

Tedflix is licensed under the GNU General Public License - see the LICENSE file for details.