J’ai récemment fini The Complete Web Development Bootcamp.
Maintenant, c'est le moment de se retrousser les manches et de pratiquer. Dans cette optique, je me suis lancé un défi : réaliser un projet toutes les deux semaines. Et pourquoi ne pas partager mon expérience ! 😃
Je me suis donc mise à chercher quelques idées de projet. Au même moment, Omnivore tirait sa révérence. Du coup, pourquoi ne pas refaire Omnivore ?
Ok. Le but du projet, c'était principalement de savoir où j’en étais après le bootcamp. La question : Jusqu’où est-ce que je peux aller en deux semaines ?
Objectif fixé: Refaire Omnivore et intégrer le maximum de features en deux semaines.
À partir de là, je me suis dit : "Ok Lila, comment tu t’organises ?"
First thing first : quelles features me tiennent à cœur dans le projet ?
- Afficher l'article : améliorer la lisibilité et supprimer les distractions
- Gérer les articles : centraliser et organiser les articles que je souhaite conserver ou lire plus tard
- Metadata : optimiser mon temps de lecture et mon organisation
- Ai : optimiser ma consommation de contenu
J’ai utilisé Perplexity pour me guider dans la gestion de projet. Et ouais, c'était une première pour moi. J’avais dans l’idée de séparer la partie setup, back, front et data, mais concrètement, c'était un peu flou. Et je n'aime pas trop ça, le flou.
Du coup, avec Perplexity, j'ai fait un plan avec milestones. C’était déjà plus clair.
Venant du médical, s'il y a bien une chose que je maîtrise, ce sont les to-do listes.
Si vous n’êtes pas familier avec les projets de soins, basiquement, c’est une big to-do liste par patient que tu mets à jour toute la journée en fonction des infos que tu reçois à propos de ce patient.
Donc, je suis beaucoup plus à l’aise et efficace lorsque j’ai mes tâches bien définies.
Développement
J’ai avancé relativement sans friction sur la partie setup et back-end. Le principal challenge était de trouver un scraper.
J’ai investigué pour trouver Readability/jsDom :
- Readability analyse le DOM généré par JSDOM pour en extraire uniquement l'article de l’URL fournie.
- En lisant la doc, j'ai vu qu’il y avait une problématique de sécurité liée à l’affichage de code HTML d’une source externe et donc potentiellement malveillant.
- D’où l’utilisation de DOMPurify, qui nettoie le code avant l’affichage. Mon API était prête, GO pour le front !
Et là, c’est le drame ! 🤣
En fait, ce qu’il s’est passé, c'est que je n’étais pas claire sur le design. Je voulais reproduire Omnivore, mais à ma sauce, en improvisant au fur et à mesure… Erreur !
Pourquoi cette erreur ?
Petit contexte : j’aime les arts créatifs. Le dessin, la poterie, la peinture... Sauf que mon processus créatif, c’est l’inverse complet de mon processus de travail : "full impro !" Et c’est là le souci. Je suis partie sur mon DOM comme sur une page blanche. Du coup, j’ai commencé à me perdre.
Quand je m’en suis rendu compte, j’ai fait une pause, et je suis allée sur Figma pour faire une maquette et mettre tout ça en ordre.
Finalement, après réflexion, je suis partie sur l’option de refaire le même design qu’Omnivore, au vu de l'ETA.
Ce que j’en tire
C'est que pour mon prochain projet, je ferai exactement comme pour le back en termes d’organisation. C’est-à-dire passer du temps sur les objectifs et établir un plan d’exécution détaillé.
Au final
En deux semaines, j’ai implémenté une application web full-stack (React + Node.js) permettant de sauvegarder et lire des articles depuis n'importe quelle URL.
Le frontend (React/Vite) offre une interface pour gérer les articles, tandis que le backend (Express/PostgreSQL) extrait le contenu pertinent des pages web via Readability.
Si vous voulez aller jeter un coup d'œil, c'est ici
Principales fonctionnalités
- Extraction d'articles
- Stockage en base de données
- CRUD
- Interface responsive
Ce que j’ai retenu de ce projet
- Deux semaines, c'est court 😅
- Améliorer le project management. (Processus créatif pour le développement front : NO.)
- Plein de nouvelles notions à découvrir : CSS variables dans React, Docker/Docker Compose, React Query, IndexedDB, sécurité… 🤩
Aujourd’hui, le projet est disponible sur GitHub et mon prochain projet sera de faire un déploiement via Docker Compose.
En route vers l’aventure 🤩
Top comments (0)