Je code un clone Instagram en clean architecture en moins de 4heures ?

Ғылым және технология

Intéressé par devenir véritablement senior en conception d’applications front-end ? J’ai crée une formation vidéo : formation-cleanarchitecture.com
La meilleure manière de progresser, c’est de créer des clones d’app. Et d’utiliser des frameworks qu’on ai!merait maîtriser.
Je me lance un petit challenge code. Je développe un mini clone Instagram. Particularité, j’utiliserai la méthode clean architecture.
Je vous explique le déroulement.
MON PROGRAMME DE FORMATION (15h de vidéos) :
🧠 Formation Clean Architecture front-end - Deviens véritablement senior, apprends le développement rapide et simple d'applications de très haute qualité → formation-cleanarchitecture.com
📧 MA NEWSLETTER (IRRÉGULIÈRE) : devsfreelancesacademy.substac...
OÙ JE SUIS SUR LES RÉSEAUX :
📸 Rejoins-moi sur Instagram : / julien_lucas
👨‍💼 Linkedin : / julien-lucas-jl
Chapitres :
00:00 - Intro
00:14 - Explications du challenge
02:15 - Top départ : Dev du HTML/CSS
03:36 - Préparation des fausses données
05:03 - 1er cas d’utilisation : récupérer les posts (et ajout des modules clean architecture)
09:23 - Connection de la donnée sur le post (derniers modules clean archi)
14:43 - Ajout des stories, 2ème cas d’utilisation
16:43 - 3ème cas d’utilisation : les suggestions à suivre
18:06 - Outro
Qui je suis?
Développeur front-end (autour de React) depuis 2018. J’ai eu l’opportunité de travailler en freelance dans quelque startups et scaleups: iziwork, Reezocar, Sewan, Corum, Smartch. Et bien d’autres précédemment durant les 4 précédentes années car j'ai été développeur Wordpress avant ça (freelance aussi)
Sur cette chaîne je t’aide à devenir meilleur développeur, booster ta bankabilté, mieux te vendre, que ce soit en salarié, freelance ou peu importe. Tout avec tout ce qui tourne autour du business et du code.

Пікірлер: 40

  • @Hepasta
    @HepastaАй бұрын

    elle est exceptionnel ta vidéo, sah je suis heureux que youtube me l'ai recommandé

  • @louisvanoise8638
    @louisvanoise86383 күн бұрын

    Hello Julien, j'ai une petite question, la couche "domain" de ton app n'est pas censé être indépendante du framework or je crois que tu utilises RTK, dans le cas ou l'on voudrait migrer sur Vue JS il faudrait donc réécrire également toute cette partie comprenant les use-case et non uniquement la couche "app"... J'ai surement mal compris certaines choses, merci d'avance si tu as le temps de m'éclairer sur le sujet

  • @remyirconnor5074
    @remyirconnor5074Ай бұрын

    Salut, super vidéo hyper intéressante que de bons conseils ça fait plaisir de te revoir depuis quelques temps continue comme ça j’adore

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Merci @remyirconnor5074, content que ça t'ait plu.🙏

  • @abousow1318
    @abousow1318Ай бұрын

    J'ai adore 🤩

  • @bobbybob-cz3nt
    @bobbybob-cz3ntАй бұрын

    Très intéressant, merci

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Merci @bobbybob-cz3nt 🙏

  • @lanswave3625
    @lanswave3625Ай бұрын

    Hello ! Super vidéo très intéressante. Penses tu mettre a dispo le code sur un github? Car le seul reproche que je peux faire c'est que par moment ça va très vite et on a pas trop le temps de voir en détails le découpage. J'ai compris les principes mais j'avoue que je suis partisant d'avoir un example a analyser à tête reposé. En tout cas encore félicitations pour ta vidéo.

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Non @lanswave3625, je ne mets pas le repo sur github. Sinon certains vont se contenter de ça. Alors que je vends une formation qui traite tout ça de manière posée, ainsi que la partie testing. Sans oublier la partie sur 2 autres frameworks, rtk et react query. Mais c’est vrai que ça passe vite. Il faut mettre l’écran sur pause. 🙂

  • @mrkanata7696
    @mrkanata7696Ай бұрын

    Super vidéo, tu utlises redux toolkit pour ta clean archi mais est-ce qu'on pourrait pas faire la meme chose avec Zustand ?

  • @c4346

    @c4346

    Ай бұрын

    bonne question, intéressé par la réponse de Julien aussi !

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Merci @mrkanata7696. J'ai jamais testé Zustand, mais je peux dire qu'évidemment oui. En faite peu importe les frameworks qu'on utilise, vu qu'il y a du découplage d'inter-dépendance partout. Tu aurais juste à brancher ton Zustand aux gateway (l'infra) et au Presenter (pour envoyer la donnée sur les composants). À tester. Après pour le testing tu as toujours différentes possibilités en clean archi, c'est ça qui est bien.

  • @mrkanata7696

    @mrkanata7696

    Ай бұрын

    @@JulienLucas Merci pour la réponse

  • @jeremied7945
    @jeremied7945Ай бұрын

    Mec je débute en développement et ta vidéo est vraiment super merci 🙏🏻

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Merci @jeremied7945! J'étais sur que certains allaient bien apprécier. 😁

  • @jeremied7945

    @jeremied7945

    Ай бұрын

    @@JulienLucas bah surtout que c'est vraiment la première fois que j'entends parlais de cette forme coding avec ces outils donc ouais chuis bien content que KZread m'ait pushed ta vidéo.

  • @xav_624
    @xav_624Ай бұрын

    Yes, c'est ça qu'on veut voir. Des cas concrets d'implémentation Clean/Hexa & DDD. Je suis sur Vue et le point qui me dérange le plus par exemple, c'est la liaison entre le domain et les primitives de réactivité du framework.

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    @xav_624 Je connaissais pas les primitives de réactivité de Vue, j’ai du checker. 😅 Bonne question. Réponse, ça se mets sur le viewmodel. Mais tu peux avoir envie de te créer des custom hooks de hooks - pour les usestate sur React, ou ref() et reactive() sur Vue. Ainsi on retire là aussi de l’inter-dépendance au framework. J'avoue n'être jamais allé jusque là. J'espère avoir répondu à ta question.

  • @SirAeshki
    @SirAeshkiАй бұрын

    Super vidéo, de ce que j'ai compris, il existe en faite plusieurs " Clean architecture ", et toi tu te base sur le DDD, c'est bien ça ? J'essaie de comprendre comment mieux structurer son code, sauf que je vois beaucoup de gens utiliser différent nom, par exemple " Application " " Presentations " ou encore des fois " Entites " ou " Models " pour dire la même chose, je me demande si il existe une " norme " quand on fait du " Clean architecture ", par ailleurs j'utilise Vue3. Aurais-tu des conseils pour mieux structurer mon code ?

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Non @SirAeshki il n'existe pas plusieurs clean architectures. Une seule. Moi je rajoute juste les view models, ce qui n'existe pas dans la méthode "officielle" de Robert Martin. Je commet un lapsus dans la vidéo, c'est un rajout de ma part. Après oui, dans les repo GitHub les devs se trompent souvent sur le naming. Parfois c'est pas très grave. Parfois c'est complet freestyle. D'où ton impression. ☺

  • @SirAeshki

    @SirAeshki

    Ай бұрын

    @@JulienLucas je comprends mieux, je te remercie de m'avoir répondu rapidement, je te souhaite une bonne journée

  • @leonnyametso4631
    @leonnyametso4631Ай бұрын

    Hello julien. Quand on voit le titre je code insta en 4h on s’entend à avoir les 4h de vidéo. Du coup suis un peu rester sur ma fin pour le coup sur cette vidéo. Si t’as la possibilité n’hésite pas a publier la vidéo complète. Du courage pour la suite

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    😅

  • @zeross30

    @zeross30

    Ай бұрын

    Même commentaire, la vidéo complète pourrai être cool vu qu'en plus elle semble avoir été enregistrée.

  • @mayoniaise5169

    @mayoniaise5169

    Ай бұрын

    la même ;)

  • @nunn
    @nunnАй бұрын

    Très bonne initiative ! Je suis.

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Merci, content de t'avoir ici @nunn

  • @user-fc8xh7uo4c
    @user-fc8xh7uo4cАй бұрын

    Hello, intéressant, c'est possible de savoir à quel âge tu es devenu développeur freelance ? J'aimerais savoir si le marché accepte les gens qui se reconvertissent tardivement.

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Bien sur que le marché accepte ceux qui se reconvertissent tardivement, si t'es bon, on t'embauche. Faut arrêter de se prendre la tête avec l'âge. Reconverti à 37ans sur React pour moi. Avant j'étais dev Wordpress. Donc gros changement. 🙂

  • @maorisraoelson5574
    @maorisraoelson5574Ай бұрын

    Très intéressant, comment fais-tu les tests de tes composants et de l’intégration ?

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Content que ça t'ai plu @maorisraoelson5574. 🙂 Justement j'en parle brièvement dans la vidéo. Je test les composant par leur viewmodel que j'aborde. C'est à dire en pur tests unitaires. Plutôt que d'émuler le composant entier. C'est rapide et beaucoup plus maintenable de tester comme ça. Car il n'y a pas de dépendance au framework React. Je te recommande d'essayer.

  • @maorisraoelson5574

    @maorisraoelson5574

    22 күн бұрын

    ⁠@@JulienLucas Effectivement, je trouve que ModelView suit le même principe que le pattern “presentational/container”, remplacé par les hooks

  • @SoftSkillSecrets
    @SoftSkillSecretsАй бұрын

    Je suis vraiment ravi du projet mais nous aimerions avoir la vidéo complète vraiment pour véritablement avoir des vrais acquis dessus si possible partagé nous le lien de la vidéo merci ❤

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    Ça représenterait 5h de vidéos Tout ça est traité en détail dans ma formation: www.formation-cleanarchitecture.com Et il y a un discount actuellement. Je serait ravis de t'y retrouver (un accès Slack est inclut).

  • @devcrown
    @devcrownАй бұрын

    first, super vidéo

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    ❤️

  • @floviskabanda8044
    @floviskabanda8044Ай бұрын

    Merci bcp. mais je trouve encore plus mieux une video complete

  • @Ni_DieuNiMaitre
    @Ni_DieuNiMaitreАй бұрын

    Ta police de caractère sur VS Code elle fait mal aux yeux

  • @thomaseyermann
    @thomaseyermannАй бұрын

    Sujet intéressant mais tout est vraiment trop long ; répétitif et donne l'impression que les explications partent dans tous les sens. J'ai eu l'impression d'entendre pleins de fois la même chose sans que ça n'apporte quelque chose de plus au contenu. Dommage, l'initiative est sympa !

  • @JulienLucas

    @JulienLucas

    Ай бұрын

    @thomaseyermann Pourtant j’ai tenté de parler de choses différentes tout le long. Regardes: 1. Je parle des modules de code pour les cas d’utilisation 2. Puis de l’injection de dépendance 3. Puis je parle des views models 4. Ensuite je parle des présenters Mais je prends volontiers la critique, j’ai fait un essai.

Келесі