Taking an existing project to the next level Part One

How a Chingu team took a simple application and made it awesome with Redux, a little data restructuring, and the Google Maps API.

Introduction

The following articles cover the build process of a web based React application during the August Chingu cohort. The previous cohort left the application with basic CRUD functionality and a simple layout of connected pages. We used Firebase for out data storage, and React Router to handle navigation. Greg Munker and I worked on this project together and we’ll be going back and forth with the writing responsibilities starting here with a description of our overall objectives for this application.

The Challenge

This application is designed to assist a local non-profit I work with from time to time. They are a group of volunteer animal advocates who dedicate their time, energy, and often money to helping find lost pets. It sounds simple, but after 5 years and well over a thousand animals recovered in a city of about 20,000 people it really isn’t. Veterinary care to treat injuries and a variety of other ailments always leave a standing bill at the local vets office. Housing for the animals until the owners come forward to claim them is always in short supply, and for animals who’s owners can’t be located, adoptions to new families must be handled as well. Add to this the coordination with metropolitan animal care and other rescue groups, and it’s easy to see how organization has become a huge challenge in itself. This group has been using a spreadsheet to track their efforts and stay on the same page. Having so many hands of the same file led to a lot of duplicate or incomplete data. Also, the sheer effort of maintaining this list has been problematic.

The Big Idea

I believe that migrating from spreadsheet to database is all about adding structure to the data while simultaneously imposing some limits. The application and interface should make up for those perceived limitations by adding features that make users more productive. Organization was the primary concern in the beginning, but we also recognized that increasing adoption rates, securing donations, and helping the volunteers as they go about the hard work of collecting stray animals were problems that needed to be solved. The first cohort dealt mainly with creating a skeleton of the application and addressing the organizational issues by providing a more refined means of data entry… forms!

Creating new problems to solve

It’s easy to get caught up in the possible directions an app might go. I like to encourage input from all interested parties early on so that opportunities aren’t missed. We made a to-do list in Trello that included Google Maps integrations and Redux implementation. As we worked, we saw new potential in the application as well and continued to add to our wish list for the project. Redux was made a priority in order to clean up much of the React code and to give us a solid foundation to build out new data oriented features.

Next…

In the next article, Greg will cover the addition of Redux to the app.