MyForest Indonesia Dashboard

A modern web application for managing forest restoration projects across Indonesia. Built with Svelte, TypeScript, and TailwindCSS.

Features

• Interactive dashboard with real-time analytics
• Interactive map view for restoration areas
• Field report management system
• Team management and coordination tools
• Carbon absorption statistics
• Comprehensive settings management

Tech Stack

• Frontend Framework: Svelte + TypeScript
• Build Tool: Vite
• Styling: TailwindCSS
• Routing: svelte-spa-router
• Charts: Chart.js with svelte-chartjs
• Maps: Leaflet with svelte-leaflet
• Icons: lucide-svelte
• Date Handling: date-fns

Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher

Getting Started

1. Clone the repository:

git clone <repository-url>
cd forest-restoration-dashboard

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:5173

Project Structure

src/
├── components/         # Reusable components
│   └── layout/        # Layout components
├── routes/            # Page components
├── stores/            # Svelte stores
├── utils/            # Utility functions
├── App.svelte         # Root component
└── main.ts           # Application entry point

Building for Production

To create a production build:

npm run build

The build output will be in the dist directory.

Deployment

This project can be easily deployed to Vercel. Here's how:

1. Create a Vercel account if you haven't already
2. Install Vercel CLI:

npm install -g vercel

3. Deploy:

vercel

Or configure automatic deployments by connecting your repository to Vercel:

1. Go to Vercel Dashboard
2. Click "New Project"
3. Import your repository
4. Configure build settings:
   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist
5. Click "Deploy"

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run check - Run TypeScript checks

Code Style

The project uses:

• TypeScript for type safety
• ESLint for code linting
• Prettier for code formatting

Authentication

Demo credentials for testing:

• Email: [email protected]
• Password: password123

Next TODOs

Backend Integration

• Implement Supabase backend integration
• Set up authentication with Supabase Auth
• Create database schema for projects, reports, and teams
• Implement real-time data synchronization

Features

• Add real-time chat functionality for team communication
• Implement file upload for field reports
• Add offline support for field data collection
• Create mobile app version using Capacitor
• Implement multi-language support (ID/EN)

Maps & Visualization

• Integrate satellite imagery for monitoring
• Add drawing tools for area marking
• Implement heat maps for restoration progress
• Add time-lapse visualization of forest growth

Analytics

• Add machine learning for growth prediction
• Implement advanced carbon calculation
• Create downloadable PDF reports
• Add comparative analysis tools

Community Features

• Add community forum
• Implement crowdfunding system
• Create volunteer management system
• Add educational resources section

Technical Improvements

• Implement comprehensive test coverage
• Add CI/CD pipeline
• Optimize performance and loading times
• Implement PWA features
• Add error tracking and monitoring

Contributing

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

License

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

Acknowledgments

• Tree icons created by Lucide
• Map data provided by OpenStreetMap
• Stock photos from Pexels