Mangor

La création d’un side-project :

L’objectif principal de ce projet de fin d’année est de mettre en avant nos compétences en web. Ce projet personnel est impératif dans notre démarche de recherche de stage pour l’année prochaine. 

Mon projet commence par une réflexion autour d'une de mes passions, à savoir les mangas. Je réfléchis au projet : est-ce que je fais un petit jeu ou une application ? En tout cas, quelque chose qui demande de la programmation, car je me dirige vers du back-end. C’est ce qui m'épanouit le plus dans le web !

Le problème

Un problème majeur s’est vite déclaré. Pour que ça fonctionne bien et mettre en pratique mon idée d’envoi d’une série aléatoire je dois faire un système de comptes et pour cela, je dois faire du PHP. Or, je n’ai pas encore les connaissances nécessaires à la création de ce projet. Ca remet en doute l’idée de celui-ci… Mais je continue !

La solution

À chaque problème sa solution ! Je modifie quelque peu mon idée et je me concentre sur un questionnaire qui permet, au bout de quelques réponses, de recevoir une recommandation d’un manga à découvrir. Au lieu de proposer une série aléatoire, je proposerai à l’utilisateur, un manga à lire selon les réponses données . Il est basé sur une liste présélectionnée de genres qui sera renvoyé pour trier un json. 

Voilà mon sujet choisi, je commence par faire une liste des mots-clefs que je vais utiliser pour lister les différents mangas. Je commence avec une petite liste, puis je l'agrandirai au besoin. 

Ensuite, je crée les questions de bases, qui serviront à réaliser par la suite le design. 

Identité visuelle

Une fois le contenu rédigé, je peux désormais mettre en style mon projet grâce à la mise en forme. Je souhaite réaliser un design épuré. Je m’inspire sur pinterest, awwwards, dribbble. 

Couleurs

J’ai choisi en plus du blanc, la couleur rouge et le bleu foncé. Le rouge amène du dynamisme et le bleu foncé donne une impression de sérieux et de paisiblilité. Cela forme une jolie harmonie avec le blanc. 

Typographie

Mes recherches typographiques ont abouti à l’utilisation des fonts “ Cabin Sans ” pour les titres et “ PT Sans ” pour le corps du texte, avec un ratio de 1.414, une taille de corps de base a 18px et un interlignage de 160%. 

Le dévellopement

L’API que j’utilise dispose d’une base de donnée d’à peu près 11 000 mangas ( à l’heure où j’écris ces lignes ) Il me paraît clair que je ne peux pas me permettre d’exploiter toutes ces données sans les héberger moi-même, étant limité par le nombre d’appels par minute assez bas. J’ai donc décidé de préparer une liste prédéfinie de mangas, pour avoir moins de données à travailler pour le développement. 

Je commence à rédiger des questions, qui auraient chacune un genre attribué ( science fiction, fantasy, survie,… ) pour avoir une idée de ce que je vais proposer comme mangas. 

Pour éviter un html un peu trop brouillon, j’ai mis toutes les questions / réponses dans un json que je charge au lancement de la page qui se change et s’adapte au fur et a mesure que répond au questionnaire. 

Je développe aussi une page par défaut qui permet, au cas où il y aurait un problème quelque part dans le processus, de faire comprendre à l’utilisateur qu’il y a une chose qui s’est mal passée. 

Une fois le développement de base terminé, je m’occupe d’agrandir la base de données de mangas que je possède. 

Code

Ce que j’en retiens

Je termine mon projet en rédigeant les pages about et case study de mon site, ainsi qu’en appliquant toute la microtypographie ( ajouter les espaces insécables, bons signes, etc ). 

Je suis assez satisfait du résultat de mon application. Celle-ci va permettre aux personnes désirant se lancer dans la lecture d’un manga, de pouvoir trouver celui qui lui correspond le mieux en fonction de ce qu’il préfère comme genre de lecture. J’ai certes rencontré quelques difficultés lors de l’élaboration mais je pense avoir pu les dépasser par quelques modifications. 

Intéressés par mon application? Je vous invite à l’essayer !

Vers l'application