Introduction

In an age where environmental issues are more critical than ever, fostering eco-consciousness in the younger generation is paramount. Leafore, a revolutionary platform, strives not only to educate but also to instill a sense of responsibility towards the environment among school students. By integrating interactive learning, practical incentives, and peer-to-peer engagement, Leafore is reshaping how sustainability is taught and practiced in schools.

Cultivating Environmental Responsibility through Leafore

Leafore stands as a beacon of change in the educational landscape, introducing students to sustainable practices and incentivizing their adoption. Through its engaging features, Leafore empowers students to participate actively in preserving the planet. From redeeming points earned by performing eco-friendly deeds to planting trees based on their achievements, Leafore makes environmental responsibility tangible and rewarding.

Dashboard

Interactive Learning and Engagement

Deeds and Rewards: Leafore gamifies sustainability, allowing students to earn points for eco-conscious actions and redeem them for rewards, creating healthy competition among peers.
- Users can select the deedful action they completed to collect reward points.

Once the deeds are completed, those reward points can be used to redeem the eco-friendly items.

Quizzes and Leaderboards: Fun quizzes not only engage students but also incentivize learning. Topping the leaderboard rewards students with the opportunity to plant a tree, fostering a sense of accomplishment.
A gamified experience to educate about sustainability with the crossword.

Peer-to-Peer Interaction and Support

Forum and Chatbot: Leafore provides a safe space for students to ask questions, share ideas, and discuss eco-friendly practices anonymously. The AI-powered chatbot aids in addressing unique queries promptly.

OpenAI-powered Chatbot to engage with the latest updates about the environment.

Practical Sustainability Beyond the Classroom

Recreational Activities and NGO Resources: Leafore encourages group activities that promote sustainability, emphasizing the collective impact. Moreover, it facilitates donations through NGOs, teaching children the value of reusing and recycling.

Technology Stack

Frontend Development with Nuxt.js:
- Nuxt.js serves as the foundation for the front-end development of Leafore. This versatile framework, built on top of Vue.js, provides a robust and structured environment for creating dynamic and responsive web applications.
- Nuxt.js excels in optimizing the performance of your web app through features like server-side rendering (SSR) and static site generation (SSG). This ensures that Leafore loads quickly and efficiently for users, regardless of their device or network speed.
- Its modular architecture simplifies code organization and promotes reusability, making it easier for your development team to create interactive and engaging educational features within the platform.
  - Setup
  - git clone the repo
  - npm install

Database Management with Prisma:

Prisma plays a pivotal role in database management for Leafore. This modern database toolkit simplifies interactions with the database by offering a type-safe and auto-generated query API.
Prisma's type-safe queries ensure that your database operations are validated at compile time, reducing the risk of runtime errors and enhancing the reliability of your application.

It enables efficient data modeling and schema management, allowing you to structure your database tables and relationships with ease. This flexibility is essential for storing and retrieving user data, deeds, rewards, leaderboard information, and more.

Setup
A prisma directory which contains:
- A seed.ts file: This is the data used to seed your database.
- A schema.prisma file: Where you define the different database models and the relations between them.

      generator client {
        provider = "prisma-client-js"
      }

      datasource db {
        provider  = "postgresql"
        url       = "Database_URL"
        directUrl = "Direct_URL"
      }

      model Account {
        id                String  @id @default(cuid())
        userId            String
        type              String
        provider          String
        providerAccountId String
        refresh_token     String? // @db.Text
        access_token      String? // @db.Text
        expires_at        Int?
        token_type        String?
        scope             String?
        id_token          String? // @db.Text
        session_state     String?
        user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)

        @@unique([provider, providerAccountId])
      }

      model Session {
        id           String   @id @default(cuid())
        sessionToken String   @unique
        userId       String
        expires      DateTime
        user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
      }

      model User {
        id                 String               @id @default(cuid())
        name               String?
        email              String?              @unique
        emailVerified      DateTime?
        image              String?
        points             Int                  @default(0)
        accounts           Account[]
        sessions           Session[]
        Forum              Forum[]
        DeedsCompleted     DeedsCompleted[]
        DeedRewardsClaimed DeedRewardsClaimed[]
      }

      model VerificationToken {
        identifier String
        token      String   @unique
        expires    DateTime

        @@unique([identifier, token])
      }

      model Deeds {
        id        String   @id @unique
        name      String
        image     String
        points    Int
        createdBy String   @default("admin")
        createdAt DateTime @default(now())
        updatedAt DateTime @updatedAt
        approved  Boolean  @default(true)

        DeedsCompleted DeedsCompleted[]
      }

      model DeedRewards {
        id              String   @id @unique
        name            String
        image           String
        semiDescription String
        description     String
        pointsRequired  Int
        createdBy       String   @default("admin")
        createdAt       DateTime @default(now())
        updatedAt       DateTime @updatedAt

        DeedRewardsClaimed DeedRewardsClaimed[]
      }

      model DeedsCompleted {
        id        String   @id @unique
        userId    String
        deedId    String
        points    Int
        createdAt DateTime @default(now())
        updatedAt DateTime @updatedAt

        user User  @relation(fields: [userId], references: [id])
        deed Deeds @relation(fields: [deedId], references: [id])
      }

      model DeedRewardsClaimed {
        id        String   @id @unique
        userId    String
        rewardId  String
        points    Int
        createdAt DateTime @default(now())
        updatedAt DateTime @updatedAt

        user   User        @relation(fields: [userId], references: [id])
        reward DeedRewards @relation(fields: [rewardId], references: [id])
      }

      model Forum {
        id        String   @id @unique
        userId    String
        title     String
        content   String
        createdAt DateTime @default(now())
        updatedAt DateTime @updatedAt

        user User @relation(fields: [userId], references: [id])
      }

Database Hosting on Supabase:
- Supabase is the secure and scalable home for your database. As an open-source alternative to traditional database providers, Supabase offers a cloud-based PostgreSQL database with an array of features tailored to modern applications.
- Your database hosted on Supabase ensures high availability, data integrity, and security. This is crucial for the seamless operation of Leafore, where student data, progress, and achievements need to be securely stored and managed.
- Supabase simplifies database administration with its intuitive dashboard, making it easier for your team to monitor and manage data.
  - Setup
  - Create the Postgresql db from the supabase cloud.
  - Get the connection string from supabase database section and update it in the above prisma schema file.
  - For more details follow this link.
  - ```
        DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
```
Integration with Outerbase:
- We decided to link our database with Outerbase because it offers a modern, easy-to-use interface, a simple way to ask for data (EZQL), working together in real-time, automatic task help, a complete view of our data, and the chance to save money. These features match perfectly with what we want to achieve in our project: making teamwork better, working more efficiently, and making data easier to get to.

Why Outerbase?

Modern Database Interface: Outerbase boasts a cutting-edge, cloud-based database interface designed with user-friendliness and intuition in mind. This interface simplifies the often complex tasks of managing a database, making it an ideal choice for developers like Tobi. It empowers developers to efficiently interact with the database, enhancing productivity.

Real-time Collaboration: Outerbase offers a game-changing feature in the form of real-time collaboration. For teams working on a project, this capability is invaluable. It enables multiple team members to access and work on the same database concurrently. This fosters seamless teamwork, accelerates project progress, and maximizes efficiency.

Workflow Automation: Outerbase is equipped with powerful workflow automation capabilities. This means that users can automate routine and repetitive database tasks. By doing so, manual work is minimized, and the risk of human errors is reduced. This automation streamlines processes, making them not only more efficient but also consistent in their execution.

Comprehensive Database View: Outerbase provides users with a comprehensive and holistic view of their database. This feature is advantageous to businesses, product teams, and developers alike. It furnishes users with a detailed understanding of their data, facilitating informed decision-making and strategic planning.

Cost Reduction: By simplifying database management, automating workflows, and enhancing overall efficiency, Outerbase can contribute significantly to cost reduction. The streamlined processes and minimized resource requirements translate into potential long-term cost savings.

Connecting Your Existing Database to Outerbase: A Step-by-Step Guide

Create an Outerbase Workspace:
- Begin by setting up an Outerbase workspace. This workspace will serve as the environment where you can manage and collaborate on your database.
- I have set up the workspace as hashnodetest.
Access Your Dashboard:
- Upon creating your Outerbase workspace, you'll be directed to your dashboard. Here, you'll find various options and tools to manage your database.
Connect a Database:
- To connect your existing database, look for the option to connect a database on your dashboard and click on it.
Choose Database Type:
- Outerbase supports various database types. Select the appropriate type for your database. For example, if you are using Postgres, choose that option and click "Continue."
Enter Connection Details:
- You will then be prompted to enter the connection details of your existing database. This includes information like the database host, port, username, and password. Ensure that you provide accurate and secure connection details.
Initiate Connection:
- After entering the required connection details, click the confirmation button to initiate the connection process. Outerbase will establish a connection with your database.
Base Creation:
- Once the connection is established, Outerbase will create a new base for your database. This base will serve as the interface through which you can interact with your data.
Explore Your Dashboard:
- After the base is created, you'll be able to see it in your dashboard. Click on it to access the base's features and functionalities.
View Available Tables:
- Within your base, you'll find a list of available tables from your existing database. For instance, you can view tables like "Rewards" that contain data such as points, description, image, id etc.,..
Explore Column Details:
- To gain more insights into your database structure, examine the columns within each table. This includes information like data types, default values, and constraints applied to the columns.
Generate a quick dashboard using chat:

To gain more insights into your data, you can create quick dashboards using the chat option available.
Generate quick queries:

Generate pre-defined queries about your data without much knowledge of SQL.
General Insights:

It has a feature to generate insights and export them as Charts and CSV for Business metrics.

To explore the numerous features of Outerbase, simply dive into the platform and discover its powerful tools for sustainable database management and collaboration.

Challenges Overcome and Lessons Learned

Technical Challenges: Leafore's development journey was marked by overcoming technical hurdles, from database issues to UI design complexities. These challenges were navigated, leading to a fully functional platform.
Educational Insights: Leafore's creators discovered the gap in eco-friendly education resources and worked towards filling it, emphasizing the need for digestible, technology-integrated materials.

Demo

https://youtu.be/P-HCH8kfR20

The Future of Leafore

It is an Open source app that welcomes anyone to contribute.

Leafore's vision extends beyond individual schools. Plans include enhancing peer-to-peer interactions, community involvement, fundraising campaigns, and a platform for parents. By setting goal-based accomplishments at various levels, Leafore aims to create a holistic approach to environmental education, involving students, schools, and communities.

Code

The code can be accessed via the GitHub link.

Clone and npm install. Replace the Discord App ID and Secret under server/api/auth

and run it with npm run dev

Conclusion

I'm immensely grateful to Hashnode and Outerbase for hosting this hackathon. The event broadened my horizons, introducing me to prisma, supabase database work and the world of Outerbase. It was an incredible journey, merging my existing knowledge with new technologies to create a solution. Thank you!

Leafore: Cultivating Eco-Consciousness in Young Minds

Table of contents