Skip to content

Reservation app with backend and frontend. It uses lock feature to lock seat so other people cannot reserve this same seat in the same time.

Notifications You must be signed in to change notification settings

mrozowski/reservation-lock-demo

Repository files navigation

Demo Reservation System

Introduction

I started this project to practice technologies, design architecture, and development methodologies such as BDD and TDD. Here I'll show the overview of used technologies, the user interface, and the process of bringing this project to life.

Project Overview

The project consists of 3 main components, Reservation Service, Payment Service, and Frontend.

main-project-diagram

Main features

  • Searching trips
  • Making reservation
  • Making payment
  • Checking reservation details
  • Canceling reservation
  • Seat Locking

Technologies Used

The Reservation System uses a robust stack of technologies:

Reservation Service Payment Service Frontend Other
Java 17 Golang 1.21 React.js Docker
Spring Boot 3.2.0 axios Kubernetes
Postgresql 12 Minikube
Liquibase Intellij
Hibernate Figma
Cucumber Whimsical
Spock
Testcontainers

Payment process

I tried to make the payment process similar to the Stripe flow

  1. The user decides to reserve a ticket. That sends a request to the backend for payment.
  2. Backend contacts a Payment Service to generate a special key for the payment (client secret)
  3. The backend then sends this key back to the user.
  4. The user uses this key to make a secure payment with their credit card through the Payment Service.
  5. Once the payment is complete, the Payment Service automatically notifies the backend using a webhook.
  6. Backend finalizes the payment process.
main-project-diagram

Frontend

Main page with trip search image

Reservation Details image

The Development Process

Requirements and Planning

The project began with a consideration of both functional and non-functional requirements. To visualize the system's structure, I used Whimsical to create diagrams and database relation diagram.

For the project implementation I used Domain-Driven Design (DDD) approach, and hexagonal architecture. This allowed for a clean separation of concerns and facilitated the implementation of domain-specific logic.

Developer Journal

  1. First Implementations:
    • I started by implementing the Reservation Service and the Trip List feature, enabling users to search and filter available trips.
    • I added unit tests, and I implemented Cucumber end-to-end test to align with a Behavior-Driven Development (BDD) approach.
    • Implementing e2e test was a bit challenging. I had to solves issues like run Spring App and Database and fill it with test data automatically for e2e test.
  2. Evolution of backend service:
    • With some initial implementation in place, I started aligning with Test-Driven Development (TDD) and Behavior-Driven Development (BDD) approach. I have to admit implementing all scenarios of e2e test before implementing actual code is quite helpful. It made me think about functionalities and my service API. Thanks to this approach later on I didn't have to make many changes in my code.
    • I implemented other features like retrieving reservation details, canceling reservation and the main feature - making reservation.
    • Thanks to upfront implemented e2e test scenarios during development I didn't have to run the app and manually call endpoints for testing. I only run e2e test scenarios to validate if implemented feature works properly.
    • As the last feature I implemented a seat lock system to lock the seat after user choose it from UI. Thanks to this we can avoid issue with other customer reserving this same seat before first customer finishes his reservation.
  3. Frontend in React.js
    • First I started with designing a User Interface in Figma. Thanks to this I have prepared, colors, required pages, and functionalities for the website. So that during implementation I can focus only on implementing a website and not on how it should look like.
    • I chose React because I wanted to practice it more. I did a few simple websites in React in the past. I feel good with React I didn't have many issues. However, I know it was just a simple website.
    • The only problem I had was with dynamic typing in JavaScript. Very often I didn't know what field name object has that I passed as a parameter. IDE often didn't show errors and later on, I had to spend some time on debugging issues - which were caused by using a wrong field name. Probably that's why TypeScipt exists :D
  4. Payment microservice in Golang
    • I found that there are more and more job offers for Golang developers so I wanted to try this language and create a simple microservice for handling payment transactions.
    • The language seems to be very light however it has a lot of useful tools implemented into the language eg: unit testing or handling Rest API. Certainly, I would like to practice more with this language in the future.
  5. Kubernetes
    • Kubernetes is a very common way of managing services so I wanted to use it as well in my project. In this case, I use Minikube to run it locally.
    • I created a docker image of my Spring Boot, React, and Go apps and ran it on the Kubernetes cluster.
    • I prepared Manifest yaml files that can be found in /kubernetes/chars/ directory
    • More about how to run project on Kubernetes locally here - instruction

About

Reservation app with backend and frontend. It uses lock feature to lock seat so other people cannot reserve this same seat in the same time.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published