Tabungan Wisata Dashboard
This page contains the case study of Tabungan Wisata Dashboard project which includes the Project Overview, Tools Used and Live Links to the official product.
Project LinkProject Overview
This project is a comprehensive user dashboard for a travel agency. The dashboard offers various features designed to enhance the user experience and provide greater control over their travel activities.
Key Features:
- Integrated Top Up: Users can easily top up their account balances through integrated payment methods with the Midtrans payment gateway. This provides a smooth and secure experience for financial transactions.
- Balance and Transaction Management: The dashboard provides clear visibility into account balances and user transaction history. Users can easily track their expenditures and monitor their balance progress.
- Real-time Notifications: By integrating WebSocket technology, this dashboard allows users to receive real-time notifications about their account activities, travel updates, and other important information.
- Progressive Web App: The application is built using the Progressive Web App (PWA) concept, allowing it to function like a native app on mobile devices, providing a more responsive and immersive experience.
During the development process of this project, there were several challenges to overcome and valuable lessons learned:
- WebSocket Integration: Implementing WebSocket to support real-time notifications required a deep understanding of two-way communication between the server and client, as well as efficient connection management.
- Transaction Security: Ensuring the security of financial transactions was a top priority. Implementing data encryption, payment verification, and proper error handling were learned and applied to maintain the integrity and security of the system.
- Authentication and Authorization: Implementing secure authentication and authorization mechanisms was key to protecting user data and preventing unauthorized access. Techniques such as password encryption, session management, and role-based authorization were learned and properly implemented.
- Data Precision and Accuracy: In the context of financial transactions and travel management, data accuracy is crucial. Learning about proper data handling, input validation, and error management was done to ensure data integrity.
Tools Used
- Typescript
- React
- Next.js
- Sentry
- TRPC
- Tanstack Query
- Next Auth
- Socket.io
- React Hook Form
- Zod
- Tailwind CSS
- Shadcn UI