ランキングに戻る

karlhadwen/netflix

JavaScript

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React

reactnetflixfirebasestyled-componentscompound-componentsreact-hookscustom-hooksreact-contextreact-portals
スター成長
スター
2.1k
フォーク
600
週間成長
Issue
0
1k2k
2020年7月2022年7月2024年7月2026年7月
成果物npmnpm install netflix
README

Building Netflix from Scratch Using React (Custom Hooks, Context, Portals), Firebase, Compound & Styled Components (10 Hour Tutorial Here: https://www.youtube.com/watch?v=x_EEwGe-a9o)

This application (a Netflix clone) was built using React (Custom Hooks, Context), Firebase & Styled Components. I have built the following pages within this application: sign in, sign up, browse & lastly the homepage. There are four different pages, some using protected routes with auth listeners. Firebase firestore handles all the data and that data is retrieved using a custom hook; authentication is used on all pages, which is handled by Firebase as well.

I used compound components (just a design pattern) to build my components, and there's over 10 examples as to how these are used. The styling is all handled via styled components. Using compound components made my actual dumb components really easy to test.

Subscribe to my YouTube channel here: http://bit.ly/CognitiveSurge where I build projects like this! And don't forget, you can contribute to this project (highly encouraged!).

Preview

関連リポジトリ
freeCodeCamp/freeCodeCamp

freeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.

TypeScriptnpmBSD 3-Clause "New" or "Revised" Licenselearn-to-codenonprofits
contribute.freecodecamp.org
452.4k45.6k
react/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
246.7k51.3k
facebook/react

The library for web and native user interfaces.

JavaScriptnpmMIT Licensejavascriptreact
react.dev
233k47.8k
vercel/next.js

The React Framework

JavaScriptnpmMIT Licensereactserver-rendering
nextjs.org
141.1k31.5k
react/react-native

A framework for building native applications using React

C++MIT Licenseandroidapp-framework
reactnative.dev
126.2k25.2k
facebook/react-native

A framework for building native applications using React

C++MIT Licenseandroidapp-framework
reactnative.dev
120.9k24.5k
shadcn-ui/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

TypeScriptnpmMIT Licensecomponentsnextjs
ui.shadcn.com
119.5k9.5k
justjavac/free-programming-books-zh_CN

:books: 免费的计算机编程类中文书籍,欢迎投稿

GNU General Public License v3.0pythonjavascript
weibo.com/justjavac
117.7k28.2k
nextlevelbuilder/ui-ux-pro-max-skill

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms

PythonPyPIMIT Licenseai-skillsantigravity
uupm.cc
108.6k11.6k
react/create-react-app

Set up a modern web app by running one command.

JavaScriptnpmMIT Licensereactzero-configuration
create-react-app.dev
103.3k26.9k
facebook/create-react-app

Set up a modern web app by running one command.

JavaScriptnpmMIT Licensereactzero-configuration
create-react-app.dev
103.1k27k
ant-design/ant-design

An enterprise-class UI design language and React UI library

TypeScriptnpmMIT Licensereactui-kit
ant.design
98.8k54.7k