Building a custom mapping app with admin dashboard
Tags: react, antdesjign, graphql, mapbox
Published: 2020-08-28 15:00:48

# 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. 

![Deliverables table](https://dev-to-uploads.s3.amazonaws.com/i/gel9wd39y4u59rx8j6ru.png)

# Planning
![App user flow diagram](https://dev-to-uploads.s3.amazonaws.com/i/9w0vdqyhc2zssyh8g8wl.png)

## 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.
 
![Trello Card Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/hnaa7a2pk4pg1q3pwhgc.png)

## Technical Planning
![Engineering planning chart](https://dev-to-uploads.s3.amazonaws.com/i/60ujo9bv12lrgoz20kbw.png)

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 setup code sample](https://dev-to-uploads.s3.amazonaws.com/i/nm7zhma7vezpm561pde4.png)

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.

![Mutation code sample](https://dev-to-uploads.s3.amazonaws.com/i/9rr562i1y62q8ifgu82t.png)

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. 

![Data type editor screenshot](https://dev-to-uploads.s3.amazonaws.com/i/i1qankscbmlrlzt7g2xy.png)


## 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.