Des applications webpensées, codéeset mises en ligne.

Sven Greppin, développeur full-stack à Genève. Étudiant en informatique de gestion à la HEG et fondateur de Neosite.

Défiler

Projets

Ce que j'ai construit

Trois projets menés de bout en bout : une application web en production, mon activité de refonte de sites et une marque e-commerce.

En ligneApplication web, 2026

Hive met en relation les porteurs de projets avec les personnes qui ont les compétences pour les faire avancer : un club de foot du dimanche, un site web, ou une idée qui attend la bonne équipe.

On choisit ses centres d'intérêt en arrivant, on explore les projets proches sur une carte, on échange en direct avec le porteur du projet, ou on publie le sien en quelques minutes.

Fonctionnalités

  • Parcours de bienvenue en cinq étapes, qui se termine par un vol de la carte jusqu'aux projets proches
  • Carte interactive et liste des projets, filtrables par thème et par région
  • Demandes pour rejoindre un projet, acceptées ou refusées par son porteur
  • Messagerie en temps réel entre membres
  • Profils publics et évaluations entre utilisateurs
  • Connexion Google et GitHub, interface en français et en anglais, thème clair ou sombre

Recommandations

  • Les centres d'intérêt choisis à l'arrivée sont rapprochés des thèmes libres des projets par des mots-clés français et anglais
  • Un profil implicite est tiré des 10 derniers projets consultés : vecteurs de tags et similarité cosinus
  • Les deux scores sont combinés, sur les projets ouverts uniquement, et alimentent l'onglet « Pour toi »

Sécurité et exploitation

  • Authentification JWT, mots de passe hachés avec bcrypt
  • Réinitialisation du mot de passe par code envoyé par email
  • Helmet, limitation de débit et filtre de langage sur les contenus
  • Prometheus et Grafana : tableaux de bord backend, MongoDB et métier
  • Tests Jest et React Testing Library, environnement Docker Compose

Front-end

ReactReact RouterLeafleti18nextAxios

Back-end

Node.jsExpressMongoDBMongooseSocket.ioNodemailer

Infrastructure

RenderDockerPrometheusGrafanaWinston

Hive est l'évolution de Hatch, mon projet de diplôme, repensé et mis en production.

En ligneStudio de refonte, 2026

Neosite

Neosite refait les sites des commerces et entreprises de Genève. Derrière chaque refonte, un outil de production que j'ai conçu et développé : le même processus en onze étapes, avec des règles propres à chacune, pour livrer un niveau constant.

Le site neosite.tech en est la vitrine : on le fait défiler, et un vieux site de 2011 se fait réécrire sous nos yeux.

Comment une refonte est produite

Onze étapes, du diagnostic du site actuel à la proposition au client, et trois validations de ma part avant d'aller plus loin.

  1. 01
    Analyse

    Mesure Lighthouse du site actuel et inventaire de chaque contenu de confiance : avis, labels, horaires, tarifs.

  2. 02
    SEO

    Plan de référencement local : balises, structure des pages, données structurées.

  3. 03
    Design

    Trois directions visuelles, chacune appuyée sur de vrais sites de référence du secteur.

  4. Validation : je choisis la direction
  5. 04
    Motion

    Plan des photos animées et de leur budget, chiffré avant toute dépense.

  6. 05
    Textes

    Écrits à partir des vrais contenus du commerce. Rien n'est inventé : chaque doute est marqué « à vérifier ».

  7. Validation : budget accepté
  8. 06
    Images

    Uniquement les vraies photos du client, recadrées pour chaque emplacement. Aucune banque d'images.

  9. 07
    Premier écran

    Construit seul, avec les vrais contenus, avant tout le reste du site.

  10. Validation : premier écran approuvé
  11. 08
    Construction

    Assemblage à partir d'un kit de sections éprouvées, jusqu'à zéro erreur au contrôle automatique, testé dans le moteur de Safari.

  12. 09
    Critique design

    Relecture sur captures avec l'œil d'un directeur artistique, jusqu'à trois tours de corrections.

  13. 10
    Vérification

    Mesure et corrige jusqu'aux seuils : 90 en performance, 100 en SEO, accessibilité et bonnes pratiques.

  14. 11
    Proposition

    Captures du nouveau site et proposition au client, envoyée après ma relecture.

Sur chaque site

  • Infos pratiques visibles sur mobile sans chercher
  • Identité du commerce conservée
  • Rien d'inventé
  • Rien de perdu du site actuel
  • Pensé d'abord pour l'iPhone

Outil de production

Next.jsTypeScriptSQLitePlaywright

Sites livrés

GSAPLenisLighthouse

neosite.tech

ReactMotionVercel
En ligneMarque et boutique en ligne, 2026

Ma marque de vêtements de musculation, que je mène de bout en bout : de la production avec un fabricant en Chine jusqu'à sa boutique, enosis.shop, que j'ai conçue et développée moi-même en Hydrogen, le framework React de Shopify.

Shopify garde le catalogue, les stocks et le paiement ; tout ce que voit le client, des pages produit au compte client, est mon code, en quatre langues.

Production

  • Fabricant en Chine trouvé sur Made-in-China.com, choisi parce qu'il produit déjà pour de grandes marques
  • Échanges directs avec l'usine, à l'international, du premier contact à la commande
  • Une vraie production de qualité, pas du dropshipping
  • Coût de revient calculé pièce par pièce, emballage et envoi compris

Boutique sur mesure

  • Pages produit, collections filtrables, panier et recherche, branchés sur l'API Storefront de Shopify en GraphQL
  • Compte client : connexion, commandes, adresses et profil
  • Site en français, anglais, allemand et italien, une adresse par langue
  • Sitemap, robots.txt et pages légales générés depuis Shopify

Lancement

  • Drop 01 : liste d'attente avant la sortie, et « Me prévenir » sur chaque produit
  • Inscriptions envoyées à Shopify par l'API Admin, avec une étiquette par produit pour prévenir les bonnes personnes
  • 10 % sur la première commande contre l'inscription à la newsletter
  • Ensuite, TikTok avec des créateurs de la niche muscu et les premiers clients

Direction artistique

  • Une identité éditoriale sombre autour de la chouette, symbole de la marque
  • Défilement fluide (Lenis) et apparitions au défilement (GSAP), chargés seulement dans le navigateur
  • Typographie française soignée, jusqu'aux espaces insécables

Front-end

HydrogenReact RouterTypeScriptGraphQL

Commerce

ShopifyOxygen

Motion

GSAPLenis

D'autres projets arrivent.

Tous mes dépôts sur GitHub

Parcours

Qui je suis

Étudiant en informatique de gestion à la HEG Genève, je construis des applications web de bout en bout, du schéma de données jusqu'au monitoring en production.

J'ai terminé mon diplôme avec Hatch, une plateforme collaborative en stack MERN, que j'ai ensuite fait évoluer en Hive. En parallèle, j'ai lancé Neosite, une activité de refonte de sites pour les entreprises genevoises, et je développe Enosis, ma marque de vêtements : deux projets qui me confrontent au côté produit et commercial.

  1. Obtenu

    CFC en informatique

    CFPT Informatique, Genève

    Le point de départ : les fondamentaux du métier, appris sur le terrain.

  2. Obtenu

    Diplôme de technicien en informatique

    CFPT, Genève

    Projet de diplôme : Hatch, une plateforme collaborative en stack MERN, devenue Hive.

  3. En cours

    Bachelor en informatique de gestion

    HEG, Genève

    Entre développement logiciel, bases de données et gestion d'entreprise.

Stack technique

Les outils que je maîtrise

Du langage à la mise en production : ce que j'utilise pour concevoir, développer et déployer mes projets.

Langages

  • JavaScriptLangage du web
  • HTMLStructure des pages
  • CSSMise en forme
  • PHPBack-end web
  • C#Applications .NET
  • SQLBases relationnelles

Frameworks et données

  • ReactInterfaces
  • Node.jsServeurs et API
  • MongoDBBase NoSQL

Outils et mise en production

  • DockerConteneurs
  • GitVersionnement
  • PostmanTests d'API
  • PrometheusCollecte de métriques
  • GrafanaTableaux de bord

Un projet, un stage, une idée ?

Je suis ouvert aux opportunités à Genève et en Suisse romande. Le plus simple pour me joindre : LinkedIn.