My Journey & Learnings
Difficulties Faced
- Building a secure, multi-server architecture: Ensuring secure communication between the client, webhook, and mock bank servers was a significant challenge. This required careful implementation of protocols and secure endpoints to prevent unauthorized access.
- Implementing real-time updates without a dedicated library: Integrating technologies like Webhooks and a mock banking system required custom logic to handle asynchronous events and maintain data consistency across all services.
- Learning new technologies under a tight deadline: The project pushed me to quickly and effectively learn several new technologies like Redux, NextAuth, and Turborepo, which was a demanding but rewarding process.
- Fixing UI Bugs: Fixing subtle UI bugs proved to be a significant time investment, often requiring several hours to debug and resolve seemingly illogical issues on the front end.
What I Learned
- Scalable Architecture: Gained hands-on experience in designing a modular, multi-server architecture that is both secure and scalable.
- State Management: Mastered complex state management with Redux to handle global application state efficiently.
- Component Reusability: Developed a deep understanding of component-based architecture and created my own reusable components for common UI elements.
- API Integration: Learned to effectively integrate and manage a custom webhook system for seamless, real-time communication between services.
Technologies Used
Next.js
Express.js
ReduxNew
TurborepoNew
CI/CDNew
Tailwind CSS
Prisma ORM
Zod
Docker
WebhooksNew
Postgres
Next AuthNew
Cloudinary CDNNew
The front-end of this project was meticulously handcrafted using only **Tailwind CSS**. No external UI libraries or component frameworks were used. This includes all custom alerts, popups, and dialogs, demonstrating a deep understanding of core web development principles.
Project Architecture
The PowerPay application is built on a robust, microservice-like architecture to ensure security and scalability. The system is composed of three primary services:
- Client Server: The user-facing front-end built with Next.js and React. It handles user authentication, dashboard display, and all user interactions.
- Webhook Server: A dedicated service that securely listens for events from the mock bank server. This decoupled approach ensures that the client server never directly communicates with the bank, significantly enhancing security.
- Mock Bank Server: A simulated banking service that handles all financial transactions. It sends a secure webhook to our webhook server upon transaction completion, maintaining a secure and reliable communication flow.
This architecture ensures that all sensitive financial data is handled through a secure, non-public channel, providing a high level of security and integrity for the entire system.