Bernard VERA

Développeur full-stack

À propos

Passionné depuis toujours par l'informatique, j'ai décidé aujourd'hui d'en faire mon métier, en devenant développeur full-stack. Les possibilités infinies de création, les défis techniques et la satisfaction de voir mes projets prendre vie sont autant de raisons qui m’ont poussé à me reconvertir. Mon cursus de formation chez OpenClassrooms, m'a permis d'améliorer l'expérience que j'ai acquise en autodidacte. Mon but est de devenir un développeur web polyvalent, capable de concevoir des sites intuitifs et performants.

Mes compétences

HTML

CSS

JS

REACT

NODE

MongoDB

SEO

GitHub

Vibe Coding

Wordpress

Mes réalisations

Booki

Sophie Bluel

Menu Maker

Nina Carducci

Kasa

Mon Vieux Grimoire

Le Clerc d'Huissier

Image du site Le clerc du commissaire de justice

Clerc de commissaire de justice

Photographe

Agence Web

Générateur de bulletin de salaire

Mon nouveau portfolio

Prévimétéo

Boutique KINGSMEN

Jeu de Morpion

Projet en cours ...

Todo List Deluxe

Jeu Memory

Projet en cours ...

Booki

Projet

Création de la page d'accueil d'une agence de voyage

Description

Projet OpenClassrooms (Novembre 2023) :
Vous débutez une alternance en tant que développeur web au sein de la start-up Booki. L’entreprise souhaite développer un site Internet qui permette aux usagers de trouver des hébergements et des activités dans la ville de leur choix. Vous êtes chargé d'intégrer l'interface du site avec du code HTML et CSS. Cette interface devra être responsive et respecter la maquette fournie sur Figma.

Les problématiques

Les problématiques rencontrées sont:
- une mise en page complexe en raison de nombreux éléments, de tailles et formes différentes.
- Des difficultés pour gérer l'affichage lors du passage au format tablette, et mobile.
J'ai pu résoudre ces problèmes en utilisant Flexbox et le Responsive Design.

Compétences

Cette expérience m'a permis d'acquérir des compétences solides en intégration web, notamment dans la manipulation de code HTML et CSS, pour concevoir des interfaces utilisateur intuitives et esthétiques. Je sais maintenant comment intégrer une maquette, en partant de zéro. J'ai aussi découvert comment fonctionnent les Media Queries pour permettre à un site de s'afficher sur tout type d'écran. J'ai aussi appris à utiliser Git et GitHub pour versionner, sauvegarder et partager mon code.

GitHub Site

Sophie Bluel

Projet

Créer une page web dynamique avec JavaScript, pour le portfolio de Sophie Bluel.

Description

Projet OpenClassrooms (Décembre 2023):
Vous travaillez comme développeur front-end pour l’agence ArchiWebos qui comprend 50 salariés. Après la réunion pour échanger sur le projet, la cheffe de projet vous envoie en pièces jointes tout ce dont vous aurez besoin pour pouvoir réaliser vos missions, soit: le Figma du design qui vous servira à créer les nouvelles fonctionnalités, le code back-end qui vous permettra de faire persister les données et de tester les fonctionnalités, le code front-end d’origine avec la version statique de la page de l’architecte, et finalement, le Kanban pour la mission pour que vous puissiez voir les tâches qui vous sont attribuées. Vos 3 missions principales sont donc: développer la page de présentation des travaux de l'architecte (à partir du HTML fourni), développer la page de connexion de l'administrateur du site (le client) (code à créer de zéro), et développer la modale permettant d'uploader de nouveaux médias (code à créer from scratch).

Les problématiques

Les problématiques rencontrées sont:
- La récupération des données en passant par une API
- La gestion des évènements et la manipulation du DOM
- La création et la gestion de la modale. Tout cela en JavaScript.
- J'ai aussi dû construire une page de connexion pour l'administrateur, avec création et stockage d'un Token d'authentification.
j'ai pu résoudre tous ces problèmes grâce aux cours dispensés par Openclassrooms, mais aussi à mes recherches personnelles sur Internet.

Compétences

Cette expérience m'a permis d'acquérir des compétences solides en Javascript. J'ai appris à récupérer les données utilisateurs dans le JavaScript, via des formulaires et une API. Je sais gérer les évènements utilisateurs et manipuler les éléments du DOM. J'ai aussi découvert le fonctionnement d'un Kanban. J'ai trouvé ce projet trés difficile, mais mon envie d'apprendre a finalement pris le dessus. J'ai maintenant de bonnes bases en Javascript.

GitHub

Menu Maker by Qwenta

Projet

Planifiez le développement du site de votre client

Description

Projet OpenClassrooms (Janvier 2024):
Vous êtes développeur front-end au sein de l’agence Webgencia. Votre client Qwenta souhaite faire développer un “Menu Maker” : un site permettant aux restaurateurs d’afficher et de mettre en page leurs menus facilement, en quelques clics. Vous disposez de la maquette Figma du site, et des spécifications fonctionnelles. Vous devrez réaliser deux documents:
- Le document des spécifications techniques de Menu Maker
- Un tableau Kanban finalisé, organisant le projet sur toute sa durée.
Ce nouveau projet nécessite beaucoup de recherches pour s’assurer d'un travail de bonne qualité, et aligné sur les dernières technologies ! Vous devrez donc, en parallèle de votre travail, développer un système de veille.

Les problématiques

Les problématiques rencontrées sont:
- La mise en place un système de veille et l'utilisation d'outils spécialisés pour cela.
- Savoir identifier les challenges techniques du projet afin de créer un listing des différents plugins et librairies nécessaires à la création du projet.
- Créer et utiliser un Kanban.

Compétences

Cette expérience m'a permis d'apprendre à rédiger les spécifications techniques d'un projet, à partir de besoins fonctionnels, et de présenter une solution technique. J'ai appris à suivre le déroulement d'un projet grâce à un outil de gestion (Trello), et à découper une fonctionnalité en tâches pour préparer le développement. j'ai aussi mis en place une méthode de veille technologique, pour pouvoir sélectionner les meilleures technologies pour notre projet. Cela m'a permis de voir toutes les facettes de la création d'une application, de l'idée de départ, jusqu'a la mise en production.

GitHub Site

Nina Carducci

Projet

Débuggez et optimisez un site de photographe (Nina Carducci).

Description

Projet OpenClassrooms (Janvier 2024):
Vous êtes développeur freelance et vous décidez de proposer vos services d’optimisation SEO à de nouveaux clients. Parmi vos prospects, il y a le site de Nina Carducci, une photographe.

Les problématiques

Les problématiques rencontrées sont:
- Le site était beaucoup trop long lors du chargement (Plus de 7 secondes).
- Structure du code HTML inexistante.
- Problèmes d'accessibilité du site.
- Visibilité du site sur les moteurs de recherche inexistante.
- Nombreux bugs du site.
Les cours d'OpenClassrooms sur le SEO, le référencement local et les technologies d'assistance, ainsi que les outils Lighthouse, Wave et Chrome DevTools, m'ont permis de résoudre ces problèmes assez facilement.

Compétences

Les rapports Lighthouse et les audits Wave étaient catastrophiques. Afin d'optimiser le site, j'ai entrepris des actions telles que la réduction de la taille et du poids des images, l'ajout de balises et d'attributs manquants, l'optimisation de la structure du code, l'ajustement du contraste et la réorganisation des balises. J'ai acquis des compétences en matière de référencement web (SEO), en mettant en œuvre une stratégie de référencement local, en utilisant Schema.org, les balises meta et Google Rich Snippets pour améliorer la visibilité du site sur les moteurs de recherche. J'ai développé des compétences en matière de débogage de sites web, grâce aux Chrome DevTools. J'ai également rédigé un cahier de recette pour tester le site, garantissant son bon fonctionnement et sa fluidité. A la fin du projet, les rapports Lighthouse et les audits Wave étaient plus que satisfaisants.

GitHub Site

Kasa

Projet

Créez une application web de location immobilière avec React.

Description

Projet OpenClassrooms (Février 2024):
Vous êtes développeur front-end en freelance pour Kasa, une entreprise de location d’appartements entre particuliers. Kasa fait partie des leaders de la location d’appartements entre particuliers en France. Le site de Kasa a été codé il y a maintenant plus de 10 ans en ASP.NET avec un code legacy important. La CTO, a donc lancé une refonte totale pour passer à une stack complète en JavaScript avec NodeJS côté back-end, et React côté front-end. Votre mission: Démarrer le projet React et développer l’ensemble de l’application, les composants React et les routes React Router, en suivant les maquettes Figma (responsives !). Le recrutement de la personne en charge du back-end n'est pas terminé et va prendre plus de temps que prévu. Du coup, il va falloir faire sans pour le moment. Un fichier JSON contenant les 20 dernières annonces de logements vous permettra de construire le Front qui correspond.

Les problématiques

Les problématiques rencontrées sont:
- La création de la logique de routage.
- La création des animations des menus collapses.
- La création d'une page 404 pour gérer les erreurs.
- La création d'un carrousel d'images.
- Les effets de style, avec SASS
j'ai pu résoudre tous ces problèmes grâce aux cours dispensés par Openclassrooms, mais aussi à mes recherches personnelles sur Internet.

Compétences

J'ai appris à initialiser une application avec Create React App. Avec React Router, je sais maintenant configurer la navigation entre les pages d'une application. L'utilisation de composants React pour développer l'interface du site, m'a appris à structurer efficacement le code, à le rendre modulaire et réutilisable. Cette compétence s'est avérée essentielle pour développer le projet et ajouter de nouvelles fonctionnalités complexes de manière efficace. L'utilisation de SASS m'a appris à créer une esthétique moderne et à utiliser des animations CSS pour rendre le site plus attractif.

GitHub Site

Mon Vieux Grimoire

Projet

Développez le back-end d'un site de notation de livres

Description

Projet OpenClassrooms (Mars 2024):
Vous êtes développeur back-end en freelance depuis maintenant un an dans la région de Lille. Un développeur front-end vous contacte pour vous proposer de travailler avec lui en mutualisant vos compétences front / back sur un tout nouveau projet qui lui a été proposé. Il s’agit d’une petite chaîne de librairies qui souhaite ouvrir un site de référencement et de notation de livres : Mon Vieux Grimoire. Les spécifications fonctionnelles de la première version sont définies. Une designeuse a conçu la maquette. Le développeur front-end se charge de développer le front-end du site en React. Il faut donc un développeur back-end. Votre mission: Créer le back-end du site. Le document des spécifications techniques de l’API, sera votre cahier des charges. De plus, pour que le projet soit conforme aux bonnes pratiques du Green Code, il faudra prendre en compte la taille des images qui seront envoyées par les utilisateurs.

Les problématiques

Les problématiques rencontrées sont:
- La création de la logique métier.
- L'utilisation de middlewares.
- La création d'une base de données et la protection des données.
- La mise en place de mesures d'authentification des utilisateurs
- L'optimisation automatique des images uploadées sur le site.
Les cours dispensés par Openclassrooms, mais aussi mes recherches personnelles sur Internet, m'ont permis de résoudre ces problèmes assez facilement.

Compétences

Cette expérience m'a permis de découvrir l'architecture MVC et la création d'API RESTful, ce qui me prépare à travailler sur des applications web full-stack complexes. L'utilisation de Node.js, Express, et MongoDB, me sera indispensable pour pouvoir créer des applications web modernes et performantes. La maîtrise des opérations CRUD et de l'authentification sont des compétences clés pour tout développeur back-end. J'ai aussi appris à mettre en place des mesures de sécurisation du site et des données.

GitHub

Le Clerc d'Huissier

Projet

Un site d'information destiné aux employés des Huissiers

Description

Projet personnel (Mai 2009):
Avant d'être Développeur Web, j'ai eu une autre carrière, en tant que clerc d'huissier. Je suis fier de mon parcours dans le secteur juridique, mais j'ai toujours été attiré par l'informatique et Internet. Dés les années 2000, j'étais déja passionné par tout ce qui avait rapport au web. J'ai commencé à gérer des blogs, et à créer de petits sites familiaux (Les reseaux sociaux n'existaient pas encore). Je n'avais aucune formation dans ce domaine. Un jour, je me suis rendu compte qu'aucun site n'existait sur les clercs d'huissiers. J'ai donc décidé d'en créer un moi-même. Et je dois avouer que ce site à eu du succés. J'ai été référencé dans les 5 premiers de la recherche du mot "Huissiers" à une époque. Bien sûr, il est maintenant obsolète et démodé. Mon prochain projet sera sans doute d'en créer un nouveau, plus attrayant, sécurisé, et adapté aux smartphones, grâce à toutes les compétences que j'ai pu acquérir durant ma formation de Développeur Web, chez OpenClassrooms

Les problématiques

Mes compétences étaient trés limitées en 2009. J'ai donc utilisé un CMS gratuit (qui n'existe plus aujourd'hui). Je l'avais modifié pour qu'il corresponde à ce dont j'avais besoin. Je faisais des mises à jour régulières du site et de son contenu. Chaque opération me semblait compliquée, mais je suis toujours arrivé à obtenir le résultat attendu. Mes recherches sur Internet étaient ma seule solution pour régler ces problèmes.

Compétences

Cette expérience m'a permis d'apprendre à créer, mettre en ligne, et maintenir un site web. J'avais la satisfaction de voir que le forum du site aidait parfois les employés d'huissiers à trouver la solution à leurs problèmes. En 2009, Internet était encore en "bas débit", les tablettes et les smartphones n'existaient pas. Les interfaces étaient plutôt austères et le "https" n'existait pas. J'avais aussi créé quelques blogs sur Skyblog (qui n'existe plus maintenant). L'arrivée des réseaux sociaux à révolutionné Internet.

Site

Clerc de commissaire de justice

Projet

Un site d'information destiné aux employés des Huissiers

Description

Projet personnel (Juillet 2024) :
Il s'agit de la refonte complète de l'ancien site "Le clerc d'huissier".

Les problématiques

L'ancien site n'était plus d'actualité. Il s'agissait d'un ancien CMS, inadapté aux formats tablette et mobile, et qui ne répondait plus au normes de sécurité de base. La mise à jour de l'ancien site était devenue impossible. Donc la seule solution était d'en créer un nouveau. De plus, une réforme de 2020 à changé profondément la profession. La convention collective aussi à été totalement remaniée.

Compétences

Ce projet me permet de vérifier et d'améliorer les compétences acquises lors de ma formation. Je suis parti de zéro. J'ai utilisé React pour créer cette "Single Page Application". Pour plus de fluidité, pas de base de données. J'ai créé des fichiers JSON pour stocker les textes. Des fonctions Javascript permettent de récupérer images et textes, et de les afficher dans des composants réutilisables. J'ai travaillé dans un repository Github et le site est hébergé gratuitement sur Vercel. Le site est adapté aux formats Dektop, Tablette et Mobile ( Responsive Design ). Contrôle du score Lighthouse, vérification de l'accessibilité avec Wave, SEO, vérification des erreurs avec les Chrome DevTools, liens vers d'autres sites. Tout a été vérifié. Ce site semble fonctionnel. Cet exercice m'a permis de voir les limites d'une "Single page application", notament au niveau du référencement : Une seule page, donc un référencement réduit. J'ai créé un lien vers un forum externe, dédié à la profession et hébergé gratuitement sur Forumactif.com.

GitHub Site

Photographe amateur

Projet

Le site web d'un photographe amateur

Description

Projet personnel (Septembre 2024) :
Création du site web d'un photographe amateur imaginaire.

Les problématiques

En partant de zéro, le but était de créer un portfolio simple, mais agréable et fonctionnel, en utilisant uniquement HTML et CSS. Cela me permet de réviser mes connaissances de base.

Compétences

Révision des balises de base en HTML et CSS. Les fichiers sont conformes aux normes W3C. Il n'y a pas d'erreur dans la console. Les images ont été compressées au format WEBP. Le site a passé les tests Lighthouse et Wave (Rapidité de chargement, accessibilité et SEO). J'ai apporté un soin particulier au Responsive Design. Le site s'affiche correctement dans les formats: Mobile, tablette et Desktop. Pour le fun, j'ai ajouté un fond d'écran mobile. Cela me permet de réviser les notions d'animations en CSS. J'ai utilisé GRID pour la mise en forme des images. Le formulaire de contact n'est pas actif volontairement, car le site n'est pas destiné au public.

GitHub Site

Le site d'une Agence Web

Projet

Le site d'une agence web imaginaire. Firefox et Safari ne sont pas encore compatibles avec les technologies utilisées.

Description

Projet personnel (Octobre 2024) :
Création du site d'une agence web imaginaire.
Le site devra comporter de nombreuses animations, tout en restant fluide et lisible. Le site devra être Responsive et ne pas utiliser de Javascript.

Les problématiques

Lors de ma veille technologique, j'ai découvert qu'on pouvait maintenant effectuer des animations au scroll, directement en CSS. Bien sûr, on peut le faire facilement et depuis longtemps avec javascript, mais pas en CSS. Cela m'a donné envie d'en savoir plus. J'ai donc décidé de créer ce site afin de découvrir cette nouvelle technologie. S'agissant d'une fonctionnalité expérimentale, elle n'est pas encore supportée par tous les navigateurs : Firefox et Safari ne sont pas encore compatibles, mais cela ne saurait tarder. Du coup, le test W3C n'a pas validé mon fichier style.css. De plus, en exécutant un test Lighthouse, je me suis aperçu que ces animations ralentissaient le chargement de la page web.

Compétences

C'est une des principales compétences des développeurs : Savoir s'adapter aux nouvelles technologies. Pas encore de cours sur cette fonctionnalité nommée "Scroll-driven Animations". Il faut donc chercher les documentations et tutoriels sur le web. Il faut chercher ce qui fonctionne, voir ce qui ne marche pas, essayer avec le Responsive Design. J'ai réussi à créer un site animé, qui fonctionne bien et reste responsive. Je suis maintenant au top en ce qui concerne les animations en CSS.

GitHub Site

Générateur de bulletin de salaire

Projet

Générateur de bulletin de salaire

Description

PROJET PERSONNEL (Mars 2025) :
Un bulletin de salaire simple, réalisé en HTML, CSS et JavaScript. Une interface d'accueil intuitive et agréable. Un formulaire dans lequel il faut entrer toutes les informations requises, et qui permettra d'éditer, puis d'imprimer le bulletin de salaire d'une assistante maternelle. Le calcul des montants et cotisations se fera automatiquement.

Les problématiques

Un projet compliqué car un bulletin de salaire comporte de nombreuses rubriques, et des calculs complexes. Une mise en page difficile, mais une interface qui doit rester simple. L'exportation au format A4 en fichier PDF est compliquée, surtout en version mobile.

Compétences

La création de ce site me permettra d’améliorer mes compétences techniques et logiques :

- Création d'une page d'accueil intuitive et conviviale
- Design s'inspirant de celui du site PAJEMPLOI
- Création d'un mode clair et d'un mode sombre
- Compréhension approfondie des bases de JavaScript pour rendre le site interactif (variables, fonctions, conditions, calculs)
- Utilisation des événements pour interagir avec l'interface utilisateur.
- Conception de la logique du bulletin de salaire (Définir les rubriques, fixer les bases et les taux des cotisations).
- Formulations complexes pour calculer les sommes et montants automatiquement.
- Mise en place d'un formulaire simple à remplir.
- Mise en place d'une sécurité contre les attaques XSS dans les formulaires.
- Mise en place d'un jeton CSRF unique dans le local storage, pour la sécurité.
- Validation des champs des formulaires et messages d'erreur personnalisés.
- Utilisation de html2canvas pour créér une image PNG du bulletin de salaire.
- Utilisation de jsPDF pour convertir cette image en fichier PDF imprimable.
- Format responsive (Mobile, tablette et desktop)
- Validation W3C html et css
- Améliorations pour Lighthouse et Wave
- Tests pour s'assurer que le site fonctionne comme prévu dans différents navigateurs et sur différentes tailles d'écran.

GitHub Site

Mon nouveau portfolio

Projet

Mon nouveau Portfolio

Description

PROJET PERSONNEL (Avril 2025) :
Un nouveau portfolio, réalisé en REACT cette fois. Il est plus moderne et plus attractif que le premier.

Les problématiques

S'adapter à la mode actuelle, en Design, en créant un thème moderne, intuitif et attractif. Mise en place d'un mode clair/sombre et d'animations, et ajout d'une barre de progression concernant les compétences. Le descriptif des projets a été amélioré.

Compétences

La création de ce site m'a permis d’améliorer mes compétences :

- Création d'un site Single Page Application
- Utilisation de REACT + VITE
- Design moderne et intuitif
- Animations légères et fluides
- Création d'un mode clair et d'un mode sombre
- Création de barres de progression pour les compétences
- Création d'un mini-jeu, pour rendre le site interactif
- Format responsive (Mobile, tablette et desktop)
- SEO et référencement
- Déploiement sur VERCEL
- Améliorations pour Lighthouse et Wave
- Tests pour s'assurer que le site fonctionne comme prévu dans différents navigateurs et sur différentes tailles d'écran.

GitHub Site

Projet en cours

Projet

PréviMétéo

Description

PROJET PERSONNEL (Mai 2025) :
PréviMétéo est une application météo moderne permettant aux utilisateurs de consulter des prévisions météorologiques précises, sur 3 jours. Développée avec React et Vite, elle exploite les API Open-Meteo Forecast pour la localisation des villes, et Open-Meteo Weather pour fournir des données météorologiques actualisées et fiables.

Les problématiques

- Traitement des données API : Adaptation des réponses JSON pour une présentation claire et ergonomique.
- Optimisation des performances : Gestion efficace des requêtes API pour minimiser les délais de réponse.
- UI/UX : Conception d'une interface conviviale et réactive. Design Mobile First, adapté à différents appareils.
- Gestion des erreurs : Mise en place de mécanismes pour gérer les cas d'erreur et garantir une expérience utilisateur optimale

Compétences

La création de ce site me permettra d’améliorer mes compétences :

- Développement Frontend avec React : Création d'une interface dynamique et intuitive pour une expérience utilisateur fluide.
- Optimisation avec Vite : Compilation rapide et amélioration des performances pour une application réactive.
- Création d'un mode clair et d'un mode sombre
- Consommation d'API REST : Intégration des API Open-Meteo pour récupérer et afficher les villes et les prévisions météorologiques.
- Gestion d'état : Utilisation efficace du useState et du useEffect pour le rendu et la mise à jour des données.
- Format responsive (Mobile, tablette et desktop)
- Déploiement : Hébergement sur Vercel, assurant un accès rapide et fiable à l'application.
- Tests pour s'assurer que le site fonctionne comme prévu dans différents navigateurs et sur différentes tailles d'écran.

GitHub Site

Projet en cours...

Image d'une boutique de vêtements pour homme

Projet

Boutique Kingsmen

Description

PROJET PERSONNEL (Juin 2025) :
Créer la page d'accueil d'une boutique de vêtements pour hommes, avec un Design moderne, chic et attirant. Le but est d'inciter le client à venir acheter en boutique. S'agissant d'une page simple, l'utilisation d'un Framework n'est pas nécessaire. Donc HTML, CSS et Javascript uniquement. Il faudra aussi installer une carte afin de pouvoir localiser la boutique. Les images seront générées avec l'aide de l'IA.

Les problématiques

- Veille pour voir ce qui se fait de mieux en ce moment, dans ce domaine.
- Optimisation des performances : Quelques animations mais sans ralentir l'affichage du site
- UI/UX : Conception d'une interface conviviale et réactive.
- Design moderne et élégant, adapté à différents appareils.
- Mise en place d'une carte interactive pour pouvoir localiser la boutique.

Compétences

La création de ce site me permettra d’améliorer mes compétences :

- Développement Frontend avec HTML et CSS.
- Création d'une interface dynamique avec Javascript pour une expérience utilisateur fluide.
- Design moderne, dans un style masculin et chic, s'agissant d'un boutique pour hommes.
- Intégration d'une carte interactive pour pouvoir localiser la boutique.
- Création de cartes de notation, avec avis des clients.
- Format responsive (Mobile, tablette et desktop)
- Déploiement : Hébergement sur GitHub, assurant un accès rapide et fiable à l'application.
- Tests pour s'assurer que le site fonctionne comme prévu dans différents navigateurs et sur différentes tailles d'écran.

GitHub Site

Projet en cours...

Projet

Tic-Tac-Toe Deluxe

Description

PROJET PERSONNEL (Novembre 2025) :
J'avais déjà créé un jeu de morpion simple, mais mes compétences ayant évolué, je le trouve maintenant trop basique. Cette nouvelle version devra permettre de jouer contre un ami, mais aussi contre l'ordinateur, avec plusieurs niveaux de difficultés. Lors de ma veille technologique, j'ai en effet découvert l'algorithme Minimax, qui simule une IA imbattable. Le but est donc de l'intégrer dans le jeu. Pour cela, ce projet à été créé avec React. J'ai utilisé une nouvelle technologie pour suivre l'évolution du développement web : le Vibe coding. Il s'agit d'utiliser l'Intelligence Artificielle pour coder. Dans le cas présent, j'ai choisi Lovable.dev. Cela devrait me procurer un gain de temps indéniable.

Les problématiques

- Utilisation de Lovable.dev pour créer rapidement l'interface
- UI/UX : Conception d'une interface conviviale et réactive.
- Design moderne et élégant, adapté à différents appareils.
- Gestion des tours des joueurs
- Gestion du gagnant ou de l'égalité
- Gestion du niveau de difficulté
- Déploiement sur Vercel

Compétences

La création de ce site me permet d’améliorer mes compétences :

- Développement Frontend avec React.
- Création d'une interface dynamique avec Javascript pour une expérience utilisateur fluide.
- Design moderne.
- Intégration de plusieurs niveaux de difficulté.
- Création des algorithmes du jeu.
- Utilisation de l'algorithme Minimax, qui simule une IA imbattable.
- Déploiement : Hébergement sur Vercel, assurant un accès rapide et fiable à l'application.
- Tests pour s'assurer que le site fonctionne comme prévu dans différents navigateurs et sur différentes tailles d'écran.

GitHub Site

Projet en cours...

Projet

Atelier Passion Code

Description

PROJET PERSONNEL (Janvier 2026) :
Ce projet est en cours de création... WordPress est incontournable dans le monde du web, une part importante des sites étant construits avec ce CMS. J’ai donc développé un site WordPress afin de renforcer mes compétences. Ce projet me permettra de maîtriser la structure du back office, la gestion des contenus (pages, articles, médias), la configuration des menus et widgets, ainsi que les réglages essentiels liés aux performances, à la sécurité et à l’architecture du thème. Étant basé sur une offre gratuite, le site présente toutefois certaines limitations et inclut de la publicité imposée. Le sujet du blog est ma formation de Développeur Web.

Les problématiques

- Utilisation du CMS Wordpress
- UI/UX : Conception d'une interface conviviale
- Blog moderne, adapté à différents appareils.
- Création d'articles attirants
- Découvrir toutes les options de Wordpress
- Maintenir le site à jour

Compétences

La création de ce site me permettra d’améliorer mes compétences avec Wordpress :

- Mise en place et configuration
- Gestion du contenu
- Personnalisation de l'apparence
- Fonctionnalités et extensions
- Sécurité et maintenance
- Optimisation

Site

Todo List Deluxe

Projet

Todo List Deluxe

Description

Projet personnel (Février 2026) :
Création d'une Todo List en HTML, JavaScript et CSS. J’avais déjà créé une première version il y a 15 mois, mais mon niveau ayant progressé, j’ai souhaité proposer une version plus complète et mieux structurée.

Les problématiques

Cette nouvelle Todo List inclut notamment : la modification d’une tâche existante, la possibilité de marquer une tâche comme réalisée, un message de confirmation avant suppression, une interface plus soignée avec un choix de mode clair ou sombre.

Compétences

Créer une To-do List permet de réviser les bases du Javascript :

- Manipulation avancée du DOM
- Gestion d’état et logique applicative
- Persistance des données avec localStorage
- Mode clair/sombre dynamique
- Validation stricte des entrées utilisateur
- Protection contre les attaques XSS
- Content Security Policy (CSP)
- Stockage local sécurisé

GitHub Site

Jeu Memory

Projet

Jeu Memory

Description

Projet personnel (Mars 2026) :
Création d'un jeu de mémoire en HTML, JavaScript et CSS. Le jeu doit proposer une expérience fluide, animée et responsive. Le projet inclut trois niveaux de difficulté, des animations visuelles, un compteur de coups joués, un écran de victoire, et pour la première fois, des effets sonores.

Les problématiques

Ce nouveau projet pose plusieurs difficultés : Créer un choix entre 3 niveaux de difficulté, un écran de victoire, une animation des cartes, et des sons lors des principales actions de jeu.

Compétences

Créer un jeu de Memory permet de réviser les bases du Javascript :

- Manipulation avancée du DOM
- Gestion d’état d'un jeu interactif
- Gestion des événements et du reset
- Interface responsive
- Animations CSS
- Gestion du son via Web Audio API
- Navigation multi-écrans

GitHub Site

Projet en cours ...

Projet

AutoDépenses

Description

Projet personnel (Avril 2026) :
AutoDépenses est une application web en cours de développement visant à centraliser et suivre facilement toutes les dépenses liées à vos véhicules : carburant, entretien, réparations, accessoires, et plus encore. L’objectif est d’offrir une vision claire de l’historique des coûts et d’aider à mieux anticiper les dépenses futures. La partie Frontend et la partie Backend sont créées et opérationnelles. Le déploiement sur VERCEL est un peu compliqué. Les données sont stockées dans une base de données, avec authentification de l'utilisateur. La base du site est posée, mais il faut encore l'améliorer et corriger les bugs.

Les problématiques

Ce projet comporte deux étapes :
1. Frontend — Gestion locale et interface utilisateur intuitive
2. Backend — Authentification et base de données

Compétences

Créer une application web de suivi des frais d'un véhicule permet d'améliorer plusieurs compétences :

- Utilisation de React et Node.js
- Gestion d’une interface intuitive
- Gestion des données dans le LocalStorage
- Responsive Design
- Authentification utilisateur
- Gestion d'une API
- Gestion d'une base de données

GitHub Site

Bernard VERA

Développeur full-stack

À propos

Mes compétences

HTML

CSS

JS

REACT

NODE

MongoDB

SEO

GitHub

Vibe Coding

Wordpress

Mes réalisations

Booki

Sophie Bluel

Menu Maker

Nina Carducci

Kasa

Mon Vieux Grimoire

Le Clerc d'Huissier

Clerc de commissaire de justice

Photographe

Agence Web

Générateur de bulletin de salaire

Mon nouveau portfolio

Prévimétéo

Boutique KINGSMEN

Jeu de Morpion

Projet en cours ...

Todo List Deluxe

Jeu Memory

Projet en cours ...

Voir mon CV