/zoonder-front

Vue 3 Tinder clone for animals. This project is used to make my students learn about Vue.js 3

Primary LanguageVue

Zoonder

L'application de rencontre de ta ferme !

Javascript Vue.js 3 Vite

L'application est hébérgée à l'adresse https://app.zoonder.grimille.fr

Prérequis

Installation

npm install

Compilation & mode développeur avec Hot-Reload

npm run dev

Compilation & minification pour la production

npm run build

Énoncé

Zoonder! L’appli de rencontre de ta ferme ! Mettez en pratiques toutes vos connaissances Vue.js pour développer cette application de rencontre pour animaux.

Étape 1 : Installations

Installer le projet Vue.js 3 ainsi que les plugins Vue router pour la navigation entre les pages, pinia pour la gestion dégroupée du state de l'application, et la librairie ohmyfetch pour la connexion à l'API.

Prévoir 3 pages :

  • La page de connexion
  • La page de swipe où les photos seront affichées
  • La page de récap qui montre les différents matchs

Étape 2 : La base HTML & le design system

Choisissez vos couleurs et commencez à construire les différentes pages de l'application. Pensez à créer un menu burger pour naviguer sur le site !

Étape 3 : Ajouter la réactivité

Ajoutez la réactivité entre les éléments, construisez-le cœur de l'application

Étape 4 : Améliorations

Améliorez votre code, re-factorisez les composants nécessaires, ajoutez des gardes-fous et des boîtes modales. L'utilisateur ne doit pas pouvoir intéragir avec l'application sans être connecté.