Said

5 kyu

4 kyu

Front-end

nextjs.svg

---
title: Export GitHub Stars
date: 2018
github: LadghemSaid/popweb
url: https://github.com/LadghemSaid/popweb
tags:
  - UI/UX
  - Front-End
  - API
stack:
  - Vue.js
  - Vuetify
---

## Concept

Export GitHub Stars est un petit utilitaire qui a été crée dans le but d'analyser et de voir ses dépôts mis en favoris.

## Problème

Je souhaitais pouvoir trier et analyser mes dépôts favoris pour pouvoir les retrouver facilement (par langages notamment).
De plus suite au rachat de GitHub par Microsoft, l'outil peut être utilisé pour exporter tous les dépôts favoris, cela peut être utile notamment si l'utilisateur souhaite supprimer son compte.

## Solution

Une simple application web qui récupère les données de l'utilisateur GitHub et affiche les dépôts en les mettant en forme.

### Fonctionnalités

#### Trier

Possibilité de trier tous les dépôts par :

- Date
- Langages
- Stars (ascendant)
- Stars (descendant)

![sort](/projects/export-github-stars/sort.gif)

#### Exporter en tant que fichier

Il est également possible d'exporter tous vos dépôts mis en favoris, cela peut être utile notamment lorsque vous souhaitez supprimer votre compte GitHub et conserver votre liste de dépôts favoris pour plus tard.

![export](/projects/export-github-stars/export.gif)

### Choix des technologies

#### Vue.js

[Vue.js](https://vuejs.org/) a été mon choix par défaut après avoir récemment appris cette technologie à ce moment là. Il était donc mon choix par défaut pour développer une application web orienté composants.

### UI/UX

L'application a été développé avec Vue.js ce qui m'a permit d'utiliser l'excellent framework [Vuetify](https://vuetifyjs.com/), et donc d'appliquer le design system de Google : le [Material Design](https://material.io/).

#### L'interface

L'application web ne comporte qu'une seule vue :

![homepage](/projects/export-github-stars/home.png)

La principale action à réaliser est de rentrer son nom d'utilisateur dans le champ de recherche centré pour obtenir les données par la suite.

![search](/projects/export-github-stars/search.gif)

Après avoir entré un nom d'utilisateur, l'application va afficher tous les dépôts favoris.

Un dépôt est sous representé sous forme d'une entrée de datalist/ligne et présente plusieurs informations cruciales :

- Le nom du dépôt (author/name)
- Le nombre d'étoiles que le dépôt possède
- Le langage principal du dépôt
  - Présent en tant que sous-titre
  - Et également sous forme de bordure coloré autour de l'avatar de l'auteur du dépôt

large_1597842403336.jfif

medium_1597842403336.jfif

small_1597842403336.jfif

thumbnail_1597842403336.jfif

1597842403336.jfif

Projets 3

Next JS

react-native.svg

React

Backend

small_https://symfony.com/logos/symfony_black_03.png

thumbnail_https://symfony.com/logos/symfony_black_03.png

https://symfony.com/logos/symfony_black_03.png

Symfony

DÉPLOIEMENT

large_https://www.docker.com/sites/default/files/d8/2019-07/horizontal-logo-monochromatic-white.png

medium_https://www.docker.com/sites/default/files/d8/2019-07/horizontal-logo-monochromatic-white.png

small_https://www.docker.com/sites/default/files/d8/2019-07/horizontal-logo-monochromatic-white.png

thumbnail_https://www.docker.com/sites/default/files/d8/2019-07/horizontal-logo-monochromatic-white.png

https://www.docker.com/sites/default/files/d8/2019-07/horizontal-logo-monochromatic-white.png

DOCKER/SWARM/REGISTRY

thumbnail_https://img.icons8.com/color/452/mongodb.png

https://img.icons8.com/color/452/mongodb.png

Mongo DB

large_https://d2zv2ciw0ln4h1.cloudfront.net/uploads/logo-strapi-black-blue.png_71430fb155.png

medium_https://d2zv2ciw0ln4h1.cloudfront.net/uploads/logo-strapi-black-blue.png_71430fb155.png

small_https://d2zv2ciw0ln4h1.cloudfront.net/uploads/logo-strapi-black-blue.png_71430fb155.png

thumbnail_https://d2zv2ciw0ln4h1.cloudfront.net/uploads/logo-strapi-black-blue.png_71430fb155.png

https://d2zv2ciw0ln4h1.cloudfront.net/uploads/logo-strapi-black-blue.png_71430fb155.png

Strapi

large_https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Directus_Color_Logo_Vector.svg/1200px-Directus_Color_Logo_Vector.svg.png

medium_https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Directus_Color_Logo_Vector.svg/1200px-Directus_Color_Logo_Vector.svg.png

small_https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Directus_Color_Logo_Vector.svg/1200px-Directus_Color_Logo_Vector.svg.png

thumbnail_https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Directus_Color_Logo_Vector.svg/1200px-Directus_Color_Logo_Vector.svg.png

https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Directus_Color_Logo_Vector.svg/1200px-Directus_Color_Logo_Vector.svg.png

Directus

SERVICES/CLOUD

large_https://snipcart.com/media/204426/snipcart-logo.png

medium_https://snipcart.com/media/204426/snipcart-logo.png

small_https://snipcart.com/media/204426/snipcart-logo.png

thumbnail_https://snipcart.com/media/204426/snipcart-logo.png

https://snipcart.com/media/204426/snipcart-logo.png

Snipcart

small_https://image.flaticon.com/icons/png/512/59/59137.png

thumbnail_https://image.flaticon.com/icons/png/512/59/59137.png

https://image.flaticon.com/icons/png/512/59/59137.png

Wordpress

small_https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magento_Logo.svg/512px-Magento_Logo.svg.png

thumbnail_https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magento_Logo.svg/512px-Magento_Logo.svg.png

https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magento_Logo.svg/512px-Magento_Logo.svg.png

Magento 2.4

thumbnail_https://upload.wikimedia.org/wikipedia/fr/7/7d/Prestashop-logo.png

https://upload.wikimedia.org/wikipedia/fr/7/7d/Prestashop-logo.png

Prestashop

git.svg

gatsby.svg

Gatsby

mysql.svg

MYSQL

typescript.svg

TypeScript

sass.svg

Sass

stripe.svg

Stripe

graphql.svg

Graphql

webpack.svg

Webpack

nodejs.svg

Node JS

MONITORING

thumbnail_https://pbs.twimg.com/media/EYyhuorWAAEj9-D.png

https://pbs.twimg.com/media/EYyhuorWAAEj9-D.png

Grafana

small_https://www.gend.co/hs-fs/hubfs/gcp-logo-cloud.png?width=730&name=gcp-logo-cloud.png

thumbnail_https://www.gend.co/hs-fs/hubfs/gcp-logo-cloud.png?width=730&name=gcp-logo-cloud.png

https://www.gend.co/hs-fs/hubfs/gcp-logo-cloud.png?width=730&name=gcp-logo-cloud.png

large_https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Logo-OVH.svg/1280px-Logo-OVH.svg.png

medium_https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Logo-OVH.svg/1280px-Logo-OVH.svg.png

small_https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Logo-OVH.svg/1280px-Logo-OVH.svg.png

thumbnail_https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Logo-OVH.svg/1280px-Logo-OVH.svg.png

https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Logo-OVH.svg/1280px-Logo-OVH.svg.png

thumbnail_ducatillon_logo_site-c.png

ducatillon_logo_site-c.png

Ducatillon

large_https://www.ville-dunkerque.fr/fileadmin/user_upload/DK_logo.png

medium_https://www.ville-dunkerque.fr/fileadmin/user_upload/DK_logo.png

small_https://www.ville-dunkerque.fr/fileadmin/user_upload/DK_logo.png

thumbnail_https://www.ville-dunkerque.fr/fileadmin/user_upload/DK_logo.png

https://www.ville-dunkerque.fr/fileadmin/user_upload/DK_logo.png

Ville de Dunkerque

https://www.vilogia-premium.fr/front/images/new-logo.png

Vilogia Premium

small_logo_transparent.png

thumbnail_logo_transparent.png

logo_transparent.png

La Maryse

TEST

thumbnail_puppeteer.png

puppeteer.png

Puppeteer

large_mocha.png

medium_mocha.png

small_mocha.png

thumbnail_mocha.png

mocha.png

Mocha

cloudflare.svg

Cloudflare

thumbnail_https://sysadmin.cyklodev.com/wp-content/uploads/2019/07/icinga2.png

https://sysadmin.cyklodev.com/wp-content/uploads/2019/07/icinga2.png

Icinga

small_sentry_logo_icon_144898.png

thumbnail_sentry_logo_icon_144898.png

sentry_logo_icon_144898.png

Sentry

Heroku

thumbnail_https://avatars.githubusercontent.com/u/22225832?s=400&v=4

https://avatars.githubusercontent.com/u/22225832?s=400&v=4

Portainer

thumbnail_https://pbs.twimg.com/profile_images/1252525888710873088/CBm5_MB7_400x400.jpg

https://pbs.twimg.com/profile_images/1252525888710873088/CBm5_MB7_400x400.jpg

Vercel

large_https://user-images.githubusercontent.com/3639577/64283947-c1fa7880-cf58-11e9-8699-ca8efcfe17ec.png

medium_https://user-images.githubusercontent.com/3639577/64283947-c1fa7880-cf58-11e9-8699-ca8efcfe17ec.png

small_https://user-images.githubusercontent.com/3639577/64283947-c1fa7880-cf58-11e9-8699-ca8efcfe17ec.png

thumbnail_https://user-images.githubusercontent.com/3639577/64283947-c1fa7880-cf58-11e9-8699-ca8efcfe17ec.png

https://user-images.githubusercontent.com/3639577/64283947-c1fa7880-cf58-11e9-8699-ca8efcfe17ec.png

Borg

large_logo.png

medium_logo.png

small_logo.png

thumbnail_logo.png

logo.png

Watchtower

large_https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/GitLab_Logo.svg/1200px-GitLab_Logo.svg.png

medium_https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/GitLab_Logo.svg/1200px-GitLab_Logo.svg.png

small_https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/GitLab_Logo.svg/1200px-GitLab_Logo.svg.png

thumbnail_https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/GitLab_Logo.svg/1200px-GitLab_Logo.svg.png

https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/GitLab_Logo.svg/1200px-GitLab_Logo.svg.png

Gitlab CI

small_SL_LOGO.jpg

thumbnail_SL_LOGO.jpg

SL_LOGO.jpg

thumbnail_https://codingthesmartway.com/wp-content/uploads/2019/02/gatsby-logo.png

https://codingthesmartway.com/wp-content/uploads/2019/02/gatsby-logo.png

next-js.svg

reactjs.svg

React 

medium_https://codingthesmartway.com/wp-content/uploads/2020/05/strapi-logo.jpg

small_https://codingthesmartway.com/wp-content/uploads/2020/05/strapi-logo.jpg

thumbnail_https://codingthesmartway.com/wp-content/uploads/2020/05/strapi-logo.jpg

https://codingthesmartway.com/wp-content/uploads/2020/05/strapi-logo.jpg

Mongo

Création d'une application de gestion de projets en javascript

Refonte d'un ESB réalisé en Node JS (bus de communication inter applicatif)

Docker

CI CD

J'ai eu le lead sur plusieurs projets d'envergure, tel que la mise en place d'une stratégie de migration **P2V** de toute l'architecture backend d'une plateforme **E-commerce** international avec 3 sites...

http://www.acteam-it.com/wp-content/uploads/2017/06/logo_w_75px.png

Acteam-IT

Création d'un site internet pour la ville de Dunkerque

Création d'une interface d'administration à l'intention de la ville de Dunkerque 

Réalisation complète d'une boutique E-commerce JAMstack

React JS

Typescript

J'ai eu l'occasion de travailler sur plusieurs projets en tant qu'auto entrepreneur notamment, en collaboration avec [**Appyness**](https://www.appyness.fr/) sur un projet de [**market place**](https://www.dksoshopping.fr) à destination des commerçants de la ville de Dunkerque. 
J'ai également créé la boutique en ligne de [**la Maryse**](https://la-maryse.fr) créatrice de Design Cake..


small_https://i.pinimg.com/originals/bf/ca/29/bfca29f0a807e3268fb6f97b52ccc3c4.png

thumbnail_https://i.pinimg.com/originals/bf/ca/29/bfca29f0a807e3268fb6f97b52ccc3c4.png

https://i.pinimg.com/originals/bf/ca/29/bfca29f0a807e3268fb6f97b52ccc3c4.png

Freelance

Développement front d'interface d'administration en React d'une application métier d'agence immobilière(gestion de prospect, d'opportunité, de biens immo...)

Tierce maintenance applicative, correction et optimisation de la code base 

GitLab CI

J'ai eu la chance d'évoluer sur divers aspects chez Whatson Web, j'y ai notamment découvert **Symfony**, le **SCRUM**, le développement poussé sur **React **de composant consommant des **API**, en passant par du cache **Redis**...

thumbnail_https://www.whatson-web.com/front/images/ww-logo-blanc.png

https://www.whatson-web.com/front/images/ww-logo-blanc.png

Whatson Web

formations.magento.title

formations.prestashop.title

http://www.iut-lens.univ-artois.fr/wp-content/themes/iutlens2016new2/images/screenshot.png

formations.lp.title

formations.dut.title

thumbnail_https://www.daeu.fr/app/uploads/2018/11/universite-de-lille-350x0-c-default.png

https://www.daeu.fr/app/uploads/2018/11/universite-de-lille-350x0-c-default.png

formations.daeu.title

small_https://pbs.twimg.com/profile_images/848901618766680064/tL0DT5ED.jpg

thumbnail_https://pbs.twimg.com/profile_images/848901618766680064/tL0DT5ED.jpg

https://pbs.twimg.com/profile_images/848901618766680064/tL0DT5ED.jpg

achievements.marathon.title

achievements.marathon2.title

large_https://lodz.travel/files/public/_processed_/1/7/csm_manufaktura_main_ad123a7317.png

medium_https://lodz.travel/files/public/_processed_/1/7/csm_manufaktura_main_ad123a7317.png

small_https://lodz.travel/files/public/_processed_/1/7/csm_manufaktura_main_ad123a7317.png

https://lodz.travel/files/public/_processed_/1/7/csm_manufaktura_main_ad123a7317.png

achievements.gulliver.title

Said Ladghem

Développeur Front-end.

À propos de moi

Mes services

Expérience utilisateur & Design

Accessibilité et aspect mobile

Applications

Études de projets personnels

Gros projets

La Maryse

Projet Freelance de site E-commerce

La Maryse

Projet Freelance de site E-commerce

Petits projets

Mes compétences

Front-End

Back-End

Ils m'ont fait confiance

Les outils que j'utilise

J'ai utilisé ces services

Expériences professionnelles

Acteam-IT

Développeur Full Stack

Juillet 2020 - Aujourd'hui

Freelance

Développeur FullStack

Janvier 2020 - Juillet 2020

Whatson Web

Développeur Frontend - Alternant

Septembre 2019 - Juin 2020

Initiatives

Mes talks

Semaine du numerique

Statistiques GitHub

% écrit par langages

JavaScript

PHP

CSS

HTML

Smarty

PLSQL

TypeScript

Crystal

SCSS

GLSL

Twig

Dockerfile

TSQL

Vue

Quelques contributions open-source

LadghemSaid/popweb

LadghemSaid/mwood

LadghemSaid/Spotifilms

Statistiques CodeWars

Php

Javascript

Mes formations

Formation Développeur Magento

5 jours

Certification Prestashop Frontend-Backend

3 jours

LP CréaWeb

2020-2021

DUT - MMI

2018 - 2020

DAEU - B

2017 - 2018

Réseaux sociaux et liens

Said
Ladghem