The Challenge
Integrating real-time video/audio communication and managing complex state for booking schedules while ensuring type safety across a Next.js 16 (Beta) and Express backend architecture.
Tech Stack
The Solution
Leveraged React 19 and Next.js App Router for a high-performance frontend. The backend uses Express with Prisma ORM connected to a MySQL database for structured data integrity. Real-time features were implemented using Stream SDK (for Chat/Video) and Socket.io (for notifications), ensuring low latency. Payments are secured via Stripe.
1// Advanced Filtering with Prisma & MySQL
2const findSitters = async (filters: FilterProps) => {
3 return await prisma.sitter.findMany({
4 where: {
5 verified: true,
6 hourlyRate: { lte: filters.budget },
7 skills: { hasSome: filters.requirements },
8 // Location filtering handled via geospatial query
9 },
10 include: {
11 reviews: {
12 select: { rating: true, comment: true }
13 }
14 },
15 orderBy: { createdAt: 'desc' }
16 });
17};Type Safety
React Components
Performance Score
Key Highlights
Real-time Communication
Video calls & Chat powered by Stream SDK & Socket.io.
Smart Location Search
Interactive maps using Leaflet & geospatial queries.
Data Visualization
Analytics dashboard for revenue & bookings using Recharts.
Secure Payments
Integrated Stripe for secure booking transactions.
Next Project