I’m no graphic designer, but I do have more of an eye for design than the typical developer and I do enjoy good UX/UI. So, when SpaceNav asked me to redesign and redevelop the front end of their web app I was definitely excited.
The requirements included giving the app a “modern look and feel” and adding some cool new features like interactive charts and calendars. I had a great time getting some more experience with D3, FullCalendar, and we even threw in some Angular.
I’m a big fan of D3. I love when you find a great piece of code that is fully customization and powerful; and D3 is definitely that. I used it to create the donut progress chart that updates as the satellite data processes, I also used it to create two other donut charts. Although it is powerful, the learning curve is horrendous and the documentation is more than lacking. Definitely don’t try it without a good understanding of Javascript. Hopefully, the documentation gets better with time.
FullCalendar worked great. It was almost plug and play. It is a little less customizable than I’d hoped, but eventually made it work.
When I started this project, I didn’t intend to use any Angular, but as we talked about architecture for the future I realized that they could benefit greatly from it. The app processes tons of data from the database and wait times are long. Angular’s two-way data binding, being able to show only the data they need, and giving the user clear loading feedback are a couple benefits they now get.
This wasn’t the typical Angular project because we didn’t really change the app architecture to use Angular routing or make it a one page app, but we’re working towards that slowly. All additions to the site are now done in Angular so it will be less work to transition when the budget allows.
With Angular installed, I was free to start adding some features like table sorting and filtering. I used an Angular library called Smart Table. It was super easy to add but it’s filter features are a bit primitive (no filtering operators). Aside from that, the sorting and filtering function I was able to add are very valuable.
