Planned It
TailwindReactClerkStripeshadcn/uiConvexNext
Thursday, June 20, 2024
1. Project Vision
PlannedIt was created to fix the slow, outdated, and frustrating experience of existing event ticketing platforms. The vision was to build a fast, modern, and transparent marketplace that provides a seamless, real-time experience for attendees and a simple, powerful platform for organizers to manage events and receive direct payments.
2. Technology Choices
The tech stack was chosen for a real-time, secure, and scalable platform:
- Framework: Next.js 15 and React 19 were used for a performant, SEO-friendly, and interactive UI.
- Backend & Database: Convex provided a serverless real-time database and backend, powering live features like ticket counts without complex infrastructure management.
- Authentication: Clerk was integrated to handle all user sign-up, sign-in, and profile management securely.
- Payments: Stripe Connect was used to create a true marketplace, allowing organizers to set up their own accounts and receive direct payouts.
- UI & Styling: Tailwind CSS and shadcn/ui were combined for rapid development of a clean, modern, and fully responsive interface.
3. Challenges & Solutions
- Dependency Conflicts: Resolved integration issues between advanced libraries by using the npm install --legacy-peer-deps flag.
- Next.js Hydration Errors: Prevented server-client mismatches by isolating client-side logic with useEffect and using dynamic imports (ssr: false) for client-only components.
- Stripe Connect Complexity: Managed the intricate seller onboarding and payment flows by creating dedicated API routes to handle Stripe webhooks, which then updated the seller's status in the Convex database.
4. Image Section











5. Final Architecture
The final architecture is a powerful, decoupled system:
- Frontend: A fully responsive Next.js application serving the UI.
- Backend Logic: Handled by serverless Convex functions, which are triggered by client-side actions.
- Database: A real-time Convex database that syncs data instantly across all clients.
- Services: Authentication and payments are delegated to best-in-class third-party services, Clerk and Stripe, allowing the core application to remain focused on its unique features.