Camper Leaderboard Retrospective

Intro

The camper leaderboard project was really an exercise in making API calls with a frontend JavaScript framework. This project required me to use Angular services for the first time to make calls to external APIs to fetch data.

I also used more than one component for the first time and swapped displaying them based on user interaction. For as simple as this project looks, I learned some valuable component-based architecture skills from it.

Code Review

Reviewing the code, I see some things that I would do differently today. First, it looks like I didn't fully grasp the purpose of using an interface file in Angular. I created an interface for 30 day posts and all time posts, but then didn't import them into any component and make use of them. There's also some things that have been landed upon as far as Angular best practices go that I could go back and clean up like removing underscore prefixes for private variables and getting all of my directives and providers moved into the app.module file rather than in my component metadata.

Future Improvements

Cleaning up the things I listed above and updating the code to the most recent version of Angular would improve the code for this project a lot. I did still rely upon Bootstrap to layout this page. I think I will rewrite this project to include Jasmine tests along with cleaning up the existing code. Some things that I should address are:

  • Removing Bootstrap and laying this out some other way. Could be a good flexbox stretch for me
  • Update existing code to current Angular best practices: remove underscores, use module pattern, move template into separate file, etc
  • Combine two components into one generic component that can display either set of data
  • Combine my two services into one with two methods