Project Zéro : Développement du site Loopr

En avant la Todo

Pour le projet Loopr, voici toutes les étapes pour la création du site de A à Z :

1. Définir les objectifs et les contenus
2. Identifier les fichiers à développer
3. Peaufiner ma charte graphique
4. Réaliser les maquettes UX / UI
5. Valider le stack technique
6. Créer un environnement de Dev
7. Code x Café (x ChatGPT)
8. Mise en ligne 🔥

Définir les objectifs et contenus

Tu connais déjà mon objectif (En route vers le million), mais qu’est-ce qu’on va trouver sur Loopr ?

• Des articles : pour partager mes réflexions, trouvailles, tutos, et retours d’expérience
• Des projets : les coulisses de mes créations et avec leurs résultats
• Des ressources : des reviews honnêtes des outils pratiques (ou pas) que je découvre

Mais attends… où est le business model ?

Eh bien, à part deux-trois liens affiliés (faut bien que je bosse pour mon million 🤑), Loopr ne va pas m’enrichir tout de suite… Quoique ! On s’est rencontrés grâce à ce projet non ? 😉

Identifier les fichiers à développer

Maintenant qu’on a les types de contenus, l’arborescence se dessine facilement !

Pour les articles

Les articles peuvent être regroupés par Catégories et par Tags. Du coup on doit créer 4 fichiers :

single.php // Pour gérer l'affiche des articles
category.php // Pour gérer l'affichage des catégories
tag.php  // Pour gérer l'affichage des étiquettes (Tag)
template-all-posts.php // Pour afficher tous les articles

Pour les projets

Tout comme les articles, mes projets seront regroupés avec les Tags mais également par Technologies (ex : WordPress). Du coup, les pages nécessaires pour ce type de publication sont très similaire :

single-project.php // Pour gérer l'affichage des projets
taxonomy-technology.php // Pour gérer l'affiche des projets par technologie
template-all-projects.php // Pour afficher tous les projets

💡 Pas besoin de créer un nouveau fichier tag.php, il suffira de conditionner l’affichage en fonction du type de contenu.

Pour les ressources (outils)

Pour ce type de contenu, je vais uniquement les regrouper par catégories, donc la liste est plus simple :

single-tool.php // Pour gérer l'affichage des outils
taxonomy-tool-category.php // Pour gérer l'affichage des projets par catégorie
template-all-tools.php // Pour afficher tous les outils

Pour les landings page

En plus des pages “dynamiques”, on aura également 3 landing pages pour commencer :

front-page.php // Page d'accueil
template-about-me.php // Page À propos
template-contact.php // Page Contact

Au total, pour un site relativement basique, on aura 13 fichiers principaux à développer. Il y aura également pas mal de fonctionnalités (type de publication personnalisé, système de notation, gestion des commentaires, des filtres ou encore des redirections…), alors on traîne pas et on se lance 🫡 !

Peaufiner la charte graphique

Bon, même si j’aime beaucoup le design, je ne suis malheureusement pas un artiste 🥹. Ça tombe bien, pour ce projet ce n’est pas la DA qui compte, mais bien le contenu. On va partir sur quelque chose de simple, sobre et efficace !

Pour le logo

On part sur un « logo typographique” qui dit l’essentiel. Pas besoin de plus ici !

La typographie

Choisir la typo, c’est toujours un casse-tête pour moi. Alors j’ai fait appel à ChatGPT 😅 ! Résultat ? Montserrat (très original…). Une police d’écriture sans-serif moderne, lisible et un double « O » qui rappellent l’idée de boucle. Bref… efficace.

Les couleurs

Je voulais une charte graphique simple. Je me suis inspiré de Medium, qui fait le job avec une palette sobre pour mettre en avant le contenu. Conclusion : blanc, gris, noir. (Wouah 🤯)

Réalisation des maquettes UX / UI

Côté maquettes, on utilise Figma ! Je n’ai pas envie de perdre trop de temps, du coup je réalise un mix entre wireframe et maquette pour les pages en format Desktop. Le reste on le fera au feeling 🙈.

Valider le Stack Technique

À la base, je voulais partir sur un stack moderne (NextJS x Strapi)… Mais soyons réalistes : Loopr ne va pas m’emmener vers mon million. Donc priorité à l’efficacité, on part sur le bon vieux WordPress !

Pour optimiser le site et parce que j’aime garder un code propre, je vais créer mon thème WordPress de A à Z, avec le moins de plugins possible. Et j’en profiterai pour utiliser Tailwind CSS et rédiger quelques articles techniques 🤓.

Créer un environnement de Dev

J’ai le nom de domaine, mais pas question de développer en live pour l’instant. J’utilise LocalWP (un outil de dev local pour WordPress) et mon bon vieux Visual Studio Code pour coder.

La suite ?

Je partagerais quelques contenus pour suivre les étapes du développement, je t’invite donc à suivre cette série d’articles pour plonger dans les coulisses 👇.