KandysLaunderette

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #deep-learning #macos #java #windows #cli #kubernetes #awesome-list #vue #security #ios

KandysLaunderette

(★ 13)

This is a Next.js 13 project website I've built for a local Dry-cleaning shop in Swansea. A Typescript based project using nextjs 13 static side rendering. This projects is developed solely with Next.js 13 - featuring, Typescript, Javascript, React 18, Tailwind, and a Headless Wordpress CMS API

KandysLaunderette Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Kandy's Launderette

This is a [Next.js](https://nextjs.org/) project created with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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.
2. 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:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](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](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](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](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

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

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

KandysLaunderette

KandysLaunderette Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

KandysLaunderette

KandysLaunderette Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README