În acest tutorial de proiect, veți construi o clonă LeetCode cu React, Tailwind CSS, Next.JS, Typescript și Firebase. Implementează-l și în Vercel la sfârșit.
💻 Cod sursă: https://github.com/burakorkmez/leetcode-clone-youtube
💻 Github Gist: https://gist.github.com/burakorkmez/5ba4c1a910f396050a2ac2f229418f54
🔗 Proiect demonstrativ: https://leetclone.vercel.app/problems/two-sum
🔗 Server Discord (pentru a pune întrebări): https://discord.gg/YFn2WyheZV
Curs creat de @asaprogrammer_
⭐️ Cuprins ⭐️
0:00:00 Introducere
0:00:29 Demo de aplicație
0:05:23 Configurarea proiectului
0:08:51 Auth Page Setup
0:13:19 Auth Page Navbar
0:18:54 AuthModal Layout UI
0:22:16 Interfața de conectare
0:29:41 Interfața de utilizare pentru înregistrare
0:31:59 ResetPassword UI
0:33:13 Integrarea stării de autorizare a reculului
0:47:31 Configurare Firebase
0:52:41 Funcționalitate de înregistrare
1:01:21 Funcționalitate de conectare
1:05:14 Pagină de aut
1:08:01 Interfața de utilizare a paginii de pornire
1:12:50 Interfața de utilizare a tabelului cu probleme
1:21:01 Youtube Video Modal
1:29:51 Actualizare Topbar la aut
1:32:46 Funcționalitatea de deconectare
1:37:11 Auth Modal Optimizations
1:38:44 Resetarea funcției parolei
1:42:56 Reacționează Toastify
1:47:19 Optimizări de imagine
1:54:33 Crearea [pid] pagina și actualizați bara de sus
2:02:27 Se creează Timer.tsx
2:12:31 Se creează Workspace.tsx
2:15:18 Împărțirea paginii
2:19:47 Se creează ProblemDescrition.tsx
2:26:03 Se creează PreferenceNav.tsx
2:34:39 Crearea editorului de cod
2:41:10 Adăugarea interfeței de utilizare a cazurilor de testare
2:50:15 Se creează EditorFooter.tsx
2:56:32 Manipularea datelor explicată
3:01:50 Problemă cu două sume
3:12:52 Lista legată invers
3:18:05 Problemă cu jocul de salt
3:20:13 Problemă cu parantezele valide
3:21:16 Caută problema matricei 2d
3:22:01 Folosind SSG pentru [pid].tsx
3:46:47 Se actualizează interfața de utilizare a cazurilor de testare
3:51:39 Se inițializează Firestore
3:55:56 Adăugarea de probleme la DB
4:12:09 Probleme de preluare
4:32:58 Creați utilizatori în DB
4:40:33 Preluați datele despre probleme
4:51:28 Încarcă schelete
4:56:35 Obțineți date despre utilizator despre problemă
5:06:23 Ca și funcționalitatea
5:27:51 Nu-mi place funcționalitatea
5:39:03 Funcționalitate stea
5:46:03 Problemă următoare și anterioară
5:55:23 Rezolvarea erorii de hidratare
5:58:08 Sărbătoarea confetti
6:01:43 Trimiterea codului
6:20:50 Salvați codul în stocarea locală
6:24:48 Rezolvarea erorilor
6:31:08 Comutați ecranul complet
6:34:13 SettingsModal UI
6:41:33 Setări Funcționalitate modală
6:54:23 Actualizați pagina de pornire
6:59:11 Tehnica Sandboxing
7:01:58 Desfășurare
7:05:08 Reguli Firebase
🎉 Mulțumim susținătorilor noștri Campion și Sponsor:
👾 davthecoder
👾 jedi-or-sith
👾 Nangong Qianying
👾 Agustín Kussrow
👾 Îl atrag pe Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
—
Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org
Citiți sute de articole despre programare: https://freecodecamp.org/news
Cursuri interesante:
- Curs Flutter & Firebase – Construiește o clonă Instagram completă
- Creați și implementați o clonă Instagram cu React și Firebase – Tutorial
- Creați o clonă Instagram cu React Native, Firebase Firestore, Redux, Expo – Curs complet
- Curs de dezvoltare a aplicației Flutter – Construiește o clonă Twitter cu Appwrite și Riverpod
- Flutter Mobile App + Node.js Back End Tutorial – Codați o clonă Amazon [Curs complet]
- Construiește o clonă LinkedIn cu React și Firebase – Tutorial
- Creați o clonă Twitter cu Vue.js, Quasar Framework și Firebase pentru iOS, Android, Mac și Windows
- Creați și implementați AI SaaS cu venituri recurente (Next.js, OpenAI, Stripe, Tailwind, Vercel)
- Tutorial Full Stack – Site de management al hotelului cu Next.js, React, Sanity.io, Tailwind, Stripe
- Redux Tutorial – Începător până la avansat