teosean00 / gobook-frontend

A one-stop class booking application built with a Microservices Architecture to manage a company’s class and user system, storing & displaying information for the classes and users via a catalogue page, along with a class reviewing functionality and a class recommendation feature for users based on their previously attended classes.

💫 About Me:

• 👋 I'm Teo Sean
• 🏫 I'm a Penultimate Student at Singapore Management University (SMU)
• 💻 I'm pursuing a Bachelor of Science (Information Systems), Majoring in Digitalization and Cloud Solutions
• 💓 I'm passionate about building user-centric, secure and scalable Full-Stack Solutions that ultimately create a positive impact for the users

🌐 Socials:

💻 Frontend Tech Stack:

💻 Backend Tech Stack:

💻 Other Relevant Tech Skills:

📊 GitHub Stats:

You are visitor number:  

gobook-frontend's Issues

feat: Implement Simple Review Form

Context

• form for user to write reviews for a specific class
• user can only write reviews for classes attended

Description

• POST request to feedback/review service
• confirmation when review submitted

feat: Integrate Profile Page with Backend Data

Context

1. Profile page to be populated accordingly by calling Backend services, in particular the Interests, Signed up Classes and Reviews section are to be populated.
2. To create a services/api folder to store these backend calls

Test and passing criteria

1. Backend data called must be accurate for every user.

feat: Implement Recommendation Page and Features

Context

1. Implement the form component to ask users to give their inputs on their skills, interests and availabilities
2. Return the relevant classes that match the users input for them to carry on with their booking

Test and passing criteria

1. Classes returned should be accurate based on user's input
2. Classes should be returned in the order based on most matches to least (More Backend)

feat: Implement Payment Form

Context

• payment gateway using Wise/Stripe API
• receive and transfer money from dummy wise account
• basic form validation
• link to messaging/email service to notify user of payment status

Wireframe

feat: Implement Basic React Routing Features throughout Application

Context

1. Basic react routing features so pages can be accessed by their respective links
2. To connect the various pages throughout the app together

feat: Implement All Courses/Course Catalogue Component

Context

• grid view of classes

Tests and Passing Criteria

• Looks nice
• User should be able to click on courses on the calendar to view more information, linked to course information page
• query data from backend

Wireframe

feat: Integrate Backend Data For Review Catalogue

Context

• reviews currently not being retrieved from DB

bug: Empty review form input for users who have not booked a class

Description

How to Reproduce

Steps to reproduce the behavior:

1. restart docker container to reset DB

Expected behavior

• display another UI that does not allow user to make review

Environment

OS	[e.g. macOS Mojave]
Browser	[e.g. Chrome 79]
Node version	[e.g. v10.15.3]

feat: UI for booking

Creating page to show all courses that will link to individual course page

feat: Implement User Profile Page UI

Context

• User profile page displaying basic and personal info for logged in user
• Information such as: name, email, interests, registered classes, given reviews

Test and passing criteria

• Looks nice and responsive
• Query data from backend
• Ability to click on interests, classes, reviews and be redirected accordingly

feat: Implement Basic Navbar

Context

• Needs to be decently functional (not all the links need to be routed if not in use)
• Sticky
• hamburger menu for smaller screens (not critical)
• Links: Class Schedule, Profile, Recommend Me, Booking

Tests and Passing Criteria

• Should be responsive (breakpoints in place for smaller screens and should be able to spread for larger screens)

Wireframe

feat: Implement Course Card Grid Layout

Context

• need a placeholder for course cards

Description

• parent component of course cards
• mobile responsive using grid

feat: Implement Individual Course Information page

Context

• display information of the course (class size, instructor, description)

Tests and Passing Criteria

• Responsive

Wireframe

Making review users dynamic

Context

Currently review user is hardcoded as anon

Description

making it dynamic

Alternatives Considered

Additional information

feat: Process Booking Logic

Context

• process the booking on the frontend

Description

• user should only be able to book for a class if user not already in class

Additional information

• post request to backend only after payment page, refer to issue #7

build: Add Build Scripts

• Issue Templates (Feature Request & Bug Report)
• PR Template

feat: Query Courses From Backend Into Course Catalogue Component

Context

• query courses from backend

feat: Implement Course Card Component

Context

• Reusable Card component that links to respective individual course pages

Wireframe

feat: Basic login UI

Context

• for user to sign in to use our booking system
• username and password fields
• functional login button
• pseudo register and forgot password button

Tests and Passing Criteria

• should have input validation
• OAuth for authentication

Wireframe

fix: Button Component Color Prop

Description

change color prop doesn't change color of button

Screenshots

Environment

OS	[e.g. macOS Mojave]
Browser	[e.g. Chrome 79]
Node version	[e.g. v10.15.3]

Additional context

feat: Implement Reviews Catalogue Component

Context

• for user to view reviews for each course
• review is for the COURSE, not for instructor or specific timing

feat: Courses Page with Search Bar

Context

• Page showing all courses

feat: Implement Hero Section

Context

• simple hero section that links to
  • Find Course Page
  • Write a Review Page

Wireframe

feat: Implement Search Functionality

Context

• allow users to search for courses by keyword or topic.

Description

• search for title of course

feat: Integrate processing_booking service to payment page

Context

Process_booking service generates payment component based on the information passed in from the course booking page.

Description

Information taken in from course booking
"userEmail","userName","orderID","courseName","coursePrice","courseDescription","classID","runID","userID"

Currently payment field only loads on button click because it doesnt take in information from booking page.
Suggestion is to on pageload / before pageload call the makePayment function that would display the payment field based on the data given.

feat: Implement Booking Form

Context

• allow user to select available class
• allow user to select timeslot
• bring user to payment form