A complete, production-ready click counter application built with Next.js and Firebase. Perfect for learning Firebase integration or as a foundation for your own app.
✅ User Authentication
- Email/password signup and login
- Secure password management
- Change password functionality
✅ Real-time Data Persistence
- Click counts saved to Firestore
- Data persists across sessions
- Each user sees only their own data
✅ Professional UI/UX
- Responsive design (mobile, tablet, desktop)
- Loading states and error handling
- Tailwind CSS + shadcn/ui components
- Smooth animations and transitions
✅ Comprehensive Documentation
- In-app manual with beginner-friendly explanations
- Multiple setup guides for different skill levels
- Code comments throughout the project
- Firebase integration guide
- Node.js 18+ and npm/pnpm/yarn
- A Google account (for Firebase)
- A code editor
- Go to firebase.google.com
- Create a new project
- Create a Web app
- Copy your Firebase config
See QUICK_START.md for detailed instructions.
Create a .env.local file (or add to Vercel):
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id# Install dependencies
npm install
# Run development server
npm run dev
# Open http://localhost:3000- Sign up with any email and password (6+ chars)
- Click the "Click Me!" button
- Your clicks save automatically!
- Log out and back in - your count is still there!
- QUICK_START.md - Get running in 10 minutes
- SETUP_CHECKLIST.md - Complete step-by-step guide
- In-App Manual - Click "Read Manual" button in the app
- FIREBASE_INTEGRATION.md - Detailed Firebase guide
- IMPLEMENTATION_SUMMARY.md - Technical overview
├── app/ # Next.js app directory
│ ├── page.tsx # Click counter (main page)
│ ├── login/page.tsx # Login form
│ ├── signup/page.tsx # Signup form
│ ├── settings/page.tsx # Account settings
│ ├── manual/page.tsx # In-app documentation
│ └── layout.tsx # Root layout
│
├── lib/
│ ├── firebase.ts # Firebase setup
│ ├── auth-context.tsx # Auth state management
│ └── firestore-utils.ts # Database operations
│
├── components/ui/ # UI components (shadcn/ui)
├── public/ # Static assets
└── styles/ # Global styles
- Framework: Next.js 16 (React 19)
- Database: Firestore (Firebase)
- Authentication: Firebase Auth
- Styling: Tailwind CSS
- Components: shadcn/ui
- Hosting: Vercel
- Language: TypeScript
- Secure user registration and login
- Firebase-managed sessions
- Password change functionality
- Firestore for real-time data
- User click counts stored per user
- Security rules ensure privacy
- Protected routes (login required)
- Auto-save functionality
- Error handling and loading states
- Mobile-responsive design
- User Signs Up → Firebase creates account
- User Logs In → Session created by Firebase
- User Clicks Button → Count increases + saves to Firestore
- User Logs Out → Session ended
- User Logs Back In → Click count restored from Firestore
npm run dev # Start development server
npm run build # Build for production
npm start # Start production server
npm run lint # Run linter- ESLint for code quality
- TypeScript for type safety
- Tailwind CSS for styling
# Push to GitHub
git push origin main
# Connect to Vercel at vercel.com
# Select your repository
# Add environment variables
# Deploy!Your app will be live automatically!
- Read QUICK_START.md to get started
- Click "Read Manual" in the app for concepts
- Review code comments in
lib/folder - Check
app/folder to see how pages work
npm install firebaseCheck your Firestore security rules are published.
Make sure env vars are in Vercel, not just .env.local
See FIREBASE_INTEGRATION.md for more troubleshooting.
See top 10 clickers with getAllUserClickCounts()
Listen to Firestore changes with onSnapshot()
Store extra user info in Firestore user document
Unlock badges at click milestones
- Firebase handles password hashing
- Firestore rules restrict data access
- Environment variables protect secrets
- HTTPS enforced by Vercel
- Server-side rendering for speed
- Optimized images and assets
- Firestore queries for efficiency
- Code splitting for small bundles
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Open source - use freely for learning and projects.
- Check the in-app manual (click "Read Manual")
- Read the documentation files
- Check Firebase Docs
- Search for similar issues online
By building this app, you'll understand:
- ✅ How React components work
- ✅ Using hooks (useState, useEffect)
- ✅ Firebase authentication
- ✅ Firestore database operations
- ✅ Next.js routing and layouts
- ✅ State management with Context
- ✅ Responsive design with Tailwind
- ✅ Deploying to production
- ✅ Get the app running
- ✅ Read the in-app manual
- ✅ Experiment with the code
- ✅ Add your own features
- ✅ Deploy to production
- ✅ Share with others!
Ready to start? See QUICK_START.md for the next steps!
Built with ❤️ for learning Firebase + Next.js