Track Your Impact, Tree by Tree
BranchOut is a digital platform built to help people track and celebrate their tree planting efforts. Developed as a capstone project by a team of software engineering students, this app empowers individuals and communities to document their environmental contributions β one tree at a time.
- π Interactive Tree Mapping - Pinpoint and track each planted tree on our user-friendly map
- π± Tree Logging - Record tree species, planting dates, locations, and photos
- π€ User Profiles - Personal dashboards showing your planting history and achievements
- π Badge System - Earn badges for milestones like "Tree Pioneer" and "Nature Lover"
- π Impact Tracking - Monitor your environmental contribution over time
- π Authentication - Secure login with email/password or Google OAuth
- π± Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- π₯ Community Features - Share your impact and connect with other tree planters
- π Admin Dashboard - Manage user submissions and donations
- π° Donation System - Process and track donations to support the platform
- π Contact Management - Handle user inquiries and feedback
- Frontend: Next.js 15.3.2, React 19, TypeScript
- Styling: Tailwind CSS, Radix UI Components
- Backend: Next.js API Routes
- Database: Firebase Firestore
- Authentication: Firebase Auth
- Hosting: Vercel-ready configuration
- Node.js 18+
- npm, yarn, pnpm, or bun
- Firebase project with Firestore and Authentication enabled
-
Clone the repository
git clone https://github.com/yourusername/branchout.git cd branchout
-
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
Create a
.env.local
file in the root directory: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_sender_id NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
-
Configure Firebase
- Create a Firebase project at Firebase Console
- Enable Firestore Database
- Enable Authentication (Email/Password and Google providers)
- Copy your Firebase config to the environment variables
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
branchout/
βββ src/
β βββ app/ # Next.js App Router pages
β β βββ about/ # About page
β β βββ admin/ # Admin dashboard
β β βββ donate/ # Donation system
β β βββ login/ # Authentication
β β βββ plant-tree/ # Tree planting form
β β βββ profile/ # User profiles
β β βββ signup/ # User registration
β βββ components/ # Reusable React components
β β βββ ui/ # UI components (buttons, inputs, etc.)
β β βββ plant-form.tsx # Tree planting form
β β βββ profile.tsx # User profile component
β β βββ navbar.tsx # Navigation component
β βββ context/ # React context providers
β βββ firebase/ # Firebase configuration
β βββ lib/ # Utility functions
βββ public/ # Static assets
βββ dataconnect/ # Firebase Data Connect (optional)
βββ package.json
The app uses the following Firestore collections:
users
- User profiles and preferencestrees
- Individual tree recordscontact_submissions
- Contact form submissionsdonations
- Donation records
Update your Firestore security rules:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Users can read/write their own data
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
// Trees are publicly readable, authenticated users can create
match /trees/{treeId} {
allow read: if true;
allow create: if request.auth != null;
allow update, delete: if request.auth != null && resource.data.plantedBy == request.auth.uid;
}
// Admin-only collections
match /contact_submissions/{submissionId} {
allow read, write: if request.auth != null; // Add admin check here
}
match /donations/{donationId} {
allow read, write: if request.auth != null; // Add admin check here
}
}
}
- Sign Up/Login - Create an account or sign in
- Plant a Tree - Use the "Plant a Tree" button to log new trees
- Select Location - Choose from predefined locations on the interactive map
- Add Details - Record tree type, planting date, and upload a photo
- Track Progress - View your trees and earned badges on your profile
- Access Admin Dashboard - Navigate to
/admin
(requires authentication) - View Submissions - Check contact form submissions
- Monitor Donations - Track donation records and statistics
- Manage Users - (Feature can be extended as needed)
We welcome contributions! This project was created as a capstone project, and we're excited to see how the community can help it grow.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add some amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
- Follow the existing code style
- Add TypeScript types for new components
- Include error handling for database operations
- Test authentication flows before submitting
- Update documentation for new features
npm run dev
- Start development servernpm run build
- Build for productionnpm run start
- Start production servernpm run lint
- Run ESLint
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on every push
The app is a standard Next.js application and can be deployed to:
- Netlify
- AWS Amplify
- Firebase Hosting
- Any Node.js hosting provider
Variable | Description | Required |
---|---|---|
NEXT_PUBLIC_FIREBASE_API_KEY |
Firebase API key | β |
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN |
Firebase auth domain | β |
NEXT_PUBLIC_FIREBASE_PROJECT_ID |
Firebase project ID | β |
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET |
Firebase storage bucket | β |
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID |
Firebase messaging sender ID | β |
NEXT_PUBLIC_FIREBASE_APP_ID |
Firebase app ID | β |
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID |
Firebase measurement ID | β |
Firebase not initializing
- Check that all environment variables are properly set
- Ensure Firebase project has Firestore and Auth enabled
Build errors
- Run
npm run lint
to check for code issues - Ensure all dependencies are installed with
npm install
Authentication not working
- Verify Firebase Auth providers are enabled in console
- Check that redirect URLs are properly configured
For questions, issues, or suggestions:
- Email: [email protected]
- GitHub Issues: Create an issue
This project is licensed under the MIT License - see the LICENSE file for details.
- Team: Built by passionate software engineering students
- Mission: Combining sustainability with technology for environmental impact
- Community: Thanks to all tree planters making the world greener
"It's the little things citizens do. That's what will make the difference. My little thing is planting trees." β Wangari Maathai
Made with π for a greener future