Web Design & Development Projects

Web Application | JavaScript Development | Machine Learning Website | Vu Digital

This was definitely my favorite project so far. I loved the team, the technology, and the product. Plus, I got to design and develop everything on the front-end from scratch (besides the site header design).

I setup an MVC architecture using Angular. I used the built-in ngRouter until I realized that uiRouter offered features that I needed like nesting of views. I had a great time digging into some more complex programming questions like memory leaks. I also learned a ton about Angular.

Some highlights of the project are the image editing UI, breadcrumbs, robust image uploading, and a directive for enforcing site permissions.

Image editing was a crazy front end challenge. My task was to take any image I was given and allow object boxes to be shown/added/deleted. The object boxes needed to scale with the responsive image. I also needed to keep track of changes to the objects so any changes could be saved. It was interesting to use jQuery UI draggable and resizable. Luckily draggable had an Angular directive, but I had to create one for resizable. Super fun!

Breadcrumbs are difficult as always. The built in router doesn’t support them that well, particularly for children that don’t follow the url format. This is where ui router came in. I also used angular-breadcumb which works really well. The breadcrumbs worked out great and add a lot to the user experience.

I had never tried to upload anything with Angular. On this project I needed to be able to upload images and zipped folders. Later on I was asked to allow for folder upload. Users needed a button to click for upload and a place where they could drag/drop assets. I did some research and found a great angular upload library (angular file upload) and it turned out to be really powerful.

I focused on making as much of the site repeatable and reusable and angular directives made a couple things really repeatable. I made a directive where I could block access to any part of the site just by adding an attribute to the html. I also wrote code that would redirect a user if they tried to access a page without permission. This directive really shows the power of Angular. It wasn’t the easiest thing in the world, but it was much easier than I was expecting, and with a few hundred lines of code, we can now block any part of the site.

Web Design | Web Development | Space Website

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.

Web Design | Searchlight Website

I keep getting clients wanting more than just development. Searchlight came looking for help designing their website and (ultimately) their business. Our initial meetings were fun getting to know their vision and then I jumped into design.

Because the core of their business is search, I began out of the norm by designing their search results page and then revisited the homepage.

I can’t post the designs here out of respect for their company (it is only in idea stage), but if you’re interested in my design skills, I can definitely send a portfolio.

Learning Laravel

I’ve been a huge fan of Laravel ever since we built an app for Crocs with it at Voltage. In 2014, some developers at Voltage wanted to join a Laravel meetup but found that there wasn’t one east of the Mississippi. So, they started one and I’ve been a part of it ever since. We talk about a ton of stuff at a high level.

So far, I’ve only used it to built a very simple app in Laravel, but want to get some more serious experience. I’d definitely take a lower-than-usual rate to get a project under my belt.

Website Development | Shopify Development | Fjallraven

This project was basically complex theme hacking. I hate theme hacking because I have to deal with all the bugs/nuances of other people’s work without the benefit of being familiar with the whole codebase.

It was fun to get a little more experience with Shopify. A couple challenges were getting the color thumbnails on the quick view and product page to show product images instead of colors.

Since the last project I did on this platform, Shopify added the ability to organize theme options better. This ability came in handy because the client wanted to be able to edit almost all static content on all pages. Unfortunately, Shopify still doesn’t have the ability to allow the user to add custom data types in the admin, so I had to do it all in the theme options. Hopefully, custom data is coming soon, but for now, theme options are definitely working better.

Hookify Feature Addition

Corvida Software hired me to add a feature (tracer) to their Hookify app. The feature is pretty cool, it allows someone to quickly ping any endpoint on the web and test the responses. You can save these “traces” for later so you can ping at anytime. It also saves past responses.

I quoted this project and they came back and said they’ll only pay half that much. They said I had made some mistakes in my assumptions. I don’t typically do projects on a fixed basis, but this was our first one together, so I figured I’d give it a try.

Needless to say, it didn’t end like I wanted, but I delivered them a finished project despite loosing money on the deal. That is just how I roll. They were great about it and increased their budget a little bit.

I had fun learning all kinds of stuff about pinging API’s with ajax. There are all kinds of nuances that you have to learn when creating a tool that can be used to ping multiple APIs. I also had fun using the Select2 library to add auto completing and validation to a text input.

Web Application Development | Personal Node.Js App

I took a couple hours today and last week to get some Node.js practice. I built a basic app that can take an image upload and display it. The app was surprisingly simple to write.

I used two packages: node-formidable for parsing form data and fs for handling the image.

Voltage Internal Business System Architecture & UX/UI Design

I can’t talk publicly much about this project out of respect for Voltage, but I wanted to include it in my projects because it was a great opportunity for me to continue honing my skills of UX/UI Design as well as back-end architecture.

Steven and I worked together to lay out early wireframes of the front-end and the back-end database architecture we’d use to drive the front-end. Unfortunately I never got the chance to finish the system because for unrelated reasons I decided to leave Voltage and start doing freelance web development.