DEV Community: Ben Haus

Building a custom mapping app with admin dashboard [Part 2]

Ben Haus — Thu, 24 Sep 2020 21:36:16 +0000

Background (from Part 1)

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:

Supply soap products to people in need
Reduce the waste that is generated form partially used hotel soap products
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.

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.

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.

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.

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.

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.

Building a custom mapping app with admin dashboard

Ben Haus — Fri, 28 Aug 2020 15:00:48 +0000

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:

Supply soap products to people in need
Reduce the waste that is generated form partially used hotel soap products
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.