CleanShare is a Next.js application that enables communities to report and track waste cleanup efforts. Users can report waste locations with AI-powered waste verification using Google Gemini AI and location search powered by MapTiler/OpenStreetMap.
- 🔐 Authentication: Secure user authentication with Clerk
- 📍 Location Search: MapTiler-powered location search and geocoding
- 🤖 AI Waste Verification: Google Gemini AI analyzes uploaded images to identify waste types and quantities
- 📊 Database: PostgreSQL with Neon and Drizzle ORM
- 🗺️ Maps: OpenStreetMap integration via MapTiler API
- 📱 Responsive Design: Mobile-friendly UI with Tailwind CSS
- MapTiler API Key: Get your free API key from MapTiler
- Clerk Account: Set up authentication at Clerk
- Google Gemini API Key: Get your API key from Google AI Studio
- Neon Database: Set up a PostgreSQL database at Neon
Copy .env.example to .env.local and fill in your API keys:
cp .env.example .env.localRequired environment variables:
DATABASE_URL: Your Neon PostgreSQL connection stringNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: Clerk publishable keyCLERK_SECRET_KEY: Clerk secret keyNEXT_PUBLIC_GEMINI_API_KEY: Google Gemini API keyNEXT_PUBLIC_MAPTILER_KEY: MapTiler API key
npm install
npm run devOpen http://localhost:3000 with your browser to see the application.
npm run db:push- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS
- Authentication: Clerk
- Database: PostgreSQL (Neon) with Drizzle ORM
- Maps: MapTiler + OpenStreetMap
- AI: Google Gemini AI
- Deployment: Vercel-ready
The application uses MapTiler for:
- Location search and geocoding
- OpenStreetMap tile serving
- Address suggestions and place lookup
Used for:
- Waste type identification from uploaded images
- Quantity estimation
- Confidence scoring for AI analysis
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Make sure to add all environment variables to your Vercel deployment settings.