Web Design & Development Projects

Graphic Design | Video Streaming Website

Our client wanted to represent the movie tickets in their system in a novel way.

When our designers presented this idea we love it but didn’t know for sure if it would be possible to integrate user generated images with these dynamic thumbnails because the corners of the image would need to be clipped in an unusual way.

Turns out, it is possible when you have some killer front-end developers!

WordPress Development | JavaScript | PC12 Advantage

We had a short timeline and a set budget.

Speaking of budgets, I’m bad at estimating, that is why I only work hourly. I still give my clients estimates if they like and this client made it clear they wanted one and hoped it would be solid.

I decided early on to use Angular even though I had never done so with a WordPress site. As we got a bit into the project I noticed there were a lot of repeating components on the site so I switched gears and started making components.

The strategy paid off. We finished it on time and under budget.

Web Application Development | Node | Video Streaming Website

In this project, we dedicated a year of our time and expertise to develop a web application for a video streaming website using Node.js. As a website development company with a strong background in software development services, our team took on the challenge with enthusiasm and commitment. The project was not only a testament to our technical skills but also a valuable learning experience that pushed our limits.

One of the highlights of this project was developing a solution for users to upload very large files directly to S3. This task was particularly challenging due to the sheer size of the video files. Our innovative approach involved chunking the files, allowing them to go straight from the browser to S3 without our server acting as an intermediary. This solution not only improved the efficiency of the file upload process but also enhanced the user experience by speeding up the upload time.

Another significant achievement was our ability to create custom teasers for each uploaded film on the fly. This feature added a unique touch to the website, making it stand out from competitors.

The site was built on the MEAN stack, a technology we are well-versed in and enjoy working with. While we faced some challenges, such as the lack of good migration and seeding support for Node.js and Express, we were able to overcome them and deliver a product that met our high standards.

Our involvement in this project is ongoing, with a redesign currently in progress. We are excited about the future developments and improvements we will bring to the site. Our team’s diverse skills, ranging from web design to seo services and website maintenance, were all utilized to their fullest potential in this project. We are proud of the work we have done and look forward to continuing our partnership with the client to achieve even greater success.

Website Development | Website Maintenance | Automotive Website | Blue Rocket

I had a great time working on this site. I was on the project for about 4 months and I helped the team by not only delivering solid code but also as by sharing my expertise with a team that was a bit on the junior side.

In addition, I also learned a ton about working with a large team on a large scale project.

One project highlight was some functionality that only showed the first time a user logged in. I had to track the login using a cookie as well as data returned by the backend. Fun stuff.

Also, this was one of the first few projects I setup to run locally using Docker. It worked out great, although I got a bit of pushback from the team because they didn’t understand it and were very hesitant to support it.

I had to stop working on the project because my team lead work became too much to handle, but I heard later that they started using docker more internally.

IOS App | IOS Development | Internet of Things Startup

On the heels of my last IOS app in React Native, I started this project in Ionic. The designs were already done and it was my job to implement them in a cost effective way.

At first, the client pushed really hard to build this in Ionic 2 (using Angular 2). At the time, Angular 2 was still in beta and I strongly suggested we wait. We had some back and forth and ended up settling on the plan to build the app with Ionic 1 but augment it with Typescript in hopes that migration to Angular 2 will be easier in the future. I warned them that using Typescript would increase the price (turns out it added about 30% to the time used) and they were fine with that.

It was fun to get some experience in Typescript and I definitely like some aspects of it, but I don’t see the 10X benefit that I typically look for in a new technology. I’m not closing the book on it yet, but I wasn’t wow’ed.

We started the project with a thorough study of how to implement the IOS app and our planning paid off. Using Ionic 1 with Firebase saved a lot of money. In the end, we added 12 views, 5 services (authorization, Oauth, etc.), 3 models (for Firebase), 3 reusable components (directives).

I’m really happy with the final project. The code is solid; it is setup to easily add features and views, and it went through some rigorous tests. We should be launching the beta early this week.

One challenge was implementing Oauth in Ionic. There weren’t many options and I ended up using ng-cordova-oauth. This opensource package isn’t setup to interact with any given endpoint, so I needed to add a package specifically for our desired api. I enjoyed contributing back to the open source community that helps me so much.

It is hard to think of only one highlight for this project because there were so many. I’d never created an app in Ionic and I was pleasantly surprised by how many time-saving features it comes with out of the box. It is definitely a 10X piece of technology. I also loved getting more experience with Firebase and time-series data.

Getting more experience with IOS development was also a pleasure. Thanks to JavaScript, my skills can now be used thought the entire internet stack, from server to browser to mobile.

IOS App in React Native

Super fun project and very stressful! I’m usually the developer on all my projects but a new client had a supper quick timeline, “rocket speed” he said. I had a 4 weeks to locate some developers to help, design several views, and implement them in IOS.

My first task was to decide on a technology to use. Luckily, there are several JavaScript frameworks that allow us to build IOS apps. I researched my options, from NativeScript to React Native and several others. I wanted to choose a framework that has a nice user base and will be well supported in the future. For that, both NativeScript and React Native qualified. I ended up going with React Native because it seems like it will last the test of time better than NativeScript. Looking back, I don’t see React Native as a clear winner. There are still some improvements needed, but I do like how native the app feels after it is done. That said, I’d still like to try some other frameworks like NativeScript + Angular or Ionic.

One project highlight is using a noSQL database to work with time-series data. The app is very data heavy, so charts are a big deal. At first glance, noSql doesn’t seem like the best technology for the job, but I found a couple good articles on time series data in MongoDB and it actually worked out quite nicely.

Another project highlight is the amount of time it took to complete the app. Finding help turned out to be a little more complicated than I thought, I also spent some time waiting on stuff from the client. In the end, we got going on the project about a week late and finished the project about a week late. I was supper bummed, this was the first deadline I’ve missed since starting my business. That said, I still think it is a super accomplishment go to from nothing to a fully functioning app in 4 weeks.

I learned a lot in this project and look forward to more apps in the future.

 

Dynamic SVGs using Angular

I’ve used SVGs many times in the past but I’ve never been tasked to build dynamic drawings with them…until now. Unfortunately, I can’t share an actual picture of the project because it could identify a client that has asked to stay anonymous, so you’ll have to use your imagination.

I was given the task to create a dynamic drawing (like a spec sheet) for a work order used to build a product. I’m given a width, height, columns, rows, accessories heights, and shape and I draw what is going to be built. I also added measurements to the drawing.

Early in the project I had to decide between HTML5 canvas and SVG. I went with SVG and I’m sure glad I did. SVG has been around for a while and has been supported by browsers for just about as long. This longevity proved crucial to the project because I needed to move quickly to show progress.

I had to learn how to draw different shapes with SVG and Illustrator did the job. I had to get parts of the shapes to repeat and Angular was like magic. Then, as a nice finishing touch, I added zooming and panning using svg-pan-zoom using an Angular plugin (that I had to modify because it was a bit out-of-date).

In the end, the client said it looked “awesome!” I love to hear that.

 

Laravel Web App Development | Customer Page | Manufacturing Website

Unfortunately, my best client right now doesn’t let me identify them publicly. Luckily, they allow me to talk in general about the work, so here we go!

This project was truly full-stack including UX/UI, high fidelity wireframes, front-end (html, scss, JavaScript, etc.), api architecture, and database architecture.

The page addition is part of a super fun ongoing project built in Laravel 4. For this page addition, I was given an existing back-end and some admin pages built in frozen-node. Then, I was tasked to improve the user experience when someone needed to add a company, contacts, addresses, phone numbers, and emails.

The current data architecture was cumbersome and restrictive and they wanted it to be easier to use and update in the future. I modified the relationships between these objects (company, contacts, etc.) in the database model and then built endpoints for them.

On the front-end, I added Angular to the project and built the view (html, scss) to be super flexible. The front-end data mirrors the back-end which makes interacting with the data super quick and easy.

Some projects highlights include how I structured the api calls to reduce the amount of data that needs to be loaded at any one time. On page load, the page grabs a list of companies (probably never more than 200) with only the bare minimum data loaded. Because of the small size of the data, I’ll never need to paginate and can just use Angular to add sorting searching features in the future. Then, when a person clicks on a company it loads that companies data including addresses, contacts, phone numbers, etc.

Another project highlight is the use of Angular forms. I had to add a directive to keep the company, contacts, addresses, phone, and email forms separate so they could be repeated, updated, and removed intuitively. There are several nested forms in each company and each form knows if it has new data and if it has any errors on save. Super cool!