Kandy's Launderette Demo

This is a client-side rendering project specifically build as a minimun viable product project. It is a version 1 website I have built for a local Dry-cleaning shop in Swansea. It is constructed solely with HTML & SCSS - featuring a google maps API, Bootstrap 5 framework, and a custom Scroll Reveal AOS library.

Cover Screenshot

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

Project Context

Kandy's Launderette is a small Dry-cleaning store providing a multitude of services, Duvets & Quilts Cleaning, Drying & Washing Machines, Washing Detergent, Professional Ironing and Stain Removing. As a dry-cleaning store all its services are all in-store experience however this store doesn't have an online website for its customers.

Therefore building a online website will provide Kandy's Launderette customers the opportunity to see the lists of services provided.

My Objective

To build an online website landing page to display the list of services provided by Kandy's Launderette. Listing these services will provide customers the opportunity to see the value of the store without having to contact the store.

Alternatively to bring the dry-cleaning store services online for a more cost-effective experience. Example reserving specific services ahead of time before traveling to the store.

Services Page (Screenshot)

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

Lessons Learned

My first services centric website, I really enjoyed the process of integrating a google maps API, while also styling the entire website elements.

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. JavaScript HTML DOM functions; Specifically toggling displaying or removing the additional in-store services section.
2. Git operations specifically init, add, status, commit, remote, push and pull. Additionally creating a remote repository to learn a better development workflow process.
3. SCSS File Structure, _font.scss, color.scss etc. Creating separate SCSS files for different attributes for better CSS optimization.
4. Responsive website using Bootstrap 5 class integration for mobile & tablet view-width breakpoints.

Personal Improvements

Although the website is fairly functional and provides the minimum viable product of displaying the list of services, 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. More JavaScript functions for more interactive website, specifically HTML DOM element manipulation, displaying or removing items which are available or sold out.

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.

Potential Future Features

1. Develop a reserve services feature. (Example on a specific date & time book a slot for a service.)
2. Develop a service availability feature (available or not available). This will then be updated on the website in real time.
3. Re-building the entire website with React and Node.js

Deployment

Deployed with GitHub pages here: https://todd-owen-mpeli.github.io/Kandy-s-Launderette-Website/