Mafi Mafi

Overview

Mafi Mafi is an existing clothing company based out of Ethiopia that pushes the boundary of Ethiopian traditional clothing into the modern era. I have been following the designer Mahlet Afework.The company is currently selling their products directly through their store located in Addis Ababa and showing their products through Instagram.

My motivation for creating this website was to show case the current items at their store based on their instagram posts, and allow users to create their own account and purchase these items securely through stripe checkout. The main aim of the website is to promote Mafi Mafi which is a small black owned business.

User Stories

The website currently allows:

1. Users to log in and logout of the application
2. Users to create an account.
3. Users to browse through a list of products.
4. Users to add/remove items from their carts
5. Users to see their final order cost and previous orders in their account
6. Users to make secure purchases through Stripe Checkout

Features

The website has a few implemented stretch features:

1. The website has a simple chat robot that navigates to links within the website. This is implemented using React-simple-chatbot
2. The website has a zoom in feature in order for users to zoom in on clothing items to get a better view of the product.
3. The website has a payment section that takes credit card information implemented through Stripe Checkout API.
4. The about page, has information about the designer and a live map for store locations, implemented through Mapbox third-party API.
5. The user can filter product options through the search bar or through the burger menu.

---

Check out the live site.

Getting Started

Note: In order to run this application locally, you will first need an API key from Stripe checkout and an API key from Mapbox.
1. Download Node and npm
2. Clone the project locally
3. cd into the directory
4. Install all dependencies
5. Run the server
npm start

Tech Stack

Front-End Tech Stack

• React
• Semantic UI
• CSS
• MapBox API
• Stripe Checkout API
• React-Simple-Chatbot

Back-End Tech Stack

Back-End Link
• Ruby on Rails

Future Features

Some stretch features that I would love to incorporate:
• IBM Watson for the chat feature
• Improving the UI Interface using User Center Design
• Add Mobile Responsiveness
• Add unit testing using JEST

Acknowledgments

I do not own any of the images or logos. If you would like to learn more please visit the Mafi Mafi Instagram page.

Contributor

Kalkidan Solomon Taye