CluckClean - Your 2026 Dental Revolution
A fun, motivational dental hygiene portfolio app built for the "New Year, New You" dev.to challenge. Features a cheeky cartoon chicken mascot that motivates users to brush better, floss smarter, and smile wider!
π Features
- Animated Hero Section: Smooth Framer Motion animations with glassmorphism design
- AI-Powered Daily Tips: Gemini AI generates humorous, chicken-themed oral hygiene tips
- Personalized Habit Advisor: Get customized advice based on your brushing routine
- Skills Showcase: Highlighting modern web technologies and AI-accelerated development
- Responsive Design: Mobile-first approach with beautiful animations
π Tech Stack
- Next.js 16 - App Router with TypeScript
- Tailwind CSS - Utilitβ¦
CluckClean - Your 2026 Dental Revolution
A fun, motivational dental hygiene portfolio app built for the "New Year, New You" dev.to challenge. Features a cheeky cartoon chicken mascot that motivates users to brush better, floss smarter, and smile wider!
π Features
- Animated Hero Section: Smooth Framer Motion animations with glassmorphism design
- AI-Powered Daily Tips: Gemini AI generates humorous, chicken-themed oral hygiene tips
- Personalized Habit Advisor: Get customized advice based on your brushing routine
- Skills Showcase: Highlighting modern web technologies and AI-accelerated development
- Responsive Design: Mobile-first approach with beautiful animations
π Tech Stack
- Next.js 16 - App Router with TypeScript
- Tailwind CSS - Utility-first styling with glassmorphism effects
- Framer Motion - Smooth animations and micro-interactions
- Google Gemini AI - Intelligent content generation
- Google Cloud Run - Serverless deployment
π οΈ Development Setup
Clone and install dependencies:
git clone https://github.com/datadr1ven/CluckClean.git
cd CluckClean
npm install
Set up Gemini API:
- Get your API key from Google AI Studio
- Create
.env.localin the root directory:
NEXT_PUBLIC_GEMINI_API_KEY=your-gemini-api-key-here
Run development server:
npm run dev
βοΈ Deployment to Google Cloud Run
Build the Docker image:
docker build -t cluckclean .
Tag and push to Google Container Registry:
# Replace [PROJECT-ID] with your GCP project ID
docker tag cluckclean gcr.io/[PROJECT-ID]/cluckclean
docker push gcr.io/[PROJECT-ID]/cluckclean
Deploy to Cloud Run:
gcloud run deploy cluckclean \
--image gcr.io/[PROJECT-ID]/cluckclean \
--allow-unauthenticated \
--labels dev-tutorial=devnewyear2026 \
--platform managed \
--region us-central1
π Project Structure
cluckclean/
βββ src/
β βββ app/
β β βββ globals.css
β β βββ layout.tsx
β β βββ page.tsx
β βββ components/
β β βββ DailyTipGenerator.tsx
β β βββ HabitAdvisor.tsx
β β βββ SkillsShowcase.tsx
β βββ utils/
β βββ gemini.ts
βββ public/
β βββ cluckclean-mascot.svg
βββ Dockerfile
π― Challenge Submission
This project was built for the "New Year, New You" dev.to portfolio challenge, showcasing:
- AI-Accelerated Development: Built in ~6 hours using Grok AI and continue.dev
- Modern Tech Stack: Latest Next.js 15 with cutting-edge features
- Serverless Deployment: Google Cloud Run with challenge-required labels
- Fun & Functional: Humorous dental hygiene app concept
π Environment Variables
Create a .env.local file with:
NEXT_PUBLIC_GEMINI_API_KEY=your_actual_gemini_api_key
π€ Contributing
This is a portfolio project, but feel free to fork and adapt for your own dental hygiene app!
π License
Built with β€οΈ and lots of β for the dev.to community.
Built fast with Grok & Gemini β Β© Nick 2026