This project was built with Next.js 13, replacing an old site to provide a user-friendly ticketing system. The application allows back office staff to edit ticket sections, offers customers the ability to get quotes for tickets, and enables users to download, pay for, and view their tickets, all through a simple and intuitive interface. As this is a work project some details can't be shared.
Technologies Used: 💻
- Next.js 13 (App Dir)
- React.js 18
- TypeScript
- Firebase
- Drupal
- Zustand
- Sass
- React Calendar
- React Beautiful DND
- Frames React
- Jenkins
- Docker
- Jest
- Msw
- React Testing Library
Architecture and Key Components: 🏗️
The application leverages the Next.js 13 architecture with server components and refactored API route handlers for enhanced performance and security. Ticket data is fetched from a database, controlled by an admin panel, and then saved into a Firebase database, which is returned to the user. All these actions are securely performed on the server. Lastly, we used Docker and Jenkins for deployment, helping maintain consistent environments from development to production and automating our updates.
Challenges and Solutions: ⚙️
State Management: 🔄
One significant challenge faced during development was managing the synchronization of the application state with the cart object upon every user interaction (GET, POST, PUT, DELETE). This was solved using Zustand, a robust state management solution. The cart object is saved in the database for a period of time, ensuring items added to the cart by users are retained. Upon any user action that modifies the cart (addition, edition, or deletion of tickets), the application state is promptly updated with the new cart object, ensuring a smooth and consistent user experience.
Performance: 📈
Performance was a key consideration during the development of the application, particularly in relation to state management. To overcome potential issues, Zustand was utilized as the state management solution instead of useContext. This approach eliminated the need to wrap all or parts of the application in Context, as Zustand states could be used as a hook in components as needed. By leveraging Zustand and server components, parts of the application were split and only components that were interacted with were re-rendered, greatly enhancing the overall performance of the application.
Authentication: 🔒
The application also features a secure authentication system for the admin panel. Given the strict deadline for the MVP, existing login system was utilized which fetches the user session and returns access rights. A custom hook was created that could be used on the client side to verify if the user has a specific role. This hook also updates the session state, ensuring proper access control and security for the admin functionalities.
Admin Panel: 🔧
The Admin Panel is a key feature of the application, allowing back office staff to manage ticket sections. The data for the Admin Page is constructed via a server component. Due to its dependency on the react-beautiful-dnd package, which only functions on the client side, the BoardSection component is imported dynamically with the default server-side rendering set to false. This setup ensures smooth and efficient operation of the Admin Panel, while maintaining compatibility with client-side packages.
Next.js 13 Update: 🔄
The transition to Next.js 13 presented a learning curve, particularly as the project development started when the 'app dir' feature was still in beta, which came with its own set of bugs. Transitioning from a React background to rendering components on the server was a new concept, but it ultimately proved beneficial. It aided in keeping components isolated, maintaining an easily readable file structure, and building a scalable application. The experiences from this update have not only improved the current project but also enhanced my approach towards future developments.
Testing: 🧪
The application was thoroughly tested using Jest, MSW (Mock Service Worker), and React Testing Library. This robust testing setup ensured that all components and functionalities worked as expected and maintained high quality standards throughout the development process. Each feature and update was put through rigorous testing scenarios to catch and fix bugs before deployment. Furthermore, Husky was used to set up pre-commit hooks to run tests and build the application, ensuring its readiness for deployment after every commit. This additional layer of automated testing and building helps maintain the application's reliability and consistency across updates.
Documentation: 📄
A comprehensive set of documentation was created alongside the development of the application. This was particularly aimed at new developers joining the project, providing clear explanations of the project structure, technologies used, and implementation details. This focus on clear, understandable documentation ensures that future maintenance and feature additions can be made efficiently.
Results and Future Improvements: 📈
The MVP was successfully delivered on time, including features such as ticket listing, CRUD operations on the cart, and a customer accounts page with login, logout, quote payments, and ticket viewing and downloading functionalities. Also, an admin panel was created for staff to edit ticket sections.
Future improvements can be made to state management, with focus on optimizing Zustand usage to minimize unnecessary component re-rendering. Cookie compliance is to be completed, and the drag and drop package needs updating to resolve console errors related to an older version of Redux.