Beantown Baby Diaper Bank

This JumboCode project repository powers the internal data ingestion dashboard and public-facing distribution maps for the Beantown Baby Diaper Bank. It provides automated CSV data ingestion, geographic distribution metrics, and a full administrative dashboard for tracking operations across Boston.

🛠 Tech Stack

• Framework: Next.js 16 (App Router)
• UI Library: React 19
• Database: PostgreSQL via Supabase
• ORM: Prisma 6
• Authentication: Clerk
• Component Library: Mantine UI v8
• Mapping: Leaflet with react-leaflet
• Styling: TailwindCSS 4 & Mantine CSS

---

🚀 Getting Started

Follow these instructions to install prerequisites, clone the repository, and start local development.

1. Install Prerequisites

• Node.js: Download and install Node.js (LTS version recommended) 👉 nodejs.org
• Git: Download and install Git 👉 git-scm.com

Verify installation in your terminal:

node -v
npm -v
git --version

2. Clone the Repository

Open your terminal and run:

git clone https://github.com/JumboCode/beantown-baby-diaper-bank.git
cd beantown-baby-diaper-bank

3. Install Dependencies

Inside the project folder, install all required npm packages:

npm install

4. Configure Environment Variables

Create a .env.local file in the project root containing your development keys. You will need access to our Supabase database and Clerk authentication keys for the application to function.

# Database (Prisma expects the full Postgres URL with pgbouncer params if applicable)
DATABASE_URL=postgresql://YOUR_USER:YOUR_PASSWORD@YOUR_HOST:6543/postgres

# Authentication (Clerk)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

5. Generate Prisma Client

To ensure your local Prisma client matches the schema of the remote database and features the necessary types, you must generate the client. This typically runs automatically during npm install, but you can trigger it manually:

npm run prisma:generate

Note: Database seeding for City Boundaries can be run via npm run prisma:seed:city-boundaries if directed.

6. Start the Development Server

Run the development server using Turbopack for faster refreshes:

npm run dev

Open http://localhost:3000 in your browser to view the application!

---

👥 Development Workflow

⚠️ Important: Please complete these steps each time you start working to prevent merge conflicts and ensure you are developing against the latest stable branch.

1. Pull the latest changes:

   git checkout main
   git pull origin main
   npm install

2. Create a new branch: Use a descriptive name for your feature or fix.

   git checkout -b feature/my-new-feature

3. Commit and Push: Commit your work clearly and push your branch to GitHub.

   git add .
   git commit -m "Add responsive grid to map dashboard"
   git push -u origin feature/my-new-feature

4. Pull Request (PR): Navigate to the GitHub repository and open a Pull Request against the main branch. Request a review from the tech lead before merging!

---

📖 Helpful Links & Documentation

• Next.js Documentation
• Mantine v8 UI Components
• Prisma Client Reference
• Clerk Authentication Docs
• React Leaflet Docs