An AI-powered sustainable event planning platform that helps businesses organize eco-friendly events while tracking carbon footprint and budget in real-time.
- AI-Powered Chatbot: Interactive conversational interface guides you through event planning
- Real-Time Tracking: Monitor budget and carbon rating as you make selections
- Attendee Management: Adjust number of attendees with dynamic cost and carbon impact calculations
- Browse sustainable venues with verified credentials
- View cost per person and maximum capacity
- Calculate carbon impact based on venue rating and attendee count
- Formula:
(carbon_rating / max_capacity) × attendees
- Choose from various services: catering, transport, AV equipment, and more
- Services have lower carbon impact than venues (max 15 vs 50+)
- Higher sustainability ratings (80+) receive additional impact reduction
- Formula:
((100 - rating) / 100) × 15 × (attendees / max_capacity)
- Budget Tracker: Real-time remaining budget with visual progress bar
- Carbon Rating: Sustainability score out of 100 (starts at 100)
- Cost Breakdown: Transparent pricing showing per-person costs and totals
- Selection Summary: Review all choices with type badges (venue/service)
- Explore verified carbon offset projects
- Connect with organizations to achieve carbon neutrality
- View project details, contact information, and sustainability credentials
- Framer Motion Animations: Smooth transitions and interactions
- Responsive Design: Works seamlessly on desktop and mobile
- React Icons: Clean, consistent iconography throughout
- Green Theme: Eco-friendly color palette (#e8f5e9 background, #2e7d32 accents)
- Frontend: React 18 + TypeScript
- Build Tool: Vite
- Styling: CSS3 with custom properties
- Animations: Framer Motion
- Icons: React Icons (BiLeaf, HiOutlineLightningBolt, etc.)
- Backend Integration: n8n webhook for AI chatbot responses
- Node.js 16+ and npm
- Clone the repository:
git clone https://github.com/lieuryan/Plan4Impact.git
cd Plan4Impact- Install dependencies:
npm install- Create a
.envfile in the root directory:
cp .env.example .env- Add your webhook URL to
.env:
VITE_WEBHOOK_URL=https://your-webhook-url.com/webhook/your-id/chat- Start the development server:
npm run dev- Open your browser to
http://localhost:5173
npm run buildThe production-ready files will be in the dist folder.
npm run previewPlan4Impact/
├── public/
│ ├── chatbot.png
│ ├── favicon.svg
│ └── plant-icon.svg
├── src/
│ ├── components/
│ │ ├── LandingPage.tsx/css # Hero page with features
│ │ ├── EventForm.tsx/css # Event details input
│ │ ├── Chatbot.tsx/css # AI chatbot interface
│ │ └── EndingScreen.tsx/css # Results & carbon offset options
│ ├── App.tsx # Main app router
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
- Hero section with call-to-action
- Feature cards with icons
- "How It Works" guide
- Smooth scroll animations
- Budget, guests, and location input
- Glowing input bar animation
- Natural language processing ready
- Real-time budget and carbon tracking
- Option cards with attendee selectors
- Sidebar showing selected items
- Remove/undo functionality
- Carbon rating info modal
- Summary of all selections
- Total cost and carbon impact
- Carbon offset project recommendations
- Contact information for offset providers
carbonImpactPerPerson = carbon_rating / max_capacity
totalCarbonImpact = carbonImpactPerPerson × attendeesExample: Venue with rating 50, capacity 100, 50 attendees
- Impact per person: 50/100 = 0.5
- Total impact: 0.5 × 50 = 25
serviceImpactScore = 100 - carbon_rating
maxServiceImpact = 15
attendeeRatio = attendees / max_capacity
totalCarbonImpact = (serviceImpactScore / 100) × 15 × attendeeRatio
// Bonus for highly sustainable services (rating > 80)
if (carbon_rating > 80) {
totalCarbonImpact = totalCarbonImpact × 0.5
}Example: Service with rating 85, capacity 100, 50 attendees
- Impact score: 100 - 85 = 15
- Base impact: (15/100) × 15 × 0.5 = 1.125
- With bonus: 1.125 × 0.5 = 0.56
The chatbot integrates with an n8n webhook endpoint. Configure the URL in your .env file:
const N8N_WEBHOOK_URL = import.meta.env.VITE_WEBHOOK_URL
// Request payload
{
chatInput: string,
sessionId: string
}
// Response payload
{
output: {
text: string,
step: 'onboarding' | 'venue_selection' | 'services',
options: [
{
id: string,
title: string,
cost_per_person: number,
max_capacity: number,
carbon_rating: number,
emissions_saved: number,
renewables_percentage: number,
description: string,
image_url?: string
}
]
}
}Create a .env file in the root directory:
VITE_WEBHOOK_URL=https://your-webhook-url.com/webhook/your-id/chatThis keeps your webhook URL secure and out of version control.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
- Carbon offset data from verified Australian projects
- Venue sustainability ratings based on NABERS standards
- Event cost estimates based on 2024-2025 Australian market rates
Project Link: Plan4Impact
● Maria Khmelevskaya
Made with 💚 for a sustainable future