CHIMY

scénario

Une simple Chatbox permettant de se connecter avec google ou un email/password. Ce projet a été fait pour voir l'intégration de Firebase ainsi que son système de connexion au sein d'une application faite avec React. L'autre objectif de ce projet est de tester Tailwind CSS.

contraintes

• Pouvoir se connecter avec un compte google.
• Être responsive
• N'afficher que les 10 derniers messages
• Utilisation de Tailwind css pour le design.

scénario

Vous venez de vous lancer en tant que développeur web freelance et un client potentiel vous contacte sur LinkedIn. Celui-ci à besoin d'une personne avec de solides compétences en HTML et CSS. Vous décidez de mettre à jour votre CV en HTML et CSS en prenant un model prédéfini et de le publier sur GitHub pages. Vous prendrez bien-sur le soin de la personnaliser.

contraintes

• Votre site doit-être accessible en toute circonstance, depuis n'importe quel appareil, donc avoir un affichage responsive.
• Personnaliser votre CV pour qu'il vous corresponde en utilisant les couleurs Material Design et les icons Font Awesome
• Vous devez réaliser ce projet avec HTML et CSS sans utiliser de framework
• Votre code ne doit contenir aucune erreur ni alerte au validateur HTML et CSS.

scénario

Vous venez d’être recruté chez Ohmyfood!, en tant que développeur junior. Félicitations ! Ohmyfood! est une jeune startup qui voudrait s'imposer sur le marché de la restauration. L'objectif est de développer un site qui répertorie les menus des plus grands restaurants new-yorkais. En plus des systèmes classiques de réservation, les clients pourront composer le menu de leur repas pour que les plats soient prêts à leur arrivée. Finis, les temps d'attente au restaurant ! Le site contiendra 4 menus dans un premier temps.

contraintes

• Le développement devra se faire en CSS.
• L’ensemble du site devra être responsive.
• Le page HTML devra passer la validation w3c sans erreur.
• Aucun framework ne devra être utilisé.
• Le code CSS passe la validation w3c CSS.
• Des règles CSS @media et/ou des feuilles de styles dédiées identifiées par un attribut media doivent être utilisées.
• Aucun code CSS ne devra être appliqué via un attribut style dans une balise HTML.
• Le site doit être parfaitement compatible avec les dernières versions desktop de Chrome, Firefox et Safari.
• L'intégration d'images issues des maquettes ne sera pas acceptée : vous devez recréer les éléments de zéro (titres, texte...).

livrables attendus

scénario

Vous travaillez pour La chouette agence, une grande agence de web design basée à Lyon. L’activité de l’entreprise a bien démarré mais aujourd’hui, elle est en perte de vitesse. Eh oui, la concurrence est rude. La fondatrice de l’entreprise, Sophie, cherche une solution pour faire repartir l’activité. En tapant “Entreprise web design Lyon” sur Internet, elle s’aperçoit que le site de l’agence apparaît seulement en deuxième page des moteurs de recherche. Par chance, un de vos collègues, Martin, lui a dit que vous étiez un spécialiste en référencement.

• Analyse de l’état actuel de SEO du site fourni:
  • Indiquer les parties du site qui ne sont pas optimisées pour le SEO et/ou qui ne sont pas à jour en termes d’accessibilité, et que tu justifies tes choix.
  • Ajouter la bonne pratique à mettre en place pour chaque partie du site qui n’est pas optimisée
  • Donner 10 recommandations pour améliorer le site.
  • Régler les problèmes d'accessibilité.

• Amélioration du SEO du site:
  • Optimiser notre site en appliquant tes 10 recommandations à son contenu et à son code source.
  • Le site doit passer le W3C pour HTML et CSS.

• Comparaison des résultats:
  • Vitesse de chargement des pages du site.
  • Fourni dans un rapport d’optimisation.

contraintes

• Tous ces éléments devront être codés en HTML et CSS.
• Le site doit rester responsive

scénario

Félicitations ! Vous avez été recruté en tant que développeur front-end par Orinoco, une entreprise de commerce en ligne. Vous allez Créer un MVP pour démontrer le fonctionnement de ses applications à ses investisseurs. L’équipe est constituée de Jeanne, développeuse back-end travaillant sur les API et vous, pour la partie front-end.

Architecture générale

• L’application web sera composée de 4 pages :
  • Une page de vue sous forme de liste, montrant tous les articles disponibles à la vente.
  • Une page “produit”, qui affiche de manière dynamique l'élément sélectionné par l'utilisateur et lui permet de personnaliser le produit et de l'ajouter à son panier.
  • Une page “panier” contenant un résumé des produits dans le panier, le prix total et un formulaire permettant de passer une commande. Les données du formulaire doivent être correctes et bien formatées avant d'être renvoyées au back-end. Par exemple, pas de texte dans les champs date.
  • Une page de confirmation de commande, remerciant l'utilisateur pour sa commande, et indiquant le prix total et l'identifiant de commande envoyé par le serveur.

contraintes

• Pour le MVP, la personnalisation du produit ne sera pas fonctionnelle : la page contenant un seul article aura un menu déroulant permettant à l'utilisateur de choisir une option de personnalisation, mais celle-ci ne sera ni envoyée au serveur ni reflétée dans la réponse du serveur.
• Le code source devra être indenté et utiliser des commentaires. Il devra également utiliser des fonctions globales.
• Concernant l’API, des promesses devront être utilisées pour éviter les rappels.
• Les inputs des utilisateurs doivent être validés avant l’envoi à l’API.

scénario

Vous êtes développeur backend freelance et vous travaillez depuis quelques années sur des projets web pour des startups ou des grandes entreprises. La semaine dernière, vous avez reçu un mail vous proposant un nouveau projet. L’entreprise souhaite désormais développer une application d’évaluation de ses sauces piquantes, appelée “Piquante”. Même si l’application deviendra peut-être un magasin en ligne dans un futur proche, Sophie, la product owner de So Pekocko, a décidé que le MVP du projet sera une application web permettant aux utilisateurs d’ajouter leurs sauces préférées et de liker ou disliker les sauces ajoutées par les autres utilisateurs.

contraintes

• Utiliser les bonnes pratiques de l'OWASP pour sécuriser l'API
• Les données utilisateur doivent être protégées côté API et base de donnée grâce à des méthodes de masquage.
• Projet hébergé par un serveur Node.js.
• Base de données sous MongoDB et utilisation du framework Express.
• Utiliser un plugin Mongoose pour signaler toute erreur de la base de données.
• Sécurité:
  • L’API doit respecter le RGPD et les standards OWASP.
  • Le mot de passe des utilisateurs doit être chiffré.
  • 2 types de droits administrateur à la base de données doivent être définis : un accès pour supprimer ou modifier des tables, et un accès pour éditer le contenu de la base de données.
  • La sécurité de la base de données MongoDB (à partir d’un service tel que MongoDB Atlas) doit être faite de telle sorte que le validateur puisse lancer l’application depuis sa machine.
  • L’authentification est renforcée sur les routes requises.
  • Les mots de passe sont stockés de manière sécurisée.
  • Les adresses mails de la base de données sont uniques et un plugin Mongoose approprié est utilisé pour s’assurer de leur caractère unique et rapporter des erreurs.
  • Toutes les routes relatives à la sauce doivent exiger une demande authentifiée (contenant un jeton valide dans son en-tête d'autorisation).
  • Toutes les opérations de la base de données doivent utiliser le pack Mongoose avec des schémas de données stricts.

scénario

Vous êtes développeur depuis plus d'un an chez CONNECT-E, une petite agence web regroupant une douzaine d'employés. Le projet consiste à construire un réseau social interne pour les employés de Groupomania. Le but de cet outil est de faciliter les interactions entre collègues. Le département RH de Groupomania a laissé libre cours à son imagination pour les fonctionnalités du réseau et a imaginé plusieurs briques pour favoriser les échanges entre collègues. Ils veulent que les employés écrivent et / ou partagent des articles avec leurs collègues sur des sujets qui les intéressent.

contraintes

• Le client utilise une base de données relationnelles qui se manipule avec le langage SQL pour le stockage de données.
• La web app puisse se connecter et se déconnecter à l’application et que la session de l’utilisateur persiste pendant qu’il est connecté.
• Le projet doit être codé en Javascript
• Les pages devront respecter les standards WCAG.
• La présentation des fonctionnalités doit être simple.
• La création d’un compte doit être simple et possible depuis un téléphone mobile.
• Le profil doit contenir très peu d’informations pour que sa complétion soit rapide ; la suppression du compte doit être possible.
• L’accès à un forum où les salariés publient des textes doit être présent.
• Les utilisateurs doivent pouvoir facilement repérer les dernières participations des employés.
• Le ou la chargé-e de communication Groupomania doit pouvoir modérer les interactions entre le ou la chargé-e de communication Groupomania doit pouvoir afficher les dernières participations des employés salariés .