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 Link![Project Image 0](/_next/image?url=%2Fimages%2Ftabungan-wisata-dashboard-0.png&w=3840&q=75)
![Project Image 1](/_next/image?url=%2Fimages%2Ftabungan-wisata-dashboard-1.png&w=3840&q=75)
![Project Image 2](/_next/image?url=%2Fimages%2Ftabungan-wisata-dashboard-2.png&w=3840&q=75)
![Project Image 3](/_next/image?url=%2Fimages%2Ftabungan-wisata-dashboard-3.png&w=3840&q=75)
![Project Image 4](/_next/image?url=%2Fimages%2Ftabungan-wisata-dashboard-4.png&w=3840&q=75)
Project 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