LinkInPurry Network
Description
LinkInPurry is a professional networking platform for users to connect, share updates, and communicate securely. As part of IF3110 Web-Based Development coursework, this project served as the second assignment to demonstrate web development fundamentals.
Library / Tools Used
- React (SPA)
- Tanstack Query (Asynchronous State Management)
- Tanstack Router (Type-safe File-based Routing)
- Shadcn UI (UI Library)
- TailwindCSS (CSS Framework)
- Web Push API (Push Notifications)
- Hono.js (Back-End Framework)
- Prisma (ORM)
- Socket.io (WebSocket Abstraction)
- Swagger (API Documentation)
- Inversify (IoC Container)
- Zod (Validation)
- Winston (Logger)
- PostgreSQL (Database)
- Redis (In-Memory Store)
Features
- Landing Page
- Feed / Timeline Page
- Connection Inbox Page
- Messaging Page
- Expand Network Page
- My Posts Page
- User's Profile Page
- User's Connections List Page
Development Experience
For this assignment, I initially planned to use Express.js as my backend framework. However, after reviewing the assignment specifications and noting there would be stress testing in the final milestone, I decided to switch to Hono. Since I was still in the early stages of development, migrating from Express to Hono didn't require significant effort, and this decision proved beneficial as Hono offers superior performance compared to Express.js.
What particularly impressed me was how Hono's API closely resembles Express's, making the transition smoother, while offering an enhanced developer experience. One standout feature is its built-in Swagger OpenAPI integration, which automatically generates documentation as you write endpoints. Unlike Express, where you need to install multiple additional dependencies, Hono provides many essential packages out of the box. This experience has convinced me to choose Hono over Express for my future projects.
For the back-end of this project, I implemented dependency injection using Inversify and structured the project following clean architecture principles.
On the front-end, this project marked my first experience with TanStack Router. Despite being in early development, it performs remarkably well. I particularly appreciate its type-safe routing support. However, I did notice some limitations: the typescript loading can be somewhat slow, and its layout routing system feels less intuitive compared to Next.js's approach. Nevertheless, given that TanStack Router is still in its early stages, I'm optimistic about its future development and improvements.
This project also gave me my first opportunity to work with the Web Push API. I found it fascinating how you can send push notifications to users, with the added benefit that notifications are queued even when the browser is closed. This creates a more engaging user experience and ensures important updates reach users reliably.