Plannr, une application
pour organiser ses sorties
- Projet
- Plannr
- Type
- Application web sociale
- Cadre
- Projet de l’ISEP
- Prestations
- Identité, maquettes, développement
Le projet
Organiser une sortie ne devrait pas être un casse-tête, et pourtant beaucoup de gens ont envie de partager une activité sans trouver d’outil vraiment fait pour ça, parce que les réseaux sociaux servent plutôt à publier qu’à planifier.
Plannr est né de ce constat, pendant un projet de développement web à l’ISEP, et nous l’avons mené de la première idée jusqu’à l’application en ligne, avec notre groupe.
Découvrir PlannrEn six lots
Nous avons découpé le projet en six lots, et chacun se terminait par quelque chose que nous pouvions montrer.
Lot 1, Analyse
Lecture du sujet, choix du périmètre et premiers wireframes sur Figma.
Lot 2, Design
L’identité visuelle, la palette, les maquettes finales et le schéma de navigation.
Lot 3, Back-end
Le noyau PHP fait maison, la base de données, l’API, la connexion et l’envoi d’images.
Lot 4, Front-end
L’intégration en Tailwind, les composants, les pages, la messagerie et la navigation sur mobile.
Lot 5, Tests
Les tests, les vérifications RGPD, puis la mise en ligne derrière Nginx et Cloudflare.
Lot 6, Livraison
Le manuel utilisateur, la documentation technique et une démonstration en direct.
L’identité
Plannr devait donner envie de sortir, alors nous lui avons donné une identité chaleureuse, avec des jaunes orangés et une police de titre qui a l’air dessinée à la main, et un texte qui reste très lisible à côté.
- Titres
- Chewy, joyeuse et expressive
- Texte
- Albert Sans, sobre et très lisible
Du wireframe à la maquette
Nous commençons toujours par des wireframes, de simples blocs gris qui disent où va chaque chose et comment on passe d’un écran à l’autre. Comme ils sont rapides à refaire, nous corrigeons le parcours tôt, puis nous les habillons avec la charte pour obtenir les maquettes finales. Faites glisser la poignée pour passer de l’un à l’autre.
La technique
Le projet imposait PHP, et nous en avons fait un avantage en écrivant notre propre noyau, sans framework : les routes se déduisent automatiquement des dossiers, et chaque requête passe par les mêmes protections, des en-têtes de sécurité jusqu’aux jetons contre les fausses requêtes.
La messagerie et les notifications arrivent en direct grâce à un serveur WebSocket, et Redis fait passer les messages entre lui et l’application.
L’école nous imposait un langage, PHP, et plutôt que de prendre une base toute faite, nous avons écrit nous-mêmes le cœur de l’application. Chaque nouvelle page reçoit donc automatiquement son adresse, et chaque visite passe par les mêmes contrôles de sécurité, ce qui empêche par exemple quelqu’un d’agir à votre place.
Les messages et les notifications arrivent sans qu’on ait à recharger la page, comme dans une vraie messagerie, parce que l’application garde une ligne ouverte avec chaque téléphone.
Pensée d’abord pour le téléphone
Créer une sortie ou s’y inscrire doit se faire en quelques secondes, alors nous avons dessiné la version mobile en premier, puis nous l’avons élargie pour l’ordinateur.
La connexion à Plannr sur téléphone L’accueil de Plannr sur téléphone Un profil sur Plannr
Ce que nous avons construit
Chaque élément a été dessiné une fois dans Figma, avec ses états, puis réutilisé partout dans l’application.
Le fil d’activités
Un fil « Pour toi » et un fil des abonnements, qui distinguent les petits groupes des grands événements.
Les sorties
Un lieu, une date, des places et une liste d’attente, en entrée libre ou sur invitation, gratuite ou payante.
La messagerie
Des messages chiffrés en temps réel, et un groupe créé automatiquement pour chaque activité.
Le calendrier
Toutes ses sorties du mois d’un coup d’œil, jour par jour.
La recherche
Par mot, par catégorie, par date ou autour de soi, dans le rayon qu’on choisit.
Le profil
Quand deux personnes se suivent, elles deviennent amies et peuvent s’écrire.
Le RGPD
Chacun peut télécharger ou effacer ses données en un geste.
Lancer votre projet
Une application à construire ? Parlez-nous de votre idée, nous vous répondons avec un devis clair.