GreenLoop

GreenLoop is a web application designed to help users track and improve their environmental impact through personalized challenges, eco-action tracking, and sustainability metrics.

Features

• User Authentication: Secure sign-up and sign-in with modern, animated UI using Clerk authentication
• Personal Dashboard: Track your environmental impact and progress over time
• Eco Challenges: Participate in sustainability challenges to reduce your carbon footprint
• Action Checklist: Complete eco-friendly tasks and track your progress
• User Profiles: Customize your profile and view your environmental impact statistics
• Dark Mode Support: Comfortable viewing experience in both light and dark environments
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices

Tech Stack

• Frontend: Next.js 14, React, TypeScript, Tailwind CSS
• Authentication: Clerk
• Database: MongoDB
• Styling: Tailwind CSS with custom animations
• Deployment: Vercel (recommended)

Getting Started

Prerequisites

• Node.js 18.x or later
• npm or yarn
• MongoDB instance (local or Atlas)
• Clerk account for authentication

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/green-loop.git
   cd green-loop

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env.local file in the root directory with the following environment variables:

   # Clerk Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   CLERK_SECRET_KEY=your_clerk_secret_key
   
   # MongoDB
   MONGODB_URI=your_mongodb_connection_string
   
   # Next.js
   NEXT_PUBLIC_APP_URL=http://localhost:3000
   

4. Seed the database with initial challenges:

   npm run seed
   # or
   yarn seed

Running the Development Server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the application.

Building for Production

npm run build
# or
yarn build

Then to start the production server:

npm run start
# or
yarn start

Project Structure

green-loop/
├── app/                 # Next.js app directory (pages and layouts)
│   ├── challenges/      # Challenge-related pages
│   ├── checklist/       # Eco-actions checklist pages
│   ├── dashboard/       # User dashboard
│   ├── profile/         # User profile pages
│   ├── sign-in/         # Authentication pages
│   └── sign-up/         # Authentication pages
├── components/          # Reusable React components
├── lib/                 # Utility functions and helpers
│   ├── actions/         # Server actions
│   ├── models/          # MongoDB models
│   └── tests/           # Test files
├── public/              # Static assets
└── ...config files      # Configuration files

Authentication Flow

1. Users can sign up using email/password or social providers via Clerk
2. Upon successful signup, they are directed to the dashboard
3. User profiles are created automatically and stored in MongoDB
4. Authentication state is managed by Clerk throughout the application

Contributing

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