3 Showcase Projects (Full-Stack)

Last Autumn, I graduated from Polytech Sorbonne – I’m now an engineer in Applied Mathematics and Computer Science, yay! 🙂 In parallel, for a few months now, I’ve also been a freelancer software full-stack developer. Thanks to this second activity, I get to meet a lot of people, to work on various projects and to keep on learning plenty of technologies I’m interested in!

A full-stack engineer works on many sorts of contents: basic apps, websites, . Their job is either to design frontend (i.e. design the interface, improve the user-experience, select the colors palette…) or to the contrary to make the backend (i.e. the rest: the server, the API, the infrastructure…). Most of the time, you’re also asked to take care of the “middle things” such as providing an easy way to run your code or install it in the client’s environment.

Showcase projects

To showcase some of my full-stack skills, I’ve decided to create and share a few projects with various various backend/frontend technologies.

For those who are interested in learning more about the technologies I used, I’ll give some info on each below. But before, here is a quick summary of the projects:

Dashboard [Node JS/React JS]

Available here.

This dashboard is a small example of a Node JS server and React JS client. Its goal is to showcase basic coding skills and styles:

  • simple authentication (with login panel, 1H expirable JWT token creation/checking and private routes)
  • REST API routing (with GET, POST)
  • random data generation + async data fetching from well-known open-source datasets
  • server unit testing
  • custom React components (with some component inheritance)
  • Mobx storing
  • React routing
  • frontend internationalization (with English, French)
  • token and language preference saving in browser local storage
  • REST API Swagger documentation
  • containerization with Docker
  • HTTP/HTTPS switch on server depending on serving environment
  • Markdown documentation of the project

Data Explorer [Node JS/Vue JS]

Available here.

This data explorer is a small example of a Node JS server and Vue JS client. Its goal is to showcase basic coding skills and styles:

  • REST API routing (with GET, POST)
  • async data fetching from URLs and from databases (MongoDB)
  • file uploads and parsing (with single or multiple zipped files)
  • server unit testing
  • custom Vue JS single-file-components
  • Vuex storing
  • Vue JS routing (with Vue-router)
  • frontend internationalization (with English, French)
  • multi CSS-theming (with “light”/”dark” modes) using a SCSS shared template and a data attribute
  • language preference and CSS theme saving in browser local storage
  • REST API Swagger documentation
  • containerization with Docker
  • HTTP/HTTPS switch on server depending on serving environment

Logo Compiler [Flask/Vue JS]

Available here.

This logo compiler tool is a small example of a Flask server and Vue JS client. Its goal is to showcase basic coding skills and styles:

  • Flask basic server implementation with static resource serving + simple API Blueprint
  • custom Vue single-file-components
  • Vuex storing
  • frontend internationalization (with English, French)
  • multi CSS-theming (with “light”/”dark” mode) using a SCSS shared template and a data attribute
  • responsive design (specific layouts for phones/computers)
  • language preference and CSS theme saving in browser local storage
  • containerization with Docker
  • HTTP/HTTPS switch on server depending on serving environment
  • Markdown documentation of the project

The logo compilations shown here for the 3 projects were made using this tool, by the way 🙂

Note: if you’re interested, you can send me an email to get an access (in read mode) to the private Bitbucket repository that contains the full-code of these projects!

Backend Technologies

Node JS/Express

Node.js is an open-source and cross-platform JavaScript runtime environment. This means that this tool is able to execute JavaScript code outside of a browser. It’s mostly used to create command-line tools or website servers.

It is based on events, is known for scaling up nicely (i.e. it still works even when you start have a lot of people accessing your website, or when it has to do plenty of processes in parallel…) and is useful for asynchronous operations.

Node is also associated with the npm tool, or “Node Package Manager”. This database of JavaScript modules is a super easy way to install and run bits of codes shared by the community and is frequently by JavaScript frontend technologies too such as ReactJS or VueJS (see below).

Flask

Flask is a micro web framework meant to design small applications easily in Python. As is indicated on Flask’s first documentation page, being “micro” means being simple and extensible: the framework does not impose any specific architecture, database or other tools and lets you build your application the way you prefer.

While this requires us to handle this by ourselves, Flask offers many plugins to help us and this gives us a lot of freedom on how we shape our web application. Many extensions have been proposed to answer the most common needs: database abstraction (with ORMs for example), form validation, user authentication…

The strength of Flask comes from its integrated debugging and testing systems, its great documentation, its really nice learning curve and its numerous extensions. The reason it is straightforward to learn for developers is partly due to:

  • its intensive use of templates that allow us to create HTML pages with some dynamic data entry points that are fed by the server upon URL access
  • the ease with which you can define server endpoints for your app

Frontend Technologies

React JS

ReactJS is a JavaScript library that was developed by Jordan Walke (a software engineer from Facebook) and launched in 2013. Since then, it has become open-source and is now maintained both by Facebook and by the community.

This project was born out of the need Facebook had to deal with code maintenance issues and an increasing number of features. When it bought Instagram in 2012, the early prototype of an efficient reactive render engine suddenly became a great idea and it was quickly turned into the first version of ReactJS.

The library’s top advantages, in the eyes of many developers (me included), are that:

  1. it allows a programmer to create a full application quickly
  2. it is simple to learn, to test and to deploy
  3. it gives you a lot of freedom in how you structure your codebase because it relies on numerous packages and dependencies
  4. it is very efficient thanks to “reactive rendering” (hence its name…)

Note: for more info on this library, feel free to take a look at a previous article I wrote last year on my internship at LabGenius during which I used ReactJS quite a lot.

Vue JS

VueJS is one of the most well-known competitor of ReactJS for website frontend design, alongside with Angular. Compared to React, Vue is not simply a library but a JavaScript framework – a basic Vue project install already has more features than a plain React project. You need to plug-and-play a lot of modules into your React project to have something that starts to be interesting, whereas VueJS inherently has HTML templating, scoped CSS, data storing and sharing through observables…

I’ve only recently started coding in Vue but I find it quite interesting to see the advantages and drawbacks of this tool as opposed to ReactJS. The framework lets us choose between a tech-driven and a component-driven approach which is nice (on the other hand, React only lets you work in a component-driven approach – even though I prefer this mindset, it’s cool to have the choice!).  The main difference in my opinion is that Vue is much more strict in terms of language separation: even when you make single-file-components, you still have a template tag for your HTML, a script tag for your JavaScript and a style tag for your CSS. React uses JSX (or JavaScript extended) which simply jumbles everything together in the same spot – the plus side of React is that everything is centralized and that you can easily defined JavaScript variables global to your component.

Overall, I’m still more familiar with React and I like how customizable it is: because the base library is just a thin slate, when you create a new project, you can actually decide to import very specific stuff and therefore only tie the dependencies you truly need to your work. As for the data storing, the famous React + Mobx is to me equivalent to Vue’s official store module: Vuex. An important thing to note though is that ReactJS relies a lot on its community, in particular for package scripting and contribution; on the other hand, Vue tries as much as possible to produce “official” modules to provide the required functionalities.

Note: for a more in-depth investigation of the difference between Vue JS and other JS frameworks, you can take a look at Vue’s own comparison page.

Other Technologies

Mongo DB

Mongo DB is a JSON document-based database that is quite easy to set up but is still a powerful tool. It provides you with quick-to-read data representation and a nice query language that makes it fairly straight-forward to do create, read, update and delete operations (also known as CRUD operations).

In addition to these basic perks, Mongo has developed since its first version in 2009 a lot of drivers to interface with the most commonly used programming languages: Python, Node JS, C/C++, Go, Ruby, Java, PHP…

JWT Tokens

The “JSON Web Token” (or JWT in short) is a standard for web JSON-based authentication tokens. Basically, those are access tokens that are granted to the user upon log in and that contain some data related to this user. We say that the token “asserts claims”. For example, your token can be the proof that you are indeed an admin on this website and therefore that you are allowed to access the page you want; or it can store your username, firstname and lastname to make it easier for the website’s interface to display your current logging information.

The most common encryption algorithm for those tokens is the HMACSHA256. Thanks to this mathematical tool, you can construct a base payload and then encrypt it and send a “protected” version of the token to the browser. On the other end, the browser can decrypt it and extract back all the useful information.

Quite often, you add some server-specific data in the JWT token so that no one can pretend to be one of your users by creating their own token. This process called “forgery” consists in impersonating the token creator to make your own credentials; by having some unique “secret” on the server-side, you significantly reduce the risk of having the first person who comes along cracking your security.

Docker

Today, Docker is I think the number-one solution for containerization and easy application packaging. It is a cross-platform tool that allows you to share your application with an OS-level virtualization as a container. Simply put, Docker gives you a framework to “recreate a small computer” – it is close to the idea of virtual machines but is different in practice and, overall, way lighter.

By using Docker, you can provide your client with your piece of software already packaged in a controlled and tested for environment; rather than having to test it out on every possible computer setup (which is nowadays completely impossible!), you instead give the computer setup you need with the software. This way, the client only requires Docker to run your entire project, no matter what the dependencies of the project itself.

Swagger

Swagger is an open-source tool aimed primarily at API documentation generation. It comes in many flavors depending on the programming language you use but it usually works the same: by putting well-designed documentation comments on your API functions (i.e. the various processes that respond to HTTP calls no matter which method is used – GET, POST, PUT…), Swagger will automatically generate a pretty formatted list of all your URLs with their full path, their parameters, their return values, their possible responses, etc.

Markdown

Markdown is a very simple markup language for plain-text formatting and styling. Since its initial release in 2004, this language has evolved in various ways and today there are several syntax extensions to support all the ideas people have had over the years.

Markdown is often for displaying documentation and/or readme files used on the 3 well-known Git online providers: Github, Gitlab and Bitbucket. Each of them come with a Markdown interpreter to display your pretty Markdown files properly.

Leave a Reply

Your email address will not be published. Required fields are marked *