A social water rating and review platform built with Next.js, MongoDB, and TypeScript.

Waterboxd is a community-driven platform where users can rate, review, and discover different water brands and types. Track your water ratings, create and share lists, maintain a wantlist, and follow other water enthusiasts.

i recently saw a reel about someone making letterboxed for chinese ciggarettes and i thought "that is so performative, why didn’t i think of that?" When I heard the hackathon theme was water, I remembered visiting Erewhon and seeing all the fancy overpriced water bottles full of buzzwords like "hydrogen infused" and "alkaline." What is that even supposed to mean? That moment sparked the idea for Waterboxd: basically Letterboxd for bottled water.

Waterboxd is a platform for browsing a curated gallery of bottled waters: mineral, spring, alkaline, purified, sparkling, and more. The current demo gallery contains about 20 waters to demonstrate core functionality. Users can:

• browse water entries and see their properties
• rate and review waters they've tried
• view friends' and strangers' ratings
• curate and share custom water lists
• keep a wantlist of waters they want to try

We built Waterboxd with Next.js, React, TypeScript, Tailwind CSS, NextAuth.js, and MongoDB. The site uses the Next.js app router and API routes for server-side data operations, while the landing page features a custom WebGL ripple shader effect for a watery hero experience. Authentication is handled by NextAuth.js with a Credentials provider, and we used MongoDB with Mongoose for schema modeling including User, Water, Rating, DiaryEntry, and List collections.

We spent a lot of time figuring out how to make the landing page ripple effect work correctly in WebGL, especially with frame buffers, floating-point textures, and mouse interaction. We also had to get comfortable with MongoDB schema design, NextAuth session handling, and integrating all of that in a single full-stack app.

• Building the animated water ripple landing page
• Shipping a fully functional social rating website
• Enabling multiple users to sign in, rate waters, and interact
• Supporting curated lists, wantlists, and review history

• WebGL can create compelling UI experiences inside a React app
• Next.js app router is powerful for building full-stack apps
• MongoDB is flexible for user and review data, but needs careful schema planning
• Strong UX makes a social discovery app feel more fun and easy to use

• Add more water brands, filters, and sorting options
• Improve mobile performance and layout
• Enable public profiles and shareable lists
• Add water recommendations and tasting challenges
• Expand the water catalog with more real-world bottles

• 🌊 Rate & Review Waters - Share your thoughts on different water brands with detailed ratings and reviews
• 📱 Personal Diary - Keep track of your water tastings and experiences
• 📋 Custom Lists - Create and manage collections of waters
• ⭐ Wantlist - Mark waters you want to try
• 👥 Social Features - Follow other users and discover their ratings
• 🔍 Search & Discovery - Browse comprehensive water database
• 📊 Analytics - View rating distributions and community insights

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• Backend: Next.js API Routes
• Database: MongoDB
• Authentication: NextAuth.js
• Styling: Tailwind CSS with PostCSS

app/                    # Next.js app directory
  ├── api/             # API routes
  ├── waters/          # Water catalog pages
  ├── lists/           # User lists
  ├── diary/           # Diary entries
  ├── profile/         # User profiles
  ├── search/          # Search interface
  └── ...
components/             # React components
lib/                    # Utilities and helpers
models/                 # MongoDB models
types/                  # TypeScript types
public/                 # Static assets
scripts/               # Utility scripts (e.g., seed)

• Node.js 18+
• MongoDB (local or Atlas)
• npm or yarn

1. Clone the repository:

git clone https://github.com/RyanSXing/waterboxd.git
cd waterboxd

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env.local

4. Configure your MongoDB connection:

export MONGODB_URI=mongodb://localhost:27017/waterboxd

5. Seed the database (optional):

npm run seed

npm run dev

Open http://localhost:3000 to view the application.

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run seed - Seed database with initial data

Create a .env.local file with the following variables:

MONGODB_URI=your_mongodb_connection_string
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000
DATABASE_NAME=waterboxd

Contributions are welcome! Please feel free to submit a Pull Request.

This project is open source and available under the MIT License.

• Mobile app (React Native)
• Advanced analytics and trends
• AI-powered recommendations
• Community challenges and events
• Integration with water delivery services