Une Progressive Web App (PWA) minimaliste qui reproduit l’expérience d’un petit réseau social fictif.
Ce projet a été conçu pour démontrer les capacités d’une PWA moderne (installation, offline, responsive) avec un code simple et lisible.

Voir la démo sur Netlify

Une Progressive Web App (PWA) est une application web qui combine le meilleur du web et du mobile :

• ✅ Installable : ajoutée à l’écran d’accueil (mobile ou desktop), comme une vraie app.
• ✅ Offline : accessible même sans connexion (via Service Worker + cache).
• ✅ Rapide & responsive : pensée mobile-first, s’adapte à tous les écrans.
• ✅ Sécurisée : servie via HTTPS.

Elle peut servir à simuler le comportement d'une application native dans le cadre d'une maquette interactive.

Ressources utiles :

• Introduction aux PWA (MDN)
• PWA: The Complete Guide (Web.dev)

• Vite — bundler ultra-rapide
• Tailwind CSS v4 — utilitaires pour le style
• Preline UI — composants UI accessibles
• vite-plugin-pwa — génération du Service Worker et du cache Workbox

• Node.js (v18+ recommandé, v22 utilisée ici)
• npm ou pnpm

# 1. Cloner le dépôt
git clone https://github.com/julienborgeon/social-pwa-skeleton.git
cd social-pwa-skeleton

# 2. Installer les dépendances
npm install

# 3. Lancer le serveur de développement
npm run dev

# 4. Builder pour la production
npm run build
npm run preview

└── 📁social-pwa-skeleton
    └── 📁.vscode
        ├── settings.json
    └── 📁public
        └── 📁icons
            ├── apple-touch-icon.png
            ├── favicon-96x96.png
            ├── favicon.ico
            ├── favicon.svg
            ├── icon-192.png
            ├── icon-512.png
            ├── icon-96.png
            ├── logo.svg
            ├── maskable-192.png
            ├── maskable-512.png
            ├── monochrome-icon.svg
        └── 📁screenshots
            ├── home-narrow.png
            ├── home-wide.png
        ├── manifest.webmanifest
        ├── offline.html
    └── 📁src
        ├── components.ts
        ├── main.ts
        ├── router.ts
        ├── styles.css
    ├── .gitignore
    ├── .prettierrc
    ├── index.html
    ├── netlify.toml
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── README.md
    ├── tsconfig.json
    └── vite.config.ts

• Page d'accueil avec branding et bouton "Installer" —> installe une icône sur le bureau (mobile) qui permet d'ouvrir la PWA.
• Navigation relationnelle entre Feed, Search, Profile et Post Detail —> possibité de fluidifié les transitions de vue.
• Skeletons lors du chargement pour une meilleure UX —> simulation dans la version actuelle (draft).
• Offline : index.html et ressources principales restent accessibles sans réseau —> ressources précachées seulement.

• Progressive web apps
• What PWA Can Do Today
• Helping developers build and publish PWAs

Projet développé par Julien Borgeon — freelance front-end.

Objectif : fournir un exemple pédagogique de PWA installable et responsive.

www.julienborgeon.fr