Seconds

Inspiration

The inspiration came from the need to build excitement and anticipation for events. Whether it's a product launch, birthday party, conference, or any special occasion, having a visual countdown creates engagement and helps people remember important dates. We wanted to make it easy for anyone to create beautiful, shareable countdown timers without technical knowledge.

What it does

Seconds is a full-stack event countdown application that allows users to: Create custom countdown timers for any event with personalized themes and colors Track RSVPs with email collection and management Categorize events (Technology, Health, Education, Finance) for better organization Generate unique slugs for easy sharing Add custom cover images and styling Integrate with Google Calendar for seamless event planning View live countdowns that update in real-time Browse and discover public events created by other users

How we built it

Frontend: Next.js 15 with React, featuring server-side rendering and app router Styling: Tailwind CSS with custom component library using Radix UI primitives Authentication: NextAuth.js with Google OAuth integration Database: MongoDB with Mongoose for data modeling File Upload: UploadThing for image handling Deployment: Configured for Vercel with optimized build process Key components include the createCount function for event creation, the CounterPreview component for real-time countdowns, and the comprehensive Sidebar form for event configuration.

Challenges we ran into

Slug Generation: Ensuring unique event URLs while maintaining readability - solved with the generateUniqueSlug function Real-time Updates: Managing countdown timers that update every second across multiple components Color Theme Management: Converting between different color formats (hex, HSL, CSS variables) for consistent theming File Upload Integration: Implementing reliable image uploads with proper error handling and loading states RSVP Management: Building robust email validation and duplicate prevention for the rsvpToCount system

Accomplishments that we're proud of

Built a complete full-stack application with user authentication and data persistence Created an intuitive multi-step form with live preview functionality Implemented real-time countdown timers that work seamlessly across the application Developed a flexible theming system allowing users to customize colors and styles Built comprehensive RSVP management with email tracking Achieved responsive design that works well on all device sizes Successfully integrated multiple third-party services (Google OAuth, UploadThing, Google Calendar)

What we learned

Advanced Next.js patterns including server actions and the new app router MongoDB integration with Mongoose for schema design and validation Real-time state management in React for countdown functionality File upload handling and image optimization techniques Building reusable component libraries with consistent design systems Authentication flows and session management Deployment optimization and performance considerations

What's next for Seconds

Enhanced Analytics: Add detailed RSVP analytics and event performance metrics Social Features: Allow users to follow other event creators and get notifications Advanced Customization: More theme options, custom fonts, and layout variations Email Notifications: Automated reminders and confirmation emails for RSVPs Event Templates: Pre-built templates for common event types Mobile App: Native mobile application for better on-the-go access Integration Expansion: Connect with more calendar services and social platforms Collaborative Events: Allow multiple users to co-manage events Advanced RSVP Features: Waitlists, capacity limits, and tiered access levels