Mazza Treatz online store

This is a SME Corner shop website project, for a business called Mazza Treats. I created this project to demonstrate my skills in the following tech stack Including other general web development technology such as Wireframes and UX/UI digital mockup's:

1. HTML
2. CSS
3. SCSS
4. Bootstrap 5
5. API
6. Git
7. Github (External Repositories)

As a junior software Developer I will be responsible with working with a UX/UI design team, Senior developer & SEO team alongside a existing web development team. Each responsible for managing, developing, maintaining, and supporting various web projects.

This intern means that, client briefs & project details will larging be all pre-determined. And I won't be responsible for designing an entire website functionality.

Although I will be required to have a minimum understanding of design principles, example the difference between padding and margin.

My main responsibilities will be converting client briefs & project details into concept designs with the goal of reaching production and finally live service.

Home Page Screenshot

1. Please note that this demo website was built without a client or UX/UI design brief. And was design entirely my myself. (As seen below)

2. All images are in 4K resolution, click to enlarge for better viewing.

Project Context

As like most people we all have a our favourite corner store to grab our favourite snacks. Mazza Treats is a small shop selling sweats, snacks, and drinks from a variety of North American and East Asian background. Establishment in mid 2020 it doesn't have an online presence and only offers an in-store experience.

For this project I approached the corner shop to build a website for their business. Specifically, provide Mazza treats customers the opportunity to see the vast products without the need to make the large investment of driving to the shops location.

I created a client brief, project details and a Adobe XD design file for this scenario. These hypothetical details in this demo project were based on other online retailers selling similar products.

My Objective

My objective was to build a online website for the corner store. Specifically, to increase the local corner store reginal presence, accessibility and to display the large variety of unique products sold. Since these products are not available commonly within the UK, building an interactable e-commerce website to display these unique products will help ease customer uncertainty.

Alternatively to bring this corner store in-store only shopping experience into an online platform.

Lessons Learned

I learned a lot building this application more importantly I really enjoyed the process of integrating a google maps API. 0 also enjoyed the complication of styling the entire website elements. Specifically how to position images outside their div container, while also making each image responsive to different viewpoints.

I Enjoyed learning SASS extension for better CSS styling, file structure and creating specific reusable variables for better optimization. Also using Bootstrap 5 framework for better mobile responsiveness really improved my CSS hard-coding file reduction.

1. Git operations specifically init, add, status, commit, remote, push and pull. Additionally creating a remote repository to learn a better development workflow process.
2. SCSS File Structure, _font.scss, color.scss etc. Creating seperate SCSS files for different attributes for better CSS opimazation.
3. Responsive website using Bootstrap 5 class intergration for mobile & tablet view-width breakpoints.

Mobile View Screenshot

1. Mobile view side by side of the landing page (Full page).
2. All images are in 4K resolution, click to enlarge for better viewing.

Personal Improvements

Although the website is fairly functional and provides the minimum viable product of displaying the large variety of unique products sold at the store, the current iteration of this project requires a list of improvements.

1. More Team-orientated Git operations specifically branch and merge this will initialize a more realistic team development workflow process.
2. Javascript functions for more interactive website, specifically HTML DOM element manipulation, displaying or removing items which are avaliable or sold out.

Potential Future Features

1. Develop a database with the products information.
2. Develop a product availability feature (available or sold out). This will then be updated on the website in real time.
3. Re-building the entire website with React and Node.js
4. Implementing a checkout feature, this will allow users to have their items reserved for a selected period of time. and then be able to drive in-store for collection or pay a shipping fee.

Deployment

Deployed with github pages here: https://todd-owen-mpeli.github.io/Mazza-Treatz-Website/