Mehdi Ali Benyahia
2 min readDec 7, 2020

Hey ! Prêt pour continuer notre projet avec VueJS ? Let’s go !

La dernière fois, nous avons vu ce qu’était VueJS, nous avons parlé du projet et d’Instagram.

Je vais vous parler d’Instagram plus en détails et plus particulièrement de cette petite barre en bas de notre écran facilement accessible.

En premier, il y a l’accueil la première page sur laquelle on est lorsque l’on lance l’application, cette page d’accueil est un fil d’actualités sur lequel on voit :

- les posts des personnes à qui nous sommes abonné

- la légende que l’auteur du post à écrit

- les commentaires en dessous des posts

- les « j’aime »

-le bouton en haut à droite pour accéder à nos messages privés

Quelles fonctionnalités nous allons reproduire ? Toute ! Eh oui toutes les fonctionnalités du fil d’actualité.

Ensuite, il y a les reels qui sont globalement semblable au fil d’actualité, mais nous voyons les posts en fonction de nos centres d’intérêt et non par rapport à nos abonnements !

La troisième petite icône est très intéressante, car c’est dans cette page que nous pourrons ajouter des images ou des vidéos, sois prise avec l’appareil photo, soit ajouté depuis la pellicule de notre téléphone.

Cette fonctionnalité est l’une des plus importants car sans ça… Pas de contenu !

L’icône en forme de cœur est l’endroit où vous recevez toutes vos notifications (sauf vos messages privés).

Ensuite (petite photo de profil bg merci, mais ce n’est pas moi.) il y a notre profil ou nous pouvons voir tous nos posts, nos abonnés et abonnement.

Petit récapitulatif sur ce que nous allons essayer de faire :

- Un fil d’actualité avec l’affichage des posts + légendes + commentaires + les j’aime

- Des messages privés

- Un ajout d’image via l’appareil photo ou la pellicule de notre téléphone

- Les notifications push

- Notre profil où nous voyons nos photos

C’est génial nan ?

Donc, dans le prochain article, nous commençons le projet. Au niveau technique, nous verrons comment créer nos premières pages et on va commencer à développer notre site !