Building a custom mapping app with admin dashboard

The project

My team was tasked with building a map with an admin dashboard for a nonprofit called Eco-Soap Bank. The goal is to be able to edit and display data points of Eco-Soap Bank contributors and clients.

The Stakeholder

Eco-Soap Bank is a nonprofit that supplies hygiene products to the developing work. Through their work they:

1. Supply soap products to people in need
2. Reduce the waste that is generated form partially used hotel soap products
3. Provide employment and education to disadvantaged women in developing areas where there are few reliable sources of income

Eco-Soap Bank collects partially used soap products from their hotel partners, sanitizes the soap and processes it into new bars, and provides the soap to communities in need.

Product Vision

The deliverables for this project are split across three product releases.

• Release one focuses on authentication, building a map component, and editing data types in the database.
• Release two includes implementation functionality to perform create, read, update, and delete (CRUD) operations on data records from a Eco-Soap Bank database. Additionally, release two will include filterable map layers to display the data records on a map.
• Release three will add a higher level of polish to the project by adding embedded HTML in the data records for increased visual appeal on the map and will also include pan and zoom functionality on the map.

Planning

User Stories

I order to break down our deliverables into manageable tasks the team focused on translating the requirements down into user-stories.

We then further reduced the user-stories into a list of tasks that would be required to fulfill each.

Trello

These user stories were then mapped into Trello cards so the work could be efficiently assigned and tracked. Each story was given a card, and then the necessary tasks to complete the feature were included as a checklist.

Technical Planning

We are building this project as a React app using Apollo Client for state management and the Ant Design React UI library. The team settled on using Apollo Client because it is a great solution for interfacing with a GraphQL back-end. Ant Design was a requirement that was imposed on the team.

Both of these technologies are new to the team and add a bit of a learning curve to our process.

Apollo Client requires minimal setup to get up and running. Once you create a client with the URI for the GraphQL server and connect it to the React app, you are ready to start pulling data.

Querying the database and posting data mutations is manageable. Once the query or mutation is written, it is only a matter of using the useQuery or useMutation hooks to perform the operation.

The App

The team is still in the process of building the main functionality for the app. Final styling and testing of most components is still outstanding.

Current State

The current state of the app includes the following functionality:

• Styled Okta sign-in screen
• Sidebar navigation menu with Eco-Soap Bank branding
• Create new admin account functionality
• Table that displays data types from the Eco-Soap Bank API
• Create new data type functionality
• Delete data type functionality

Upcoming Features

Upcoming features include:

• Display data records from Eco-Soap Bank API
• Functionality to perform CRUD operations on data records
• Map component to display data records
• Filtering layers functionality for controlling what data records are displayed on map
• Display and update user profile

Lessons Learned

So far in this project, lessons learned have primarily been related to the new (to me) technologies that I discussed previously.

Peer Feedback

Feedback is an important part of growth and working effectively as a team. On this project, the feedback has been positive, but limited due to the small size of the team. While I enjoy receiving praise, the lack of feedback has limited what I can learn about my self and my efforts to complete this project.

Looking forward

Building this Eco-Soap Bank has been a valuable experience in that it has given me the opportunity to learn new technology packages on my own and demonstrate that I can successfully work in a new ecosystem in a limited time-frame.

It has also helped me find a new appreciation of communication and feedback. Prior to this these may not have been a major concern of mine, but finding a workplace that clearly has inter-team and intra-team communication is now something I will heavily consider.