Explore movies, tv shows. Built with Next.js, Tailwind CSS, Redux, Firebase, TypeScript, TMDB v3 API.

Related tags

Learning resource firebase typescript nextjs firebase-auth tmdb-api movie-app tailwindcss
Overview

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

You might also like...

A Hulu Clone which created with NextJS. It fetches the data from TMDB (The Movie Database) API.

A Hulu Clone which created with NextJS. It fetches the data from TMDB (The Movie Database) API. Click demo to try it by yourself! Hulu Clone Demo Link

Aug 17, 2022

TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Dec 17, 2022

TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Dec 17, 2022

Twitter clone using Nextjs, Tailwind CSS and Firebase

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Aug 16, 2022

LinkedIn-Clone - a LinkedIn clone with firebase, redux and styled components

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jan 3, 2022

Trying 5 Redux Alternatives (Zustand, Recoil, Jotai, Rematch and Redux-Toolkit). Expalined on CoderOne Ytb channel

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Oct 3, 2022

Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates a

Feb 8, 2022

In this project we made a Tv shows webpage where you can like or comment the different shows.

In this project we made a Tv shows webpage where you can like or comment the different shows.

JS Capstone Project In this project we made a Tv shows webpage where you can like or comment the differents shows. Built With HTML CSS JavaScript Lint

Mar 16, 2022

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

Dec 24, 2022
Comments
  • error with : next-dev.js?8927:32 Warning: Prop `href` did not match.

    error with : next-dev.js?8927:32 Warning: Prop `href` did not match. 

    next-dev.js?8927:32 Warning: Prop `href` did not match. Server: "" Client: "/"
    at a
    at Link (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/link.js:103:23)
    at h4
    at SidebarGenresSub
    at div
    at div
    at Sidebar (webpack-internal:///./src/components/Sidebar.tsx:52:72)
    at div
    at div
    at Layout (webpack-internal:///./src/components/Layout.tsx:12:26)
    at Home (webpack-internal:///./src/pages/index.tsx:17:72)
    at MoviApp (webpack-internal:///./src/pages/_app.tsx:49:27)
    at Provider (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-redux/es/components/Provider.js:16:20)
    at Wrapper (webpack-internal:///./node_modules/.pnpm/[email protected]_58781eafc43c114b370d4c4aafada0a6/node_modules/next-redux-wrapper/es6/index.js:209:40)
    at StyleRegistry (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
    at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:90:23)
    at Container (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:331:9)
    at AppContainer (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:770:26)
    at Root (webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/index.js:891:27) 

See more info here: https://nextjs.org/docs/messages/react-hydration-error
window.console.error @ next-dev.js?8927:32
printWarning @ react-dom.development.js?5c50:67
error @ react-dom.development.js?5c50:43
warnForPropDifference @ react-dom.development.js?5c50:8824
diffHydratedProperties @ react-dom.development.js?5c50:9645
hydrateInstance @ react-dom.development.js?5c50:10400
prepareToHydrateHostInstance @ react-dom.development.js?5c50:14616
completeWork @ react-dom.development.js?5c50:19458
completeUnitOfWork @ react-dom.development.js?5c50:22815
performUnitOfWork @ react-dom.development.js?5c50:22787
workLoopSync @ react-dom.development.js?5c50:22707
renderRootSync @ react-dom.development.js?5c50:22670
performSyncWorkOnRoot @ react-dom.development.js?5c50:22293
scheduleUpdateOnFiber @ react-dom.development.js?5c50:21881
updateContainer @ react-dom.development.js?5c50:25482
eval @ react-dom.development.js?5c50:26021
unbatchedUpdates @ react-dom.development.js?5c50:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js?5c50:26020
hydrate @ react-dom.development.js?5c50:26086
renderReactElement @ index.js?11e6:488
doRender @ index.js?11e6:710
_callee$ @ index.js?11e6:384
tryCatch @ runtime.js?6b81:45
invoke @ runtime.js?6b81:274
prototype.<computed> @ runtime.js?6b81:97
asyncGeneratorStep @ index.js?11e6:31
_next @ index.js?11e6:49
eval @ index.js?11e6:54
eval @ index.js?11e6:46
_render @ index.js?11e6:403
render @ index.js?11e6:406
eval @ next-dev.js?8927:86
eval @ fouc.js?ff02:12
requestAnimationFrame（异步）
displayContent @ fouc.js?ff02:7
eval @ next-dev.js?8927:85
Promise.then（异步）
eval @ next-dev.js?8927:48
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/client/next-dev.js @ main.js?ts=1644926501787:567
options.factory @ webpack.js?ts=1644926501787:633
__webpack_require__ @ webpack.js?ts=1644926501787:37
__webpack_exec__ @ main.js?ts=1644926501787:1236
（匿名） @ main.js?ts=1644926501787:1237
webpackJsonpCallback @ webpack.js?ts=1644926501787:1179
（匿名） @ main.js?ts=1644926501787:9
显示另外 3 个框架
hot-dev-client.js?98de:155
    opened by byoungd 0
Owner
Sinan Bekar
Full Stack Developer
Sinan Bekar
GitHub https://next-moviapp.vercel.app
Login of app to remind to drink water, using Firebase tools like Firebase Auth and Firebase Firestore

Water Reminder Login App Menu Contents Motivation Final Images How to download the project and run it? Technologies utilized Dev ?? Motivation This ap

Ilda Neta 10 Aug 22, 2022
Keep track of the movies you've watched and create your own movies lists!

Cinematek Keep track of the movies you've watched and create your own movies lists! All the movies informations are provided by The Movie Database Dep

Caroline Oliveira 8 May 23, 2022
This example shows how to use Tailwind CSS (v3.0) with Next.js

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

Ananda Affan Fattahila 8 Jul 1, 2022
Next js boilerplate with redux toolkit, redux persist and axios

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jorge Alberto Villarreal Gongora 5 Apr 25, 2022
🎬 Movie, TV Series and Actor website made with TMDb, Next.js and TailwindCSS.

Movie App Demo Getting Started ?? Development Server npm install --s --f && npm run dev # or yarn install && yarn dev ?? Production Server npm install

uh! 10 Dec 27, 2022
NX monorepo showing the TMDB Watchlist mobile app with Expo, tRPC, Next, and Prisma

tmdb-watchlist-prisma This app uses TMDB to retrieve a list of Now Playing movies. You can add/remove movies to track which ones you've watched. There

Mat Warger 65 Dec 28, 2022
This Webapp The Cinema of Movies displays a list of shows

This Webapp The Cinema of Movies displays a list of shows. The user is able to like any of the movies, and also read more information about each movie once he clicks on the comments button. Also, the user is able to leave a comment about any of the movies.

Tobin 7 Mar 16, 2022
Browse a list of your favorite movies and tv shows on the Steam-It Movie Database.

Preview Desktop view Stream-It The website allows users to browse a list of movies, like a movie, view and add comments to a movie Built With HTML and

Ben Kiarie 10 Sep 30, 2022
A CLI to stream movies, TV shows etc. from your terminal, for free.

Streaminal A CLI to stream movies, TV shows etc. from your terminal, for free. Installation Install streaminal globally with npm npm install -g stream

null 13 Aug 30, 2022
Simply Netflix clone using ReactJS. It fetches the data from TMDB API

NETFLIX CLONE This project is a simply front end clone of Netflix. It was created with React. It uses The MovieDB Api to search for movies and display

null 14 Dec 9, 2022