NomadHair

Bringing Style to Your Place!

Live site

Table of Contents

1. About The Project
   • What is NomadHair?
   • Why?
   • Goals
   • Built With
2. User Guide
3. Roadmap
4. Contact
5. Acknowledgments

About The Project

What is NomadHair?

NomadHair is a men's haircut service that is delivered to your place.
Sign up, book your appointment, and enjoy the quality haircut without having to leaving your home.

Why?

I have been giving free haircuts to my friends and family for almost 5 years. It started as a hobby during my college years, but over time it became a monthly work - never had I expected that I would be giving a haircut to a pastor at my local church back then 😅. As more people came to me for a haircut, figuring out a good time for everyone started becoming a bit of a headache. I knew I needed to find a more effective way to let them know when I was free. This is where NomadHair comes in.

Goals

There are two goals I wanted to achieve through this project:

1. To launch my personal haircut service as a brand.
2. To build a web application in component-driven development (CDD) approach to investigate how CDD can solve complexities that arise in UI development, potentially leading to more consistent design and user experience across the product.

If you would like to learn more about how I built this project, check out following articles & docs:

• Building NomadHair: A Journey in Component Driven Development

  1. Laying the groundwork
  2. UI Library and Reusable Components
  3. UI Tests and Automating Testing Workflow

• Docs

  • Figma Design Documents
    A design document that includes UI mock ups, component design, and style guide.
    
    

  • Storybook Component Library
    A component library for this project.
    
    

Built With

• 
• 
• 
• 
• 
• 

(back to top)

User Guide

1.Sign up

Click on "Get Started" button to register. You will be redirected to Kinde authentication page where you'll be prompted to sign up using your Google account.

Once you are signed in, you'll be redirected to the home page. You'll notice that "Get started" button has now become "Book appointment" button. Click on the button to be redirected to "My appointment" page.

2.Book Appointment

Open up new appointment form by clicking on "+ New Appointment" or "+" button on the mobile browser.

Here, select your desired dates and available timeslots and fill out the address and other details.

3.Confirmation

Once the appointment is booked successfully, you will receive a confirmation through your google account email. Please verify the appointment details, and if you need to make updates, click on the "Edit" button to rearrange your schedule.

Roadmap

• Optimize form on iPhone
• Add "Add to Calendar" on Confirmation Email
• Address validation
• Add "Buy Me Coffee" button

Contact

For any questions regarding the project, feel free to reach out to me 🙂

• Email
• LinkedIn
• Github

Acknowledgments

• SVG Illustrations - unDraw.co

(back to top)