NALA Analytics Dashboard

Built By

This project was developed by a team of Y2 Computer Engineering undergraduates: Siva, Ethan, and Harshil.

---

Project Overview

This project, the NALA Analytics Dashboard, was developed as part of the "Reimagine Learning Analytics @ NTU" hackathon.

NALA (NTU AI Learning Assistants) is an in-house developed Generative AI Learning Assistant currently used in 14 courses across 9 schools at NTU.

The hackathon aimed to address key challenges identified with NALA's current implementation:

• Low Usage: Only 1 in 4 students, on average, utilize NALA across the courses.
• Preference for Cognitive Offloading: Students tend to prefer chatbots that provide direct answers, potentially hindering deeper learning.
• Impact on Critical Thinking: Faculty are concerned that reliance on AI tools like ChatGPT may impede the development of students' critical thinking skills.

The core problem statement for the hackathon was:

"How might we encourage students to set goals and track their learning with NALA through Learning Analytics?"

The NALA Analytics Dashboard provides students with insightful visualizations and tools to track their learning progress, set smart goals, and encourage more active engagement with their studies, thereby addressing the challenges of low usage and promoting deeper learning.

---

Features

The dashboard offers a comprehensive suite of features designed to enhance the learning experience:

• Learning Analytics Visualizations: Interactive charts and graphs provide students with a clear overview of their learning patterns and progress. These include:
  • Learning Progress Map: Visualizes the student's journey through different learning topics.
  • Flow Chart: Illustrates the flow of learning activities and engagement.
  • Study Hour Chart: Tracks time spent on various study tasks.
  • Bloom's Table Map: Categorizes learning activities based on Bloom's Taxonomy, encouraging higher-order thinking.
  • Gamification Bar: Provides motivational elements and progress tracking.
• Smart Goal Setting: Tools to help students define and track academic goals effectively.
• Reminders: Personalized reminders to keep students on track with their learning objectives.
• Google Calendar Integration: Seamlessly sync academic schedules and deadlines with Google Calendar to help students manage their time and commitments.

---

Technologies Used

Frontend

The frontend of the NALA Analytics Dashboard is built using modern web technologies:

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool that provides a lightning-fast development experience.
• Radix UI: A collection of unstyled, accessible UI components for building high-quality design systems.
• Recharts: A composable charting library built on React components for data visualization.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.

Backend

The backend is powered by a Python FastAPI application:

• FastAPI: A modern, fast (high-performance) web framework for building APIs with Python 3.7+ based on standard Python type hints.
• python-dotenv: For managing environment variables.
• Requests: An elegant and simple HTTP library for Python.
• Google API Python Client & Google Auth Libraries: For secure integration with Google services, specifically Google Calendar.
• Supabase: Used for database interactions and potentially authentication.

---

Setup and Installation

To get the NALA Analytics Dashboard up and running on your local machine, follow these steps:

1. Clone the Repository

git clone <your-repository-url>
cd nala-analytics-dashboard

2. Backend Setup

Navigate to the fastapi_backend directory:

cd fastapi_backend

Create a virtual environment and install dependencies:

python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`
pip install -r requirements.txt

3. Frontend Setup

Navigate to the AnalyticsDashboardDesign directory:

cd ../AnalyticsDashboardDesign

Install Node.js dependencies:

npm install

---

Environment Variables

This project uses environment variables to manage sensitive information and configuration settings. It is crucial to handle these variables securely, especially when deploying to GitHub.

Sensitive Variables to Protect

• NALA_API_KEY
• SUPABASE_SERVICE_ROLE_KEY
• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET

How to Handle Environment Variables

1. .gitignore: Ensure that .env is included in your .gitignore file. This prevents your local .env file, which contains sensitive credentials, from being accidentally committed to your Git repository.

2. .env.example: Create a file named .env.example in the fastapi_backend directory. This file should list all required environment variables with placeholder values. This helps other developers understand which variables need to be set up without exposing your actual keys.

3. Local .env File: Create a .env file in the fastapi_backend directory (the same location as .env.example) and populate it with your actual credentials. This file will be used by your local development environment.

4. Deployment Environments: When deploying your application (e.g., to a cloud platform like Vercel, Netlify, Heroku, or a custom server), configure these sensitive variables directly as environment variables in the hosting platform's settings. This ensures they are available to your application at runtime without being part of your codebase.

---

Running the Application

1. Start the Backend Server

From the fastapi_backend directory:

source venv/bin/activate  # or `venv\Scripts\activate` on Windows
uvicorn main:app --reload

This will start the FastAPI server, typically accessible at: http://127.0.0.1:8000

2. Start the Frontend Development Server

From the AnalyticsDashboardDesign directory:

npm run dev

This will start the React development server, usually accessible at: http://localhost:5173 (or another port if 5173 is in use).

Open your browser and navigate to the frontend URL to view the NALA Analytics Dashboard.

---

License

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