Personal Project

Showcasa - Digital Artist Portfolio

NextJSsocketIORedis Pub-SubMongoDBtRPCTailwind CSS

Overview

Built with NextJS, tRPC, socketIO, Redis Pub-Sub, cloudinary and MongoDB. Features include portfolio management, posting and interactions (like, comment and follow), and real time chatting.

Key Features

User authentication and authorization
Portfolio management
Advanced filtering and search
Real-time chatting with socketIO
Post creation and interactions (like, comment, follow)
Responsive design with Tailwind CSS
Real-time notifications

Architecture & Decisions

Component ArchitectureUsed atomic design principles to create reusable components, ensuring consistency and maintainability across the application.
State Managementused Zustand for global state management, allowing for efficient data flow and minimal re-renders.
Database DesignChose MongoDB for its flexibility with post, chat schemas and ability to handle unstructed data efficiently.
Real-time ChattingImplemented a Redis Pub-Sub system to handle real-time messaging efficiently by sending updates from NextJS server to socketIO server, ensuring low latency and high availability. Used eventhogh the statelessness of Pub-Sub since the data is already in the database and can be fetched when needed.
choosing tRPC instead of RESTSince the data is unstructured needed a lot of queries and mutations, tRPC provided a type-safe way to define API endpoints and handle complex data interactions without underfetching or overfetching data. Since it's a monorepo typescript project it was easy to integrate tRPC with NextJS and Zustand for state management.
Zod for type checking Used Zod for schema validation in tRPC procedures, ensuring that all data sent to the server is properly validated and typed, reducing runtime errors and improving developer experience.
SecurityUsed tRPC for secure API routes and implemented JWT-based authentication for user sessions.

Challenges & Solutions

Challenge / Problem

Real-time Chatting required external server with socketIO

Solution / Implementation

Implemented a Redis Pub-Sub system to handle real-time messaging efficiently by sending updates from NextJS server to socketIO server, ensuring low latency and high availability. There are better options than this but implemented this due to time constraints.

Challenge / Problem

Some functionalities required multiple database queries

Solution / Implementation

Used MongoDB transactions to ensure data consistency across multiple collections, allowing for complex operations like post interactions and user notifications to be handled atomically.

Challenge / Problem

Middleware setup for authentication using tRPC

Solution / Implementation

Defined public and private procedures in tRPC to handle authentication and authorization, ensuring secure access to user data and actions.