VikesXWecs-Hackathon

Commonground

Welcome to Commonground, an interactive story-based application designed to help users explore challenging social situations and practice empathy in a safe, reflective space.

Commonground uses generative AI to create dynamic scenarios, provide narrative feedback on user choices, and offer insightful analysis of personal reflections. It's a tool for social-emotional learning, personal growth, and building healthier communication habits.

Core Features

• Interactive Scenarios: Step into realistic social situations at school, work, or online. Make choices and see the story unfold based on your decisions.
• Create Your Own Story: Describe a situation you've faced or imagined, and our AI will generate a unique, playable scenario just for you.
• AI-Powered Narrative: Instead of simple right/wrong feedback, the AI narrator continues the story, showing you the immediate consequences of your actions.
• Personal Journal: A private space to reflect on your experiences. Get AI-driven feedback and reflection prompts to explore your thoughts and feelings more deeply.
• User Dashboard:
  • For Students: Track your progress, review completed steps, and access your journal and mediation hub.
  • For Teachers/Admins: View aggregated, anonymous analytics on student choices to better understand common challenges. Review journal entries that students have explicitly chosen to share.
• Mediation Hub: Schedule and manage personal mediation sessions to practice mindfulness and de-escalation techniques.

Tech Stack

• Framework: Next.js (with App Router)
• Language: TypeScript
• Styling: Tailwind CSS & ShadCN UI
• Backend & Database: Firebase (Authentication, Firestore)
• Generative AI: Google Gemini via Genkit

Getting Started

To run this project locally, you'll need to have Node.js and npm installed.

1. Clone the Repository

First, clone this repository to your local machine.

git clone <your-repository-url>
cd <repository-folder>

2. Install Dependencies

Install the necessary npm packages.

npm install

3. Set Up Firebase

This project is tightly integrated with Firebase.

1. Create a new project in the Firebase Console.
2. Enable Firebase Authentication (with Email/Password and Anonymous providers).
3. Enable Firestore Database.
4. Navigate to your Project Settings and copy your Firebase configuration object.
5. Replace the contents of src/firebase/config.ts with your project's configuration.
6. Set up Firestore Security Rules by copying the contents of firestore.rules into the Rules tab of your Firestore database in the console.

4. Set Up Environment Variables

You will need an API key for the Google Gemini API to power the AI features.

1. Create a .env file in the root of the project.
2. Obtain an API key from Google AI Studio.
3. Add the key to your .env file:

GEMINI_API_KEY=your_gemini_api_key_here

5. Run the Development Server

You can now start the development server.

npm run dev

The application will be available at http://localhost:3000.

Project Structure

• src/app/: Contains all the pages and layouts, following the Next.js App Router structure.
• src/components/: Shared React components, including UI components from ShadCN.
• src/lib/: Utility functions, type definitions, and static data like scenarios.
• src/firebase/: Firebase configuration, providers, and custom hooks for interacting with Firebase services.
• src/ai/: Contains all Genkit flows for interacting with the Gemini API.