Implementation Deep Dives

VivahaPlan is a full-stack wedding planning platform designed to help couples and families manage every aspect of their wedding—from guest lists to vendor searches to pre-wedding trip planning. Here's how I built and continuously improved the platform over the past 75+ hours of development.

Here are the new updates and features I've added:

Interactive Tutorial System

One of the biggest challenges for new users was understanding all the dashboard features. To solve this, I implemented an 11-step interactive tutorial that guides users through each section.

• Keyboard navigation: Used event listeners to detect left/right arrow keys for step navigation and ESC to exit. Implemented with useEffect hooks to add and clean up event listeners properly.
• Progress tracking: Built a dot indicator system using array mapping and conditional styling based on current step index.
• Modal positioning: Centered the tutorial modal using flexbox with justify-content: center and align-items: center, added scrolling support for smaller viewports.
• State management: Stored tutorial state in React context to persist progress across page navigation within the dashboard.

Drag-and-Drop Navigation Customization

Users wanted control over which navigation items appeared in their sidebar. I built a full drag-and-drop system with database persistence.

• DnD Kit integration: Used @dnd-kit/core and @dnd-kit/sortable libraries to implement smooth drag interactions. Set up DndContext with sensors for mouse and touch.
• Backend API: Created /api/navigation/preferences endpoint that accepts PUT requests with the new navigation order. Updated MongoDB user schema to include navigationPreferences field as an array of objects.
• Visibility toggles: Implemented show/hide functionality with Eye/EyeOff icons using Lucide React. Updated state locally, then batch-saved all changes on "Save" button click.
• Optimistic updates: UI updates immediately on drag, with loading state during API call. Rollback mechanism if save fails.

Shareable Wedding Information

Couples needed a way to share wedding details with guests without requiring them to create accounts. I built a secure token-based sharing system.

• Token generation: Backend generates unique tokens using crypto.randomBytes(32).toString('hex') and stores them in a separate shareTokens collection with wedding ID reference.
• Public route: Created /wedding/{token} route that bypasses authentication middleware. Validates token, fetches associated wedding data, and renders public-facing page.
• Copy to clipboard: Used navigator.clipboard.writeText() API with success feedback toast. Fallback for older browsers using document.execCommand('copy').
• Auto-update notice: Added timestamp tracking to show guests when information was last updated, queried from database using updatedAt field.

Location-Based Hotel Block Search

Implemented a hotel search feature that uses browser geolocation to find nearby hotels with wedding discounts.

• Geolocation API: Used navigator.geolocation.getCurrentPosition() to get user coordinates. Error handling for permission denials with fallback to wedding venue location.
• Hotel data structure: Created mock hotel data with properties: name, distance, price, originalPrice, discount, rating, amenities, phone, bookingUrl.
• Tel links: Implemented clickable phone numbers with <a href="tel:+1234567890"> for mobile users.
• External booking integration: "Book Block" buttons link to partner booking sites (Marriott, Hilton, Booking.com) with query parameters for wedding groups.

Bachelor/Bachelorette Trip Planning

Enhanced the pre-wedding trip planner with transport mode switching and dynamic budget calculations.

• Transport mode state: Used React useState to toggle between flight and drive modes. Conditional rendering to show/hide relevant inputs.
• "Flying from" input: Added origin airport selector using Autocomplete component with IATA airport codes.
• Budget breakdown: Hidden by default, appears only after user clicks "Generate Total Estimate". Calculates totals by mapping over selected activities and accommodations.
• Mode switching: "Changed your mind?" button clears current selections and switches mode with smooth transition animation.

Backend Architecture

• MongoDB models: User model with navigationPreferences array, Wedding model with embedded guest arrays, ShareToken model with expiration timestamps.
• API middleware: Authentication middleware checks JWT tokens from cookies, public route middleware bypasses auth for share links.
• Error handling: Centralized error handler catches async errors, returns consistent JSON responses with status codes.
• TypeScript typing: Strong types for all API request/response bodies, database models, and React component props.

UI/UX Polish

• Removed cluttered "Download Backup" and file upload buttons from dashboard header for cleaner interface
• Changed vendor count text to white for better visibility against gradient backgrounds
• Fixed Overview page element sizing—reduced oversized headings from text-4xl to text-2xl, icons from w-16 to w-10
• Added validation to Budget Tracker to prevent empty category names using trim() and length checks
• Improved color contrast throughout with WCAG AA compliance testing

Built a static website for the UNC Charlotte Collegiate DECA chapter to streamline member engagement, event information, and competition paper submissions.

Here are the new updates and features I've added:

Local Authentication System

Implemented a client-side authentication system for member access without requiring a backend server.

• Sign Up flow: Form collects username, email, and password. Password is hashed using Web Crypto API (crypto.subtle.digest('SHA-256')) before storing in localStorage.
• Login validation: Compares hashed password from input against stored hash. Session token generated and stored in sessionStorage for temporary authentication.
• Protected routes: JavaScript checks for valid session token on page load. Redirects to login page if not authenticated using window.location.href.
• Security considerations: While localStorage isn't ideal for production, it works for this use case with low sensitivity data. Implemented automatic logout after 2 hours of inactivity.

Paper Submission System

Created a local submission tracker for ICDC competition papers using browser storage.

• Submission form: Fields for paper title, category, team members, and submission date. File names stored as strings (actual files not uploaded to maintain simplicity).
• Data persistence: All submissions stored as JSON array in localStorage under key deca_submissions. CRUD operations update this array.
• View submissions: Dynamic table rendering from localStorage data using Array.map() to create table rows. Filter by category and date range.
• Edit/Delete: Each submission has unique ID (timestamp-based). Edit opens modal with pre-filled form, delete shows confirmation dialog.

Announcements & Funding Updates

Built an announcements section for chapter updates, especially funding and event information.

• Admin panel: Simple admin login (hardcoded credentials) to post announcements. Used separate localStorage key deca_announcements.
• Rich formatting: Textarea with basic markdown support—converts **bold** to <strong>, *italic* to <em> on display.
• Priority tagging: Announcements tagged as "High Priority" appear at top with gold accent border and icon.
• Funding tracker: Special announcement type that displays funding goal progress bar calculated from submitted expenses vs. budget.

Design System

• DECA brand colors: Blue (#0066CC) primary, Gold (#FFC72C) accents
• Responsive grid layout using CSS Grid and Flexbox for mobile-first design
• Smooth transitions on all interactive elements using transition: all 0.3s ease
• Accessible forms with proper label associations and ARIA attributes

My personal portfolio site showcasing projects, experience, and skills. Recently updated with new features and this Implementation section.

Here are the new updates and features I've added:

Adding the VivahaPlan Project

Process of adding a new project card to the portfolio:

• Content preparation: Condensed LinkedIn project description to match existing project card lengths (2-3 sentences max).
• HTML structure: Created new .project.card div with consistent structure: title (strong tag), date (muted div), description (p tag).
• Positioning: Placed at the beginning of .projects grid to appear first. Used CSS Grid's auto-fit to maintain responsive layout.
• Link integration: Added "Vivaha" button to hero section's CTA row using existing .chip class for style consistency.

Implementation Blog Section

Built this dedicated page to showcase technical depth beyond resume bullet points.

• Navigation update: Added "Implementation" link to main navigation bar in index.html, maintaining consistent spacing and hover effects.
• Separate HTML file: Created implementation.html as standalone page rather than section in main page for better organization and loading performance.
• Shared design system: Copied CSS variables and base styles from index.html to maintain visual consistency across pages.
• Blog-style layout: Structured content as article elements with headers, metadata, and content sections. Used semantic HTML for better SEO.
• Code formatting: Added custom <code> tag styling with background color and padding for inline code references.

Design Philosophy

• Dark green theme to stand out from typical blue/black portfolios
• Gold accents for calls-to-action to create visual hierarchy
• Glassmorphism effects with subtle backdrop blur and transparency
• Scroll reveal animations using Intersection Observer API for modern feel
• Mobile-first responsive design with breakpoints at 980px and 520px

Performance Optimizations

• Single-page architecture for main portfolio reduces load times
• Minimal external dependencies—only using system fonts, no web fonts
• Lazy loading for images with loading="lazy" attribute
• Smooth scroll behavior with scroll-behavior: smooth in CSS