FCC SpeedRun Project #1: Camper Leaderboard

Guess what! I came out the gate fast and hard! (Keep your dirty jokes to yourself *wink wink*)

For those just tuning in, the FCC Speedrun challenge is to complete as many FCC projects as possible in a short amount of time (approx. 4 weeks). Repo and rules are listed here. I started in the Data Visualization section, before hopefully *fingers crossed* moving on to the Back End Development section.

The Quest

The goal of this here challenge was to recreate the freeCodeCamp leaderboard and make it ‘functionally similar’. The app allows the user to change the view between users with the most brownie points (for completing challenges and helping others) in the past 30 days and the most total points.

The Route

So I’d already picked out the general route I was taking when I picked my stack. So of course I needed to make sure my Angular game was on point. Before I knew about the challenge, I’d decided to pick it up, so I’d already been about a week into learning. I’m in the beginnings of the Angular 4 (formerly Angular 2) – The Complete Guide course on Udemy. Maximilian Schwarzmüller is an amazing teacher and I recommend his course!

Of course, with a jump in and figure it out attitude, I just knew I was ready to take off on this journey. But… Angular appears to be a massive framework, not to be tackled in one week. Damn that half buried tree root!

Initial Project

The initial setup was not at all complicated since the CLI does just about all the work. The longest part is waiting for the npm to install the dependencies.

Next was the components. Again, pretty straightforward since not many were needed.

Where things started to get hairy was the service. I hadn’t gotten to the services section of the Angular course yet, but I knew enough from reading around that it was needed to pull in data on the campers.

Mix-in Sass

Oh, yeah… Did I forget to mention that I’m supposed to use Sass?

Never touched Webpack before. Didn’t even know where to start to try to use Sass in Angular. Trees closing in on me. Big balls with legs hanging from branches. Pretty sure they’re spiders. And since I’m working on my RL spider phobia, I took a page from that book. Try not to panic. They’re more scared of you than you are of them. If it’s not on you yet, you still have time.

Turns out that they were more scared of me. Three hours on Google yielded quite a few tutorials on how to changes .css extensions to .sass and go add dependencies to Webpack. A side-eyed, frustrated 5 minute search at 6 am the next morning revealed a simple two line solution. StackOverflow for the win!

A Dash (or All) of Material

I added in Bootstrap, but wanted to use Material also. It was fairly simple to add but there were a few installs and imports needed before things started coming together.

The Forest Creatures

Services aka the tree root:

  • Contrary to popular belief, it was not adorably cute like Groot (who else can’t wait to see ‘Guardians of the Galaxy, Vol 2″???)
  • Angular just updated from v2 to v4 and while they might not have been breaking changes, there was still enough of a difference that following a tutorial made from just a month before the update can trip a beginner up.
  • Pay attention to importing the following:
import { Injectable } from '@angular/core';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';

Sass via Webpack aka the huge spiders in the trees:

  • Worse than the tree root, because ewwww spiders! Actually this was more like “WTF, I need a shower because spiders!”
  • New projects: ng new project-name --style=scss
  • Existing projects: ng set defaults.styleExt scss and remember to change existing .css files to .sass
    • Make sure to update all .ts files and the angular-cli.json file

Material aka The Mystical Colorer:

  • Magical from the eyes of a beginner because of all the things pulled out of thin air to add a little color to life
  • npm install --save @angular/material @angular/animations hammerjs
  • npm install --save-dev @types/hammerjs

The Reward

  • +30 ability to set up a basic Angular app.
  • +10 basic understanding of services
  • +15 using Sass (I’m claiming 10 of those points for the research involved!)
  • +10 for adding Material
  • +50 finished project #1

115 Points ~ Level 2 achieved!!

When did programming turn into a RPG? Is there a programming RPG? If there is, could someone point me in the right direction, because that sounds like it could be fun!


View the source code here

See the live demo on Surge

Find Francesco Agnoletto (Kornil) awesome repository of favicons


*FYI: Groot/Guardians of the Galaxy belong to Marvel/Marvel Studios/Walt Disney Studios


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s