Work Project

Extending Ticket Sales Website with Hotel Booking Features using Next.js 12

This project was an exciting opportunity to integrate hotel room sales into an existing ticket sales website. The application uses Next.js 12 and TypeScript, and was my first venture into these technologies. While there was a learning curve, particularly with the concept of hydration and TypeScript, I was able to effectively manage and overcome these challenges.

Technologies Used: 💻

  • Next.js 12
  • TypeScript
  • React.js 18
  • Sass
  • React Calendar
  • Jest
  • MSW
  • React Testing Library
  • Docker
  • Jenkins
  • Swiper
  • React Tabs
  • Immer

Key Updates: 🔄


The payment system was updated to facilitate hotel room purchases, adding a new layer of complexity to the existing application. The customer account section also underwent changes to accommodate these new functionalities. Despite some initial difficulties, particularly in integrating the payment system with our database, I was able to successfully implement these updates.

Challenges and Solutions: ⚙️

One of the major challenges was managing the application state and synchronizing it with complex object and array mutations. I overcame this by extending the state management using useContext and immer.

code-snippet (31).png

code-snippet (35).png

code-snippet (36).png

Performance: 📈


Given that the project was built in Next.js 12, it could benefit from an upgrade to Next.js 13, particularly to utilize new features like server-rendered components and server actions, which would significantly improve the application's performance.

Testing: 🧪


Despite the absence of initial testing framework in the application, I took the initiative to introduce a few testing strategy. I integrated Jest, MSW, and the React Testing Library to the project, enabling us to ensure the robustness and reliability of all functionalities. Moreover, I set up pre-commit hooks with Husky, which run these tests and build the application, thereby reinforcing a culture of testing and guaranteeing the readiness of the application for deployment after each commit.

Documentation: 📄


Clear, understandable documentation was created alongside the development of the application to aid future developers in understanding the project structure, technologies used, and implementation details.

Future Improvements: 📈

The project was successfully delivered, but there is always room for enhancements. While the application is currently built with Next.js 12, upgrading to Next.js 13 could unlock new possibilities:

  1. Server Rendered Components: This feature could help improve the application's performance by reducing the amount of JavaScript that needs to be sent to the client.

  2. Server Actions: This could make the application even more secure and faster.

  3. Font Optimization: With Next.js 13, we could leverage automatic font optimization to speed up the load time of web fonts, improving the user experience.

Additionally, a revisit to the state management approach could be beneficial. The current state management, handled using React's useContext and Immer, could be replaced by a more robust library like Redux or Zustand for increased performance and predictability, especially as the application scales.