Johan Petrikovsky · Développeur React freelance à Toulouse · Web depuis 2012

Des interfaces rapides, lisibles, trouvables.

Sites à fort trafic, outils métier, expériences interactives : j'accompagne les entreprises et les agences dans la création et la refonte de sites internet et d'applications web avec React, Next.js et TypeScript. Cette page en est l'épreuve.

Écrire à Johan Voir les essais

Prestations · Collaboration · Questions pratiques

Plaques: papier, rouge
Trame: 45° et 15°
Calage: 100 %

Du balisage au pixel

Un navigateur compose une page comme un imprimeur tire une épreuve : en passes successives, chacune contrôlée.

Balisage · Composition

Le contenu existe avant le script.

Tout le texte, les liens et le contact sont dans le HTML servi. Un robot, un lecteur d'écran ou un navigateur sans JavaScript lisent la même page.
Style · Imposition

La mise en page tient seule.

Grille, typographie et focus sont en CSS. Les animations s'ajoutent par-dessus : elles ne cachent jamais un contenu en attendant un script.
Mise en page · Calage

Rien ne bouge à l'arrivée.

Chaque boîte connaît sa taille avant les images et les polices : le texte ne saute pas sous le doigt. Décalage visé : 0,02 au plus.
Peinture · Encrage

Ce qui s’affiche coûte ce qu’il doit.

Images en AVIF à dimensions déclarées, polices réduites aux caractères utiles, aucune vidéo d’arrière-plan.
Composition des calques · Tirage

Les effets arrivent en dernier.

Les effets graphiques de cette page se chargent après le contenu, ne dessinent que ce qui est visible et s'arrêtent hors de l'écran. Sans eux, rien ne manque.

Projets React et développement web

Six projets livrés : le problème, les contraintes, les décisions. Survolez une ligne : elle se cale.

Illustration de l'essai SAFTI.fr : trois volumes de béton clair, taillés en biseau, posés sur un plan gravé de courbes de niveau et de parcelles cadastrales ; un jalon rouge est planté sur le toit le plus bas — Fig. 01 · maquette illustrée, pas une capture du siteVolumes, courbes de niveau, parcellaire

Essai 01 · 2022Next.js · TypeScript · Jest

Refondre un site d’annonces sans perdre son trafic

Problème: Un site d'annonces immobilières dont le trafic dépend du référencement naturel, à faire évoluer vers une architecture plus moderne.
Décisions: Montée de version de Next.js vers l'App Router, optimisation technique du SEO, tests unitaires avec objectifs de couverture atteints, suppression des code smells remontés par SonarQube.
Résultat: Une fonctionnalité proposée et développée a fait passer la note Trustpilot de 2,1 à 4,8.

Contrôle, en direct

Au bas de chaque feuille, l'imprimeur mesure une gamme de contrôle. Ici, ce sont les mesures de cette page, prises par votre navigateur.

01 Poids transféré: n/d
02 Requêtes: n/d
03 JavaScript: n/d
04 Plus grand affichage: n/d
05 Décalage visuel: n/d
06 Interaction la plus lente: n/d

HTML: n/d
CSS: n/d
JavaScript: n/d
Polices: n/d
Images: n/d

Valeurs de cette page, maintenant. "n/d" : mesure indisponible (API absente ou JavaScript désactivé).

Performance

Temps de réponse serveur, poids des pages, rendu, suivi en production.

Comment réduire le TTFB

SEO technique

Rendu serveur, données structurées, maillage, migrations sans perte de trafic.

Le rôle des développeurs dans le SEO

Accessibilité

Clavier, focus visible, mouvement réduit, composants qui disent ce qu’ils font.

Les composants Tooltip ne devraient pas exister

Architecture

Applications React typées et testées, cache et rendu Next.js maîtrisés.

Cache handler personnalisé pour Next.js 16

React et TypeScript, côté projet

Feuille de prestations · partir de votre besoin, choisir les bons outils.

Créer une interface React

Un espace de travail, une carte interactive, des formulaires : je développe le frontend de vos applications web, de l’intégration HTML et CSS aux composants TypeScript connectés à vos API. Les règles métier et les états de chargement font partie du travail, autant que l’écran final.
Omega · outil métier en React
Structurer un site avec Next.js

Pour un site dont le contenu doit être trouvé, l’architecture de rendu compte. J’interviens sur le rendu serveur, le cache, les parcours et le SEO technique. Sur SAFTI.fr, cette approche accompagne la refonte de l’architecture et la migration vers l’App Router.
SAFTI.fr · Next.js et référencement
Faire évoluer un frontend existant

Une refonte ne demande pas toujours de tout réécrire. Je peux reprendre des templates, moderniser des composants et travailler sur les performances, les tests et l’accessibilité. Le projet ALS Action Canada illustre ce travail sur React et un CMS WordPress headless.
ALS Action Canada · refonte de templates

Votre développeur freelance à Toulouse

D'abord l'agence, maintenant le produit : quatorze ans de frontend.

Développeur web depuis 2012 et basé à Toulouse, j'ai commencé en agence sur PHP et WordPress avant de me spécialiser dans l'écosystème JavaScript, React et TypeScript.

En freelance, j'interviens sur la création d'applications web, la refonte de sites internet et le développement frontend d'outils métier. Selon le projet, je prends en charge l'intégration HTML et CSS, les composants React, la connexion aux API ou l'architecture Next.js.

Mes missions associent développement, tests et optimisation des performances, avec une attention au référencement naturel et à l'accessibilité. Les projets SAFTI, Omega et ALS Action Canada présentés plus haut illustrent ce travail avec les équipes produit et les développeurs backend.

Je peux travailler avec votre équipe à Toulouse et en périphérie, ou à distance pour des clients dans toute la France. Pour préparer une mission, écrivez-moi avec le contexte du projet, les besoins techniques et le calendrier envisagé. J'écris aussi sur ce que j'apprends.

Basé à: Toulouse
Depuis: 2012
Disponibilité: Disponible
Écrit: 72 articles publiés

« Chaque projet m’a permis d’apprécier sa réactivité, son engagement professionnel et ses compétences. »

Perrine Sini-Berthonneau, fondatrice du studio Les Cerises

« Toujours au fait des nouvelles techniques d’intégration, je le conseille à 100 %. »

Florent Pasquet, fondateur de l’agence web Spinat

Dernières notes

Du premier échange à la livraison

Fiche de préparation · cadrer le travail avant d’écrire le code.

Travailler avec un freelance, c’est échanger directement avec la personne qui développe. Je peux rejoindre votre équipe produit ou intervenir sur un périmètre frontend défini. Une agence garde son intérêt si votre projet demande plusieurs métiers à coordonner : le choix dépend du besoin, pas du statut.

Parlons de votre projet

Comprendre le besoin
Décrivez les utilisateurs, le problème à résoudre et les contraintes. Une maquette, un site existant ou un accès au code permettent de rendre la discussion concrète.
Définir le périmètre
Les fonctionnalités, les dépendances avec le backend et les critères de validation servent de base à la proposition. Le budget, le calendrier et le mode de facturation se discutent à cette étape.
Développer et vérifier
Le travail avance par étapes à valider ensemble : interfaces, intégration des données et tests. Des retours réguliers permettent d’ajuster les priorités avant la livraison.
Préparer la suite
La livraison se prépare avec les vérifications et les éléments nécessaires à la reprise du code. Le déploiement et un éventuel accompagnement après livraison sont à préciser dans le périmètre de la mission.

Avant de lancer le projet

Questions de cadrage · budget, délais et collaboration.

Pourquoi faire appel à un développeur React freelance ?

Pour renforcer une équipe ou confier une interface à un interlocuteur technique direct. Regardez surtout les réalisations, le rôle tenu sur chaque projet et la capacité à expliquer les choix. Mes projets ci-dessus permettent de situer mon expérience en développement frontend, SEO technique et outils métier.

Combien coûte un développeur React freelance à Toulouse ?

Le coût dépend du périmètre, de l’état du code, des intégrations et du niveau d’accompagnement attendu. Un forfait correspond à un livrable bien défini ; une facturation au temps passé convient davantage à un périmètre évolutif. Le mode retenu et le tarif sont à convenir ensemble dans la proposition, après examen du besoin.

Quels projets développer avec React et Next.js ?

React se prête aux interfaces interactives : tableaux de bord, espaces clients ou applications métier. Next.js ajoute notamment des possibilités de rendu serveur pour des sites riches en contenu. Une simple page de présentation ne justifie pas toujours cette stack : le contenu, les usages et les contraintes de maintenance guident le choix.

Combien de temps prend le développement d’une application React ?

Le nombre d’écrans ne suffit pas à l’estimer. Les règles métier, la disponibilité des maquettes et des API, la migration de données et les validations influencent le délai. Un premier échange permet de repérer ces dépendances ; un calendrier réaliste demande ensuite un périmètre suffisamment précis.

Comment se déroule une collaboration avec un développeur freelance ?

Nous commençons par le contexte et les besoins utilisateurs, puis le périmètre, les priorités et les critères de livraison. Le développement s’appuie sur des échanges et des validations intermédiaires. Pour une reprise de projet, partager la stack et les difficultés actuelles aide à préparer cette première discussion.

Peut-on travailler ensemble à distance ?

Oui. Je suis basé à Toulouse et peux travailler avec des clients partout en France. Le partage des maquettes, du code et des retours permet de collaborer à distance. Les modalités d’échange et les éventuels rendez-vous sur place se définissent selon votre organisation et les besoins du projet.

Discuter de votre besoin Contexte, site existant, calendrier : quelques lignes suffisent pour commencer.

Un projet, une refonte, un audit de performance ? Signons le bon à tirer.

johan@developpeur-web.tech

Disponible LinkedIn GitHub

Johan Petrikovsky · Développeur React freelance à Toulouse · Web depuis 2012

Le contenu existe avant le script.

La mise en page tient seule.

Rien ne bouge à l'arrivée.

Ce qui s’affiche coûte ce qu’il doit.

Les effets arrivent en dernier.

Refondre un site d’annonces sans perdre son trafic

Performance

SEO technique

Accessibilité

Architecture

Créer une interface React

Structurer un site avec Next.js

Faire évoluer un frontend existant

Dernières notes

Comprendre le besoin

Définir le périmètre

Développer et vérifier

Préparer la suite

Un projet, une refonte, un audit de performance ? Signons le bon à tirer.