Eco-Soap Bank is an international humanitarian and environmental non-profit organization employing the strategy of three R's -reduce, reuse and recycle to save the environment. The organization is dedicated to saving, sanitizing and supplying recycled soap from hotels and manufacturers for the developing world to reduce disease and save lives.The organization employs economically disadvantaged women in 10 developing countries to recycle leftover soap from hotels and manufacturers and redisribute it to save lives. The organization currently employs 154 women and has sustainably supplied more than 3 million people with lifesaving soap and hygiene education.
In a bid to automate elements of its partnerships with the suppliers (hotels and manufacturers) and partners(NGOs who buy the soap and corporations who sponsor Ecosoap) the Eco-Soap Bank embarked on the development of a web portal by collaborating actively with Lambda School.
Building a Single Page Web Application for Ecosoap
The lab 27 Ecosoap web team set out to build an orders app (that comprise both front-end and back-end) where customers would be able to log in and manage orders via a public page on the website.
The app should also allow for the organization to view, edit, cancel and process orders made by the buyers for payment via Stripe API.
The Lab was the best part of my learning journey at Lambda and what an unforgettable one month experience this has been.It all started from the first day with having to pick up various terms or should I say vocabularies: user stories, ideation, cross-functional team, stakeholders, etc to mention a few.The Labs provided a first experience on a real product team and I had to face the enormous challenge head-on of recalling and applying all I had learnt in earlier units( react.js and web/node API) before CS. This made me to think thet perhaps the previous practice of doing CS after Labs was better because most of the things learnt in CS were not applied during Labs.
The whole process started with planning by studying the product vision document often referred to as Roadmap (another addition to my least of vocabs) at the first cross-functional team meeting including both IOS and Web developers to gain an understanding of the product requirement and expectations.This made me to be conscious of the importance of team collaboration and deliberation in decision making to achieve team goals. This team meeting was followed by a meeting of the team with the stake holder to iron out the grey areas that were identified for further clarifications.With the two meetings we had a better understanding of what the was expected of the team.
The expectations were broken into user stories on Trello cards after identifying the user types for the app: public buyers, authenticated buyers and administrators. A user story describes product functionality from a user's perspective and serves as a collaborative tool and a reminder of of what the user needs so that the team can deliver it well and and quickly too. The team came up with user stories that were broken into tasks for the front-end and back-end as illustrated in the pictures below.
From the identified user stories broken into tasks the web team produced an app that has the following basic features as illustrated in the accopanying pictures below:
Login Page
Navigation Bar
This takes us to Home, Neworder, Dashboard My Profile and Logout pages
Neworder
This is the form for a user to enter details for an order and submit the order
Dashboard
This enables the user to view all orders and filter the orders and add an order. This also has a draw down to view a specific order, edit or cancel a specific order.
View, Edit, Cancel a specific order
Stripe Payment
The feature allows the user to enter card details and pay for an order
List Stripe Payments
This diplays the payments that have made and are on displayed on Stripe web portal
Technical Challenges
The web team was confronted with a couple of technical challenges.
At the backend the main problem was setting up the Stripe API payment and linking it up with the Ecosoap app so that the user can make payment with card.This was addressed by creating a stripe account to get the secret keys for both the front-end and back-end and a pricingService.js for checking price and inputting customer details for payment via Stripe.
Identified Areas of Focus for the Future
-The app for now has no provision for autobilling with a billing number /id. This might be considered for implementation.
- There is no distinction between a customer user and admin user. This should be distinguished in terms of login/authentication/ authorisation priviledges.An authenticated buyer and an ordinary buyer shoulg be distinguished
Self Reflection
The Labs was a good learning experience for what it is like in a typical production/development environment and has helped to sort of instill some confidence in me.
-
Top comments (0)