Ce projet, PetgaHouse, a été développé pour aider les développeurs auto-apprenants comme moi à comprendre l'architecture complète d'une application web.
Il s'inspire entièrement du cours "TinyHouse, A Fullstack React Masterclass" de Newline.co
Ce repertoire porte la première partie qui visait à développer rapidement un POC(proof of concept), une démonstration de faisabilité.
Ce POC(proof of concept) se présente visuellement ainsi :
Et un travail est en cours pour l'application complète.
De plus, nous avons aussi commis une série de vidéos Youtube où tout est expliqué. Vous pouvez y jeter un coup d'oeil en cliquant sur l'image...
Pour ce POC, nous avons utilisé les technologies suivantes :
- React pour le front-end,
- Ant Design pour les composants React prêts à l'emploi,
- TypeScript pour sécuriser notre code,
- Apollo GraphQL pour notre API GraphQL,
- MongoDB Atlas pour notre base de données
L'architecture de cette démonstration de faisabilité se présente ainsi :
# cloner le repertoire
git clone https://github.com/epegase/petgahouse-client.git
# naviguer dans le root
cd petgahouse-client
# installer les dépendances
npm install
# lancer l'application en mode développement
npm startOuvrir http://localhost:3000 pour afficher l'application dans votre navigateur.
Il faut noter que vous aurez besoin de lancer aussi le back-end simultanément. Pour savoir comment lancer le serveur, cliquer ici petgahouse-server
Notre application, PetgaHouse, a été bootstrappée par "Create React App"
A la suite, en s'inspirant de la documentation, notamment de la page "Penser en React", nous avons suivi les étapes listées...
Après avoir testé notre maquette fonctionnellement, nous avons recouru à Ant-Design pour soigner l'aspect visuel de nos composants.
Vous pouvez visionner le développement du front-end à partir de la vidéo 26 de la playlist consacrée à ce tutoriel.
Ce tutoriel simple avait pour objectif de présenter rapidement l'architecture d'une application front-end et back-end, comment toutes les parties se tiennent pour former un ensemble.
Le prochain challenge est de concevoir l'application complète sensable au cours dont il s'inspire. Vous pouvez jeter un coup d'oeil et même tester cette application complète à cliquant ici : Tinyhouse.app