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

Home Page
Create Seller Account
Stripe Seller Account Creation
Account Created
Create Event
Create Event Details
Event Added
Event Details For Buyer
Join Waiting List
Stripe Payment For Buyer
Ticket Purchase Successful

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.

Project Repository

https://github.com/this-is-rachit/PlannedIt