Category: FCC Zipline Series

FCC Zipline Series by strongeleeroyNov 4, 20163:52 pm

Create a File Metadata Microservice with Node.js

Inspecting file metadata is something we could easily do with just good ol’ browser JavaScript. But also creates a chance to explore the world of fullstack development as a nice and easy to implement application.

We are going to be coding a fullstack application (frontend + backend) that will let the user upload a file and let us visualize relevant file metadata such as file type or size.

We’ll be serving both the front-end assets and API on the same Express based Node.js server, with some ECMAScript 2015 flavour added to it with Babel.

The client application code is up to you. I’m going to go bare-minimum here, but feel free to use a front-end framework if you want to go all out.

Finally, we’ll deploy the application to Heroku. If you want a quick guide to deploying to Heroku, take a look at this post.

FCC Zipline Series by strongeleeroyNov 2, 20169:28 am

Create a URL Shortener with Node.js and MongoDB

URL shorteners are very useful. Remembering long and tedious URL addresses, or sharing 100 character URLs with your peers is not what we would call, convenient. That’s why we have services such as the Google URL Shortener, Bitly or TinyURL.

We are going to replicate the functionality that these pages offer to some extent. We’ll start off by creating an API using Node.js and the Express framework, and will integrate with a MongoDB instance to store information making use of Mongoose.

The functionality is quite straightforward, we must implement two endpoints in our application:

/new/URL_TO_SHORTEN: Creates a new short URL for the provided long URL.
/SHORT_URL: Will redirect to the long version of the provided short URL.

Instead of babbling around, let’s set up the project and install all of our dependencies.

FCC Zipline Series by strongeleeroyMar 2, 20163:00 pm

Build a wikipedia viewer with React, Babel and Webpack

Build a Wikipedia Viewer | The React Way

Today, we are going to build a Wikipedia viewer using React and Webpack in tandem. If you are not familiar with React at all, I recommend that you go through the introductory material first, it’ll save you a headache!

Additionally, we are going to be using ES6 class syntax for creating components, as this is the way React is heading towards. The previous tutorial in this series goes into more detail, so go ahead and take a look if you’d like. Let’s get our hands dirty then…

FCC Zipline Series by strongeleeroyFeb 26, 20163:58 pm

Build a weather app with React, Babel and Webpack

Weather App | The React Way

January 16th, 2018 Update

As certain sections of this guide are now obsolete, here’s an updated solution proposed by avid reader Goungaf Saâd.

You can take a look at this version in this GitHub repo. Note that he is using create-react-app on this project, so the overall set-up might be slightly different.

Goungaf is a passionate individual in love with JavaScript and cutting edge technology. He works as a freelance web and mobile developer specializing in the MEAN/MERN stacks and Ionic/React Native mobile development.

This time around, we are going to build our lovely local weather app using React, Webpack and Babel. These 3 tools in conjunction give as enormous power and awesome syntactic sugar for our code.

We’ll make use of ECMAScript 6 classes, promises and arrow functions among others, but first, we need to get a proper environment set up. Navigate to your project folder and run the following command:

npm init

Note: If you don’t have Node and NPM installed, take a quick look at this post, that will get you going.

You’ll be asked for a few things, such as app name, author, description etc. Feel free to take your time and fill them in properly, or anxiously press enter to skip everything. Once done, you’ll have a package.json file in your project directory.

FCC Zipline Series by strongeleeroyFeb 23, 20163:42 pm

FCC Zipline Series 105: Weather App | The Angular Way

We’ll be building a weather app this time around; this project will serve as a nice introduction to a language that has been embraced by Angular 2, and can prove to be tremendously powerful: TypeScript.

You may have heard of TypeScript before, it’s merely a superset of JavaScript (it get’s compiled to plain JavaScript), but provides us with tools only available to ECMAScript 6 and beyond right now (such as classes!).

It also gives us strong typing, a feature that JavaScript lacks and can prove to be a lifesaver. We are going to take it slow and introduce TypeScript features as we along. If you want to get a feel for TypeScript before we get started, go ahead and take a look at the documentation. If you hate AngularJS, TypeScript or strong typing, ~~stay tuned~~, a ReactJS + JSX version of this tutorial ~~will come along shortly~~ can be found here.