Building a custom mapping app with admin dashboard [Part 2]
Tags: react, apolloclient, graphql, antdesign
Published: 2020-09-24 21:36:16

# Background (from [Part 1](https://dev.to/phillybenh/building-a-custom-mapping-app-with-admin-dashboard-38f3))

This project (and these blog posts) are part of my education curring the 'Lambda Labs' portion of the curriculum at Lambda School

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

# Project Updates

## Editable Data Types
Since the last post, I have implemented components to allow the user to edit the data types in-line in the data types table. This is the most user friendly method for the user to edit this data as needed.  

![Screenshot of editable data table](https://dev-to-uploads.s3.amazonaws.com/i/swxewvtkxebs4guhg8n8.png)

## Data Records

The components to create, read, update, and delete (CRUD) database record in the EcoSoap Bank backend are complete. These components continue the simple styling and layouts used for the data types components. 

The form for submitting new data records features a dropdown selector that dynamically populates the options form the data types int eh database. For the database record miscellaneous fields, the user can add as many additional fields as necessary. 

![Screenshot of new data record form](https://dev-to-uploads.s3.amazonaws.com/i/p5ug1cjgjpsbrx31hsuz.png)

The data record table is sortable and is paginated to make it more user friendly. Since the number of miscellaneous fields each data record has is variable, the fields are viewable as an expandable sub-table. At the stakeholders' request, the 'id' columns have been removed from all tables in the app. 

![Screenshot of data record table](https://dev-to-uploads.s3.amazonaws.com/i/klmtl0oqgclnfl7zou2c.png)

To implement a feature to edit the data records, I decided that due to the more complex nature of the database records, a modal pop-up is the most appropriate choice for editing. 

![Screenshot of edit record modal pop-up](https://dev-to-uploads.s3.amazonaws.com/i/c2x1bf0j52l3cqnp7abj.png)

## Updated Navigation

Based on UI/UX feedback, the nav menu has been slightly modified. The new version features larger text for improved readability and improved spacing. Also, this version indicates the page fo the app the user is in by highlighting the current link. 

![Screenshot of updated nav menu](https://dev-to-uploads.s3.amazonaws.com/i/nlxepor09a13z9rrzc1n.png)

# Reflections

Overall, my experiance durring Lambda Labs has not been exactly what I expected. 

Over the past seven weeks, I have grown technically by being exposed to (and practicing self-learning) technologies that I had not previously used and was able to reinforce my skills with some technologies that I have been using throughout my time at Lambda School. During labs I have taught myself and practiced how to use a GraphQL database (from how the perspective of a front-end developer), using Apollo CLient for state management and performing CRUD operations, and using Ant Design to develop UI components for the app.  This project has also been an opportunity for practicing my JavaScripand React skills. Since this has been a longer duration project than the previous ones I have tackled, it has been a great opportunity to dive a little deeper into the Git version control functionality.

As far as professional growth is concerned, I think the majority of growth has come from having more opportunities (to be forced to) talk about the work I have done at Lambda and to practice answering interview type questions on the spot. I didn’t have any significant surprises about working in a team environment. What I was surprised about was that Lambda would set up a Labs project that effectively only had two members on a team. Based on all the Labs hype, I had definitely expected a more comprehensive project with a larget more diverse team. 

One thing I would approach differently would have been to try to switch to a project that had both front-end and back-end roles. In hindsight, I think our team missed out by only having two members in the same role. I would have learned more with a larger multidisciplinary team. I also would have approached learning new technologies differently. I learned enough little pieces that I could apply to the project, but if I were starting over I would try to learn more of the basics and fundamentals of Apollo Client and Ant Design before diving into the project work. 

If I were to start Labs over again, the change I would make is to get in the habit of having more regular and reoccurring communication with my teammate. The project got off to a bit of a slow start while we were waiting for the backend to be developed more and we did not develop a great pattern for working-together and communicating.