Dans le cadre de la modernisation de l'Onda, nous avons refondu le <a href='https://onda.fr/'>site internet</a> en utilisant le framework <a href='https://nextjs.org/'>Next.js</a>. Celui-ci est alimenté par le CMS headless Directus.

Refonte du site internet

Grâce à un système de blocs intégré dans <a href='https://directus.io/'>Directus</a>, l'équipe de l'Onda peut créer des pages sur-mesure. Les pages sont re-générées à la volée dès qu'une modification est effectuée dans le CMS.

Une gestion de contenu flexible

Une toute nouvelle plateforme a été développée pour les partenaires de l'Onda. Celle-ci permet de gérer les demandes de subventions ainsi que les invitations aux rencontres organisées par l'Onda.

Mon Espace Onda

Grâce au framework <a href='https://nextjs.org/'>Next.js</a>, nous avons pu créer un espace partenaire sur-mesure et s'interfacer avec l'API Rest du CMS <a href='https://directus.io/'>Directus</a>.

Un espace sur-mesure

La refonte de l'intranet propulsé par <a href='https://directus.io/'>Directus</a> 10 a permis de couvrir les nombreux workflows de l'Onda et fournir une interface simple et intuitive à son équipe.

L'intranet Onda

onda-website-1.png

Site internet Onda

onda-website-2.png

onda-meo-3.png

onda-meo-2.png

onda-intranet-2.png

L'Onda

L'application Web a été dévéloppé avec le framework <a href='https://nextjs.org/'>Next.js</a> couplée avec le CMS Headless <a href='https://strapi.io/'>Strapi</a>.

Application Web

L'aspect social d'Amalibri nécessitait une intégration native des notifications. Nous avons donc encapsulé la webapp en une application <a href='https://expo.io/'>Expo</a>, en y intégrant les notifications iOS. Cette stratégie a permis de respecter le budget du client.

Application Mobile

amalibri-screen-1.png

App Amalibri

amalibri-mobile-1.png

Amalibri

La base de code est ré-utilisable, l'objectif de Wishibam est de proposer celle-ci à d’autres centres commerciaux.

Application en marque blanche

L'application permet de consulter le catalogue de produits du centre commercial. Celle-ci est gérée par la librairie FlashList proposée par Shopify, permettant l'affichage d'un nombre important d'éléments sans perte de performance.

Catalogue de produits

Mise en place de Stripe pour gérer le tunnel de commande.

Tunnel de commande

wishibam_categories.png

Wishibam, catégories de produits

wishibam_produit.png

Wishibam, fiche produit

wishibam_village.png

Wishibam, the village

Wishibam

Mise en avant des produits catégorisés avec liste performante et paginées. Filtres de recherche avancés.

Catalogue

Gestion avancée de stock et panier client. Création et ajout de listes de courses. Gestion des services et abonnements: drive, livraison à domicile... 

Produits et panier ecommerce

Grâce au scan de code barre intégré, les produits Cora sont accessibles rapidement.

Scan de produit

login.png

Login

home.png

Home

filter.png

Filtres de recherche

cart.png

Panier

Cora Drive

L'application permet d'accéder à une sélection d'interviews, séries et tutoriels vidéos.

Un catalogue riche et accessible

Une interface aux couleurs du projet a été intégrée au-dessus du player vidéo. Avec gestion des sous-titres, contrôles de lecture avancés et chapitrage.

Un player vidéo personnalisé

L'ensemble du catalogue peut être téléchargé pour un visionnage hors ligne.

Des vidéos accessibles hors ligne

screen1.PNG

Écran d'accueil

screen2.PNG

Player vidéo

screen3.PNG

Écran téléchargements

screen4.PNG

Écrans mixeurs

Mix With The Masters

StudioD est une plateforme numérique de mise en relation simple et rapide. Elle permet aux compagnies chorégraphiques professionnelles de mettre à disposition des studios de danse vacants.

Plateforme solidaire

Grâce à la combinaison des frameworks Next.js et Strapi, nous avons pu développer une application Web sûr-mesure avec une gestion de contenu flexible.

Stack CMS headless

Le projet a été développé dans une démarche solidaire, dans cette optique l'intégralité du code source est disponible <a href="https://github.com/AtelierdeParis/studio-d">sur GitHub</a>.

Open-source

screen1.png

Studio D

screen2.png

screen3.png

L'application a été conçue pour simplifier la réservation de chambre d’hôtel en journée : intuitive, ergonomique et interactive. L’ensemble des informations pratiques d’un hôtel est disponible sur une seule page : prix, horaires, réservation.

Application performante

L'application permet d'accéder à une sélection de plus de 5 000 hôtels disponibles pour quelques heures en journée.

Une recherche rapide

Dayuse

screen5.PNG

React Native nous a permis de développer une application cross-plarform (Android et iOS). Elle offre aux candidats un onboarding rapide grâce à la connexion via de nombreux services (Google, Apple Connect, Linkedin…).

Cross-platform

Fournir des informations concernant son profil peut-être fastidieux : l'application propose des interfaces ergonomiques et adaptées rendant la tâche plus aisée.

Utilisation simplifiée

Actual

screen6.PNG

Les fonciers géolocalisés permettent d'offrir rapidement une vue d'ensemble à l'utilisateur. Celui-ci peut également chercher un foncier via une adresse, une ville ou un code postal. L'autocomplétion est effectuée avec l'API Mapbox.

Géolocalisation

L'utilisateur peut accéder aux informations clés d'un foncier. Une fiche parcelle propose plusieurs fonctionnalités parmi lesquelles nous retrouvons l'ajout de photos via caméra ou photothèque, la gestion des priorités et des dates de rappel.

Parcelle

L'utilisateur peut créer un projet en sélectionnant plusieurs parcelles via la carte interactive. Il peut également y ajouter des notes, des contacts et des photos à l'instar de la fiche parcelle.

Créer et gérer des projets

Chaque parcelle peut être ajoutée à la liste des favoris de l'utilisateur. La liste peut-être filtrer par mot-clé et trier selon différents critères tels que la date de mise en favoris, l'ordre de priorité, etc.

Gérer des favoris

Kel Foncier

screen4.png

Kel Foncier, liste des projets

screen7.png

Kel Foncier, effectuer une recherche

Kel Foncier, accès rapide

Concernant le module audio nous avons choisi de mettre en place <a href="https://github.com/react-native-kit/react-native-track-player" target="_blank" rel="noreferrer">React Native Track Player</a>. Celui-ci offre les fonctionnalités primaires telles que le lecture en arrière-plan, le contrôle audio via l'interface du téléphone, l'interruption automatique. Le tout gérer par un store redux.

Player audio

L'utilisateur peut choisir entre différents modes de connexion. À savoir email/password, Facebook Connect ou Google Connect. Pour ce faire nous avons mis en place les modules natifs <a href="https://developers.facebook.com/docs/react-native/login/" target="_blank" rel="noreferrer">Facebook Login for React Native et <a href="https://github.com/react-native-community/google-signin" target="_blank" rel="noreferrer"></a>Google Signin for your React Native

Connexion

Nous avons mis en place un workflow de déploiement simple et efficace à l'aide des outils <a href="https://docs.microsoft.com/en-us/appcenter/build/react-native/" target="_blank" rel="noreferrer">Appcenter</a>. Nous permettant de déployer soit sur les stores iOS et Android via Fastlane, soit de proposer aux utilisateurs une mise à jour dans l'interface de l'application directement via CodePush.

Déploiement via Fastlane & CodePush

Eeko Podcast, connexion

Eeko Podcast, timeline des podcasts

Eeko Podcast, présentation d'un épisode

Eeko Podcast, player audio de podcast

Eeko Podcast

Nous avons migré les différents outils de rédaction et de gestion de médias vers une seule plateforme nommée Storm. Cela a permis de simplifier les workflows de publication et de rédaction. Les journalistes peuvent ainsi se concentrer sur leur métier.

Migration

Nous avons développé un backoffice sûr-mesure pour l'équipe de 20 Minutes. En effet, les wokflows de publications sont complexes et impliquent de nombreux acteurs. La combinaison du framework Next.js et de GraphQL facilite la mise en place d'interfaces exigeantes.

Publication

Le framework Next.js a été utilisée pour développer la front du projet, tandis que la partie back a été réalisée avec la librairie NodeJS et GraphQL, le tout renforcé par l’utilisation de TypeScript afin de fiabiliser la base de code.

Stack moderne

L'aspect fonctionnel et reactive de React nous permet de développer des interfaces innovantes, offrant aux journalistes un rendu très proche de celui en ligne : pas de mauvaises surprises lors de la publication.

Rédaction

ORPI Around Me, choisissez votre projet

ORPI Around Me, localisation des biens disponibles

20 minutes

La géolocalisation se place au centre de l'application et permet de rompre avec les vieilles pratiques immobilières. L'utilisateur est informé de l'emplacement de chaque bien et est notifié des nouveaux biens ajoutés sur le marché.

L'utilisateur peut créer des alertes immobilières afin de recevoir des notifications push ou email en temps réel grâce à la mise en place de OneSignal, un module cross-platform de notification push.

Alerte en temps réel

ORPI Around Me, détail d'un bien

ORPI Around Me, créez votre alerte

ORPI Around Me

Le contenu Mediapart est disponible hors connexion grâce à la mise en place d'un système de cache performant développé par nos soins au sein de l'application.

Consulter hors connexion

Mediapart est un journal indépendant et financé uniquement par ses abonnements. Afin de faciliter ces derniers, nous avons mis en place une solution in-app purchases afin de permettre aux utilisateurs de s'abonner directement à travers l'application.

In-app purchase via iTunes

mediapart_lejournal.jpg

Mediapart, liste d'articles le Journal

mediapart_leclub.jpg

Mediapart, liste d'articles le Club

mediapart_fil-actualites.jpg

Mediapart, liste d'articles le fil d'actualités

mediapart_lestudio.jpg

Mediapart, liste de vidéo le Studio

Mediapart

Le catalogue géolocalisé permet d'offrir à l'utilisateur des recommandations pertinentes et de garantir la proximité des produits, afin qu'ils soient livrés en moins de 30 minutes.

Catalogue géolocalisé

L'utilisateur peut suivre l'avancement de sa livraison ainsi que la position du livreur qui lui est assigné en temps réel, grâce à la mise en place des APIs de tracking Onfleet.

Dernier projet

Réalisations

Ils nous font confiance