Zamzee / Welltok

• Go to site

Zamzee is a startup whose product can be described as "Fitbit for kids". I created two Angular apps for this project. The first app was the main dashboard for logged in users that displayed daily steps, progress, goals, rewards, etc. It had lots of graph elements with lots of animations to make it fun and appealing for kids. For the graph elements I used SVG heavily, which provided a fast loading and smooth animation experience across desktop and mobile browsers. Some other benefits of SVG were that the components were more easily reused at different scales throughout the page and easier to understand. Animation state was kept in the Angular $scope and able to be accessed by various elements throughout the view.

Play demo

The other Angular app for this Zamzee was the user onboarding flow. It was a multipart form that needed to be completed very quickly. We used Angular with $http for client/server communication, Angular Router and ngAnimate to avoid page reloads and create a seamless, clean experience. The pages needed to be mobile responsive (1 break point) and I wrote the CSS and HTML from scratch for that.

This project uses Angular on the front end and Ruby on Rails on the back end. The database uses PostgreSQL. Code is stored on Github and deployed to AWS.

React Pro Forma

• Go to site
• View code

This project helps people do quick, back-of-the-envelope calculations on real estate projects. It helps people evaluate a handful of key metrics about the viability of real estate development projects. It serves as a first stop when coming across a real estate oportunity before pulling out Excel or Google Sheets to do more in depth and project specific calculations.

It's built with React/Redux, and uses Local Storage for a data store. There are quite a few calculations going on with each user input and React/Redux makes these updates extremely snappy. React/Redux patterns keep the app well organized, predictable, testable, and extensible.

Littleplandefinder.com

• Go to site
• View code
• Play demo

I created Litteplanefinder.com to demonstrate some Angular and MEAN stack code. On the front end it uses Angular and the backend, Express/Node. The database is MongoDB. Tests are written in Jasmine and run with Karma. It's all deployed on Heroku and the code lives on Github here: https://www.github.com/andypandy/littleplanefinder.

Littleplanefinder.com helps people easily wade through lots data about general aviation airplanes. Over the years there has been a good amount of variation between the various airplane models and finding the perfect airplane is tough. The data exists, but not in one place and in one format. Littleplanefinder brings together this data for an apples-to-apples comparison.

The app relies on a few important form components that each provided an interface for certain parts of the "filter" model. I was able to define the filter criteria and their types in JSON and have the appropriate form component rendered. The data object containing the different airplanes were then tested with this filter and conditionally displayed.

Angular's out-of-the-box two way data binding made this form aspect super fast and easy to both set up and understand, while requiring minimal boilerplate code. I also used Angular $resource for tight integration between $resource's data access methods and the data store, allowing things like plane.$update({...}) or plane.$remove() with minimal configuration.

Other projects

Let me know if you'd like to see a specific example of a language/technology/anything not shown above.