Post navigation

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.