App which save lives in Africa
Tags: react, africa, graphql, mapbox
Published: 2020-08-29 02:14:40

# Description

Eco-Soap Bank is an award-winning international humanitarian and environmental nonprofit organization employing economically disadvantaged women in 13 developing countries to
recycle leftover soap from hotels and manufacturers and redistribute it to save lives. The organization currently employs 154 women and has sustainably supplied more than 2 million people with lifesaving soap and hygiene education.

# The project purpose

### Congratulations to our founder Samir Lakhani on receiving a 2017 CNN Heroes Award!

Samir accepted a CNN Heroes award for his work with Eco-Soap Bank in December 2017. We're profoundly grateful to all those who supported us during the campaign, and we're honored to continue fighting for a world in which no child suffers because there wasn't any soap available. Thanks to you, we'll be able to expand our mission to provide soap and promote lifesaving hygiene across the developing world.

♥ The Eco-Soap Bank Team 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ifh13bhv8qap0si628on.jpg)

# Resources

Stakeholder will provide GraphQL endpoints

We’d like to represent various data visually on a map on our website for current and potential
donors and partners to explore.

# Deliverables And Road Map

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/am2kv4pzvccvmn59p5lr.png)

# Trello board and recently done ticket 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nyqlr7cndq8o7l84oclr.png)

Recently was done:

- Created Wireframe 

- Get access to Eco-Soap API

- Create user-creation form as Admin

- Implement CRUD actions fro creating a new admin user

- Test features

- Deploy app
 
# Planing 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e9reh068magy4ls0vd7a.png)

# Next step 

As a user, I can view the Eco-Soap Bank data as a table

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tc48avmx9uz6ndtzqi45.png)


- Create Wireframe

- Get access to Eco-Soap API

- Create container and table to display the data

- Implement CRUD operations to support getting data

- Test features

- Deploy app

# Current State 

- 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


# The App

At this point time we are still in the process of building the main functionality for the app. Final styling and testing of most components is still outstanding.

# Upcoming Features

- 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

# New technology

During this project i have challenged myself learning GraphQl and Apollo CLient, and understanding why GraphQl is better the RESTful API, it was absolutely new technology and i proud of myself to learn this things. 

# Peer Feedback

I think that feedback from managers, peers, and reports is critical to identifying performance strengths and weaknesses. It provides employees opportunities for growth and education in their roles. What’s more, it often results in improved communication and better understanding of expectations in team

# Map Integration 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ydajmbhsfv6x1uq91nx.png)

# Login form 
Auth form using OctaAuth API 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/juzs79o9r43d029q9w49.png)

# Snippet of code map integration using MapBox API
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ulmjbt9qid0ydw6qmijh.png)

Lab experience was amazing, i was learning a lot, pick a new technology such as GrapQl, Apollo Client etc.  Improved my team skills and communication skills, also i was practice Interview skills with my TL. Got improved CV and social media.