Kandy's Launderette

This is a Next.js project created with create-next-app. I developed this project as an alternative Static-Side Rendering project based on the previous Client-Side Rendering project, seen on my gihub as Kandy's Launderette website.

This projects is developed solely with Next.js 13 - featuring, Typescript, Javascript, React 18, Tailwindcss, Framer-motion animation and a Headless WordPress CMS API for content fetching.

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 a Server Side Rendering project website. After going back and forth with the client this is the updated design. The first version of this website which is the minimum viable product website I already built is located below.

Live Link: https://todd-owen-mpeli.github.io/Kandy-s-Launderette-Website/src/index.html

Github Link: https://github.com/Todd-Owen-Mpeli/Kandy-s-Launderette-Website

The main objective is to display the updated 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.

MacBook Viewport (Screenshot)

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

Lessons Learned

I really enjoyed the process of creating reusable components such as the Navigation and Footer. Integrating each component across the entire websites, while also styling the entire website elements.

1. I enjoyed utilizing the Next.js 13 & React 18 features. Importing components, features and scss styling files into a newly created pages or components.
2. Utilizing tailwindcss to style all my components with also the use of Sass or styled components for example. Learning how to use the difference between styled components or sass.
3. I Enjoyed learning Tailwindcss for better CSS styling, JSX component structure and creating specific reusable variables for better optimization. Also for better mobile responsiveness, it also improved/ resuced CSS file reduction.

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. A database intergration for user profiles example Firebase.
2. A payment processesor such as Stripe Payments. 3.. More Team-orientated Git operations specifically branch and merge this will initialize a more realistic team development workflow process.
3. More Sliders and animated visual sections make the website more interactive.

MacBook Viewport (Screenshot)

1. 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. Create a client database example a email client database.

Deployment

Deployed with vercel here:

a). https://kandys-launderette.vercel.app/

b). https://kandys-launderette-todd-owen-mpeli.vercel.app/

c). https://kandys-launderette-git-main-todd-owen-mpeli.vercel.app/

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.