A web app that lets the user enter a GitHub username and, if it exists, it will show the user handle, the number and a list of followers. When the list is bigger than 30 items, it will show the first 30 and let the user load more each time until the list is over.
Here's a description of how to just run the code. If you want to make modifications or just play with the code, check the next section, "Running in development environment"
To run the code you will need Node.js with npm. We will also use http-server to serve the resulting files, but feel free to use any other web server, such as Apache or NGINX.
The first step is to download the source.
git clone https://github.com/javalisson/github-followers.git
Then enter the source code directory.
cd github-followers
Before building the project you need to download the project dependencies.
npm install
Now it's time to build the project.
npm run build
The resulting code will be on dist directory and is ready for deployment. You can serve it with http-server. Install http-server.
npm install -g http-server
Then serve the dist directory.
http-server dist
Visit your browser on http://localhost:8080. That's it!
If you want to modify the project or just want to play with the code, you can run the development server that comes with Vue CLI. It is a web server and also provides you with Hot-Module-Replacement (HRM), i.e., your modifications are loaded in the browser without a browser refresh.
Run the development server with
# the same steps took in the previous section
git clone https://github.com/javalisson/github-followers.git
cd github-followers
npm install
# but now runnig the development server
npm run serve
Visit http://localhost:8080 on your browser. Then modify the source and check how the browser reloads the content.
This project includes a Dockerfile and two Docker Compose files. They let you build images for production or development.
The production image uses NGINX to serve the dist folder. You can build it with
docker build --tag=javalisson/github-followers .
and then run it with
docker run -p 80:80 javalisson/github-followers
You can now visit http://localhost on your browser.
Alternatively, you can use Docker Compose build and run the production image.
# build step
docker-compose build
# launch the container
docker-compose up
The development image lets you modify the code on your local file system and reflects the changes inside the container. Since the container uses the Vue CLI development server, it gives you the same ability to reload modifications on the browser automatically. In this case, use Docker Compose to build and run the development container.
# builds and launch the development container
docker-compose -f docker-compose.yml -f docker-compose.dev.yml up
Visit http://localhost:8080 on your browser. Then modify the source and check how the browser reloads the content.
You can also just download the production image from Docker Hub (if the image is not on your local machine it will be automatically downloaded).
# run the production image.
docker run -it --rm --name github-followers_1 -p 80:80 javalisson/github-followers:latest
The web app is built using Pug, Sass, BEM, CSS Grids, Vue.js 2 and Vuex. A page component hosts the search component and a list of results. The page handles the interaction between these components through messages and events.
The Vuex store contains all the data for the whole web app, and each time a new search is made a new user profile and its list of followers are added to the store, through an interface of actions and mutations defined in the store object.
There's an wrapper for the GitHub API. Each time a new search is made, the search component tells the page which then adds a new user to the store. Then a new component is added to the page with a loading message. This component tells to the store that it needs data about an username. The store uses a wrapper that makes easy to call consume the GitHub API service, then stores the new data, making it available to the component that is listening.
I also versioned my repository using Git and created a Docker image to make the deploy process easier.
Here I tell a little about my technological and architectural choices.
The first thing I did was to use pen and paper to generate some ideias. After sketching in paper I decided to try some sketches using CodePen.io, which allow me to start a project right away, without having to create lots of boilerplate code. Here are some sketches I made that started really simple and evolved to be close to the final visual and techinical solution: https://codepen.io/javalisson/pen/PVrMoX https://codepen.io/javalisson/pen/ZwZNaZ
I find it concise and easy to refactor when I need to. Part of the code written for a element can be copied as a Sass/CSS selector.
Sass is also concise and let me write DRY code. I am still learning but I already am a big fan!
Writing components using BEM requires lots of classes, but the result is easy to understand, to style and to modify.
CSS Grids let me create beautiful layouts without having to wrangle with tricky CSS hacks. And they are responsive :wink:
Vue.js became my choice because it's powerful, simple, similar to the combination "HTML + CSS + JS", easy to read and easy to teach. I have used frameworks that abstract web technologies and had a hard time when I needed to customize things. Vue.js makes it easy to collaborate with professionals that are familiar with the web.
I decided to give Vuex a try after studing it for a while. It was my first project using Vuex and that slowed me a bit. In the end I had a better understanding of the architecture and things connect when using Vuex, I consider it made things easier. I will certainly use it again.
Docker makes me confident because I know that my code is working on a reproducible environment and I won't spend hours trying to make my code run on a different machine.
I created a docker-compose configuration file that, in combination with a multi-stage build, lets me use the same base image to develop and to build a image to production. The dev image comes with Vue CLI 3 and uses npm run serve to make use of Hot Reload. The image for production serves the compiled files from dist directory using NGINX.
If I had more time to make this better I would certainly try to use TDD. I am not familiarized with vue-test-utils and even though I was able to write some tests. But when I added Vuex the complexity of the tests increased, the tests that were working stopped working and I gave up writing any tests at all. I tried to follow this great tutorial in five parts focused on testing Vue.js applications but the time was too short. The author builds an app similar to this one, which retrieves a user profile from GitHub.
I would also invest more time on little details of the UI, such as animations. I would like to animate the loading indicators, the appearing of each follower on the list, the transition between searches and the load of new followers.
I would like to use Storybook.js to document all the states of the components: when the user submit a blank search, a user with no followers, a user with no more followers to load, a user with more followers to load etc.
My name is Alisson a.k.a javalisson. I am a developer-interaction-designer-and-teacher. My first contact with Vue.js was two years ago while teaching at IFPR Telêmaco Borba. During the classes we used Vue.js to prototype with code and to create simple front-end data-driven web pages and applications. Now I am focused on diving deeper in the Vue.js ecosystem.
You can find on GitHub, LinkedIn and Facebook
The source code is on GitHub
The hosted demo is on Netlify
The Docker image is on Docker Hub
Content type
Image
Digest
Size
6.9 MB
Last updated
over 7 years ago
docker pull javalisson/github-followers