Skip to content

code-differently/25q1-team4

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

40 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

BranchOut 🌳

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.

🌟 Features

Core Functionality

  • πŸ“ 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

User Management

  • πŸ” 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 Features

  • πŸ“‹ Admin Dashboard - Manage user submissions and donations
  • πŸ’° Donation System - Process and track donations to support the platform
  • πŸ“ž Contact Management - Handle user inquiries and feedback

πŸ› οΈ Tech Stack

  • 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

πŸš€ Getting Started

Prerequisites

  • Node.js 18+
  • npm, yarn, pnpm, or bun
  • Firebase project with Firestore and Authentication enabled

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/branchout.git
    cd branchout
  2. Install dependencies

    npm install
    # or
    yarn install
    # or
    pnpm install
  3. 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
  4. 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
  5. Run the development server

    npm run dev
    # or
    yarn dev
    # or
    pnpm dev
  6. Open your browser

    Navigate to http://localhost:3000 to see the application.

πŸ“ Project Structure

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

πŸ”₯ Firebase Setup

Firestore Collections

The app uses the following Firestore collections:

  • users - User profiles and preferences
  • trees - Individual tree records
  • contact_submissions - Contact form submissions
  • donations - Donation records

Security Rules

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
    }
  }
}

🌱 Usage

For Tree Planters

  1. Sign Up/Login - Create an account or sign in
  2. Plant a Tree - Use the "Plant a Tree" button to log new trees
  3. Select Location - Choose from predefined locations on the interactive map
  4. Add Details - Record tree type, planting date, and upload a photo
  5. Track Progress - View your trees and earned badges on your profile

For Administrators

  1. Access Admin Dashboard - Navigate to /admin (requires authentication)
  2. View Submissions - Check contact form submissions
  3. Monitor Donations - Track donation records and statistics
  4. Manage Users - (Feature can be extended as needed)

🀝 Contributing

We welcome contributions! This project was created as a capstone project, and we're excited to see how the community can help it grow.

How to Contribute

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Guidelines

  • 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

πŸ“œ Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint

πŸš€ Deployment

Vercel (Recommended)

  1. Push your code to GitHub
  2. Connect your repository to Vercel
  3. Add environment variables in Vercel dashboard
  4. Deploy automatically on every push

Other Platforms

The app is a standard Next.js application and can be deployed to:

  • Netlify
  • AWS Amplify
  • Firebase Hosting
  • Any Node.js hosting provider

πŸ”§ Environment Variables

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 ❌

πŸ› Troubleshooting

Common Issues

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

πŸ“ž Support

For questions, issues, or suggestions:

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • 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

Releases

No releases published

Packages

No packages published

Contributors 5