Waterboxd
Letterboxd-style social platform for rating, reviewing, and discovering bottled water.
Metrics / Signals
Problem
What this project solves
Most review platforms treat taste communities seriously, but niche consumer rituals like bottled water tasting have no playful social home.
Architecture
How it is put together
Waterboxd uses the Next.js App Router with route handlers for CRUD APIs, MongoDB/Mongoose models for users, waters, ratings, diary entries, and lists, and NextAuth credentials auth with bcrypt password hashing. Browser-only WebGL and Three.js pieces are isolated with dynamic imports to avoid server rendering issues.
Product
What It Does
Waterboxd is a community-driven platform where users browse a curated gallery of mineral, spring, alkaline, purified, sparkling, and other bottled waters. The experience turns bottled water into a social discovery loop: rate what you have tried, review it, follow other people, save waters for later, and build shareable lists.
- Browse water entries and inspect their properties.
- Rate and review waters through authenticated user flows.
- Create custom lists and maintain a wantlist of bottles to try.
- View public profiles, activity, diary entries, and social interactions.
Implementation
How It Was Built
The app is built with Next.js, React, TypeScript, Tailwind CSS, NextAuth, and MongoDB. Next.js route handlers power the API layer, while Mongoose models organize users, waters, ratings, diary entries, and lists. The landing page adds a custom WebGL ripple shader and a React Three Fiber bottle scene for a more physical first impression.
- NextAuth credentials provider handles sign-up, sign-in, sessions, and post-auth routing.
- Route handlers cover water CRUD, ratings, diary logs, lists, follows, activity, settings, and wantlist behavior.
- WebGL ripple rendering uses a two-pass shader pipeline with mouse position uploaded as a normalized uniform each frame.
Hard parts
Challenges
- Getting the landing page ripple effect working reliably with frame buffers, floating-point textures, and mouse interaction.
- Designing MongoDB schemas that made a social review app feel cohesive without overcomplicating a hackathon build.
- Keeping WebGL and Three.js isolated from server rendering with client-only dynamic imports.
Roadmap
Next Steps
- Add more water brands, filtering, sorting, and tasting categories.
- Improve mobile layout and performance.
- Add recommendations, tasting challenges, and richer public sharing.
Decisions
Technical choices
- Modeled the product around real social actions: rating, reviewing, following, adding to lists, saving waters to try later, and keeping a tasting diary.
- Used MongoDB with Mongoose schemas to move quickly while still keeping user, catalog, rating, diary, and list data structured.
- Built the landing page around a custom cursor-reactive water ripple shader to make the subject matter feel tactile instead of static.
Tradeoffs
Constraints and next choices
- The hackathon scope favored a complete vertical slice over a huge catalog, so the demo uses a curated set of waters.
- WebGL made the first impression more memorable, but required extra care around frame buffers, floating-point textures, mouse uniforms, and client-only rendering.
- A social product needs enough seeded content to feel alive, so database seeding and public catalog pages mattered as much as the authenticated flows.