/green-yoga-website

Green Park's Yoga business portfolio website / online booking system built with Node.js, React JS

Primary LanguageJavaScript


Project Brief

  • You are to design, build, deploy and present an application built for a real world customer. Meet with the business owner or organisation manager to find out what challenges they face. Find a problem that you can solve with an application and present your ideas to the client.

Background

  • As a recently certified yoga instructor, the client, Green Park required a website to promote herself
  • Also needed a way for her to display her classes schedule to others and make bookings via the website

Client Contact

Notes were taken from each of the interaction I had with the client:

  • Initial discussion to get the background and set out the requirements
  • Talked about what is realistically achievable given the time frame of 2 weeks vs what client wanted to include ideally
  • Went through a few existing websites of other yoga studios together to get an idea of what the end product should look like
  • Was handed over some rough wireframes
  • Checked if colour palette of components such as buttons, font colours, etc were okay and adjusted according to what the client wanted
  • Received a USB of the client's photoshoot to be used for the website
  • Demoed the features such as the booking function to ensure that the client is satisfied with the ease of use
  • Discussed and received approval from client in relation to the inability of integrating the payment feature by the deadline

Features

  • A small profile text
  • Gallery of herself performing yoga
  • A way to contact her
  • Add/edit classes and the details such as the type of yoga and location
  • A way for her students to book themselves into a class and a dashboard showing their upcoming classes

Application Design

User Stories

Trello for planning out the functionalities, different user types, etc

alt Planning

Entity Relationship Diagram

Draw.io for the Entity Relationship Diagram

alt Entity Relationship Diagram

Inspirations

Body Mind Life and Yoga Works were provided some good examples on how to design a booking website for a yoga business

alt Body Mind Life

alt Yoga Works

Rough Notes

I made sure to jot down any issues/ideas that I run into as I progressed with the project

alt Rough Notes

Screenshots

Landing page

alt Landing Page

Login page

alt Login Page

Classes schedule where students can book classes

alt Classes Schedule

Classes administration page where teachers/administrators can add classes

alt Add Class

Dashboard where important information such as booked classes are summarised

alt Dashboard

Gallery section

alt Gallery