Article original : Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase
Résoudre des défis de codage sur le site LeetCode est un excellent moyen d'améliorer vos compétences en développement. Mais une meilleure façon d'améliorer vos compétences est de développer votre propre site LeetCode.
Nous venons de publier un cours sur la chaîne YouTube freeCodeCamp.org qui vous apprendra à construire et déployer votre propre clone de LeetCode.
Le but de ce cours est de fournir une approche pratique pour apprendre et implémenter un ensemble de technologies web populaires. Vous en ressortirez avec une plateforme de problèmes de codage entièrement fonctionnelle, similaire à LeetCode, que vous pourrez ajouter fièrement à votre portfolio.
Burak Orkmez a développé ce cours. Il est développeur de logiciels et créateur de cours.
Décomposition du cours
Intro & Démo de l'application : Nous commençons le cours en vous donnant un aperçu de ce que vous allez créer à la fin.
Installation du projet : Ici, nous allons configurer notre environnement de développement et vous présenter les technologies utilisées dans le cours, notamment React, Next JS, TypeScript, Tailwind CSS et Firebase.
Configuration de la page d'authentification & fonctionnalités : Cette série de modules couvre la création d'une page d'authentification, y compris l'interface utilisateur pour la connexion, l'inscription et la réinitialisation du mot de passe, ainsi que leurs fonctionnalités respectives en utilisant Firebase.
Interface utilisateur de la page d'accueil & interface utilisateur de la table des problèmes : Apprenez à concevoir la page d'accueil et les tables de problèmes en utilisant Tailwind CSS, un framework CSS basé sur les utilitaires qui accélère considérablement le processus de développement.
Modale vidéo YouTube, mise à jour de la barre supérieure lors de l'authentification & optimisations de la modale d'authentification : Cette section vous guide à travers diverses améliorations de l'interface utilisateur et des fonctionnalités interactives en utilisant des composants React.
Configuration de Firebase & initialisation de Firestore : Vous apprendrez à utiliser Firebase pour l'authentification des utilisateurs, la gestion de la base de données et plus encore.
React Toastify & optimisations d'images : Améliorez l'UX de votre application en introduisant des notifications et en optimisant les images pour des temps de chargement plus rapides.
Création de diverses pages & éléments d'interface utilisateur : Plongez dans la création de différentes pages et composants, comme Timer.tsx, Workspace.tsx, ProblemDescription.tsx, et plus encore, en perfectionnant vos compétences en React et Tailwind CSS.
Création de l'éditeur de code & interface utilisateur des cas de test : L'un des points forts du cours est la création de votre propre éditeur de code et la mise en œuvre de l'interface utilisateur pour les cas de test.
Gestion des données & implémentations de problèmes : Nous discuterons de la manière de gérer les données dans les applications React et démontrerons comment implémenter certains problèmes de codage populaires comme Two Sum, Reverse Linked List, Jump Game, et plus encore.
SSG, récupération de problèmes & données utilisateur : Comprenez les concepts de la génération de site statique (SSG) dans Next.js, apprenez à récupérer des problèmes depuis la base de données et comment gérer les données utilisateur.
Fonctionnalités J'aime, Je n'aime pas et Étoile : Ajoutez des fonctionnalités interactives aux solutions de problèmes, améliorant ainsi l'expérience utilisateur.
Soumission de code & stockage local : Apprenez à implémenter la fonctionnalité de soumission de code et comment utiliser le stockage local pour sauvegarder le code.
Interface utilisateur et fonctionnalités de SettingsModal : Plongez dans la création d'une modale de paramètres avec une fonctionnalité complète en utilisant React et Tailwind CSS.
Résolution de bugs & erreur d'hydratation : Le débogage est une partie cruciale du développement. Ici, nous passerons en revue quelques bugs courants et discuterons des stratégies pour les résoudre.
Déploiement & règles Firebase : Enfin, vous apprendrez à déployer votre application et à définir des règles Firebase pour sécuriser vos données.
Ce cours est rempli de leçons pratiques et d'exemples qui reflètent les processus de développement du monde réel. À la fin, vous aurez une solide compréhension des technologies impliquées et la confiance nécessaire pour construire des projets similaires à grande échelle.
Regardez le cours complet sur la chaîne YouTube freeCodeCamp.org (7 heures de visionnage).