AI Literacy Academy

Teaching students responsible AI use through 4 interactive lessons: prompting, context, critical thinking, and ethics. 15 minutes. Real skills.

Comment

AI Literacy Academy 🎓

Inspiration

The idea came from a simple observation: every student we know uses ChatGPT, but none of them know how to use it properly.

We watched our peers submit AI-generated work without citation, trust biased outputs without question, and share sensitive information in prompts without thinking twice. The problem wasn't the technology—it was the complete absence of AI literacy education.

Universities scramble to detect AI cheating, but nobody teaches students how to use AI responsibly. We realized: instead of fighting AI, we need to teach it.

That's when AI Literacy Academy was born—a platform that transforms students from AI novices to responsible, effective users in just 15 minutes.

What It Does

AI Literacy Academy is an interactive web platform that teaches students how to use AI effectively, critically, and ethically through 4 comprehensive lessons:

Lesson 1: Prompt Fundamentals

  • The WHO-WHAT-HOW framework for effective prompts
  • Moving from vague questions to specific, actionable requests
  • Interactive exercises with real-time scoring

Lesson 2: Context is Key

  • The importance of providing background information
  • Comparing generic vs. context-rich prompts
  • Hands-on practice with contextual prompting

Lesson 3: Think Critically

  • Identifying common AI mistakes (hallucinations, outdated info, bias)
  • Red flags to watch for in AI outputs
  • Verification strategies and fact-checking

Lesson 4: Use AI Ethically ⚖️

  • Privacy Protection: Never share sensitive personal data
  • Attribution & Honesty: Proper citation and avoiding plagiarism
  • Bias Awareness: Recognizing and questioning AI biases
  • Verification Responsibility: You're accountable for AI-generated content
  • Real-world ethical scenarios with interactive exercises

Key Features:

✅ Progress Tracking - Visual progress bar showing completion (0-100%) ✅ Adaptive Lesson Locking - Complete lessons sequentially (no skipping ahead) ✅ User Authentication - Secure login with Django session management ✅ Interactive Exercises - Hands-on practice with immediate feedback ✅ Beautiful Modern UI - Sleek glassmorphic design with smooth animations ✅ Mobile Responsive - Works perfectly on all devices ✅ Backend Integration - Progress syncs to database automatically

How We Built It

Frontend

  • React 18 with Vite for blazing-fast development
  • React Router for seamless client-side navigation
  • Custom CSS with glassmorphism effects, gradients, and animations
  • Modular Components for maintainability and scalability

Backend

  • Django REST framework for API endpoints
  • Session-based authentication for secure user management
  • PostgreSQL/SQLite for data persistence
  • Progress tracking system storing completion data per user

Architecture

Frontend (React)          Backend (Django)
     │                          │
     ├── Login/Register ────────> /api/register/
     │                          /api/login/
     │
     ├── Fetch Progress ────────> /api/progress/
     │                          (returns completed lessons)
     │
     ├── Complete Lesson ───────> /api/update-progress/
     │                          (saves lesson completion)
     │
     └── Protected Routes
         (automatic redirect if not authenticated)

Key Technical Features

  • Protected Routes: Authentication check on every page load
  • Optimistic UI Updates: Instant feedback before backend confirmation
  • Progress Persistence: SessionStorage backup + backend sync
  • Smooth Animations: CSS transitions and keyframe animations
  • Responsive Design: Mobile-first approach with breakpoints
  • API Integration: credentials: 'include' for Django session cookies

Challenges We Ran Into

1. Frontend-Backend Integration

Challenge: Getting Django session authentication to work with React's fetch API.

Solution: After research, we discovered credentials: 'include' in fetch options and configured CORS with CORS_ALLOW_CREDENTIALS = True on the backend. This allowed Django's session cookies to work seamlessly.

2. Progress Tracking System

Challenge: Building a system that tracks which lessons are completed, locks incomplete lessons, and persists across sessions.

Solution: Created a dual-persistence strategy:

  • Primary: Backend API (/api/progress/) stores authoritative data
  • Fallback: SessionStorage caches progress for offline resilience
  • On login: Fetch from backend and update local state
  • On completion: Optimistic update + backend sync

3. Lesson Locking Logic

Challenge: Preventing users from skipping ahead while keeping the UI intuitive.

Solution:

  • Implemented sequential unlocking (1→2→3→4)
  • Visual feedback: locked lessons are grayed out with 🔒 icon
  • Completed lessons show ✓ checkmark and remain accessible for review
  • Clear messaging: "Complete Lesson X First"

4. State Management Complexity

Challenge: Managing authentication state, progress state, and lesson state across multiple components.

Solution: Used React hooks (useState, useEffect) and props drilling. For a v2, we'd implement Context API or Redux for cleaner state management.

5. Design Evolution

Challenge: The initial Duolingo-style design felt too playful for the serious topic of ethics.

Solution: Complete redesign with a modern glassmorphic aesthetic—dark gradients, frosted glass effects, subtle animations. The new design feels premium and professional while remaining approachable.

6. Git Merge Conflicts

Challenge: Working with multiple developers led to merge conflicts and swap file issues.

Solution: Better communication, smaller commits, and clear file ownership. Learned the importance of git status before every commit!

7. Time Constraints

Challenge: 48 hours to build a full-stack application with 4 complete lessons, authentication, and progress tracking.

Solution:

  • Prioritized MVP features first (auth, basic lessons)
  • Added polish features incrementally (progress bar, locking)
  • Divided work: one person on frontend, one on backend
  • Late-night coding sessions fueled by determination (and coffee ☕)

Accomplishments We're Proud Of

1. Complete, Functional Product

We didn't just build a prototype—we built a production-ready application that works end-to-end. Users can register, complete lessons, and have their progress saved permanently.

2. Lesson 4: Ethics Module

Most AI tutorials focus on effectiveness. We're proud that we dedicated an entire lesson to ethical AI use—covering privacy, attribution, bias, and responsibility. This is the content students actually need.

3. Beautiful, Modern Design

The glassmorphic UI with smooth animations rivals professional ed-tech platforms. It's not just functional—it's visually stunning.

4. Real Educational Value

This isn't a toy project. Students who complete our course genuinely learn valuable skills they'll use daily. The interactive exercises with scoring ensure actual learning, not just passive consumption.

5. Technical Execution

  • Seamless frontend-backend integration
  • Sophisticated progress tracking system
  • Protected routes with proper authentication
  • Mobile-responsive design
  • Smooth, performant animations

6. Speed of Development

From idea to fully functional app in 48 hours—including 4 complete lessons, authentication system, progress tracking, and a beautiful UI.

What We Learned

Technical Skills

  • React State Management: Managing complex state across components
  • Django Authentication: Session-based auth and CORS configuration
  • API Design: RESTful endpoints and error handling
  • CSS Advanced Techniques: Glassmorphism, backdrop-filter, smooth animations
  • Git Collaboration: Resolving conflicts and coordinating with teammates

Design Principles

  • User Experience: Progressive disclosure, clear feedback, smooth transitions
  • Visual Hierarchy: Using color, size, and spacing to guide attention
  • Accessibility: Maintaining contrast and keyboard navigation
  • Responsive Design: Mobile-first approach with flexible layouts

Educational Design

  • Lesson Structure: Breaking complex topics into digestible sections
  • Interactive Learning: Exercises > passive reading
  • Immediate Feedback: Scoring and validation enhance learning
  • Progressive Difficulty: Starting simple, building complexity

Project Management

  • Scope Management: Balancing ambition with time constraints
  • Prioritization: MVP first, polish later
  • Communication: Clear division of labor prevents conflicts
  • Iteration: Start rough, refine continuously

Problem-Solving

  • Research Skills: Finding solutions to CORS, authentication, state management
  • Debugging: Console logs, network tab, React DevTools
  • Persistence: When stuck, take a break and return with fresh eyes

Try It Out

Live Demo: ai-literacy-academy.com (Update with your deployed URL)

GitHub Repository: github.com/yourusername/ai-literacy-academy

Test Account:

  • Username: demo_user
  • Password: demo2024

Built With 🔧

  • React
  • Django
  • Vite
  • React Router
  • CSS3 (Glassmorphism, Animations)
  • JavaScript (ES6+)
  • Python
  • PostgreSQL/SQLite
  • Git & GitHub

Team 👥

  • Enzo Arantes - Frontend Development, UI/UX Design, Lesson Content
  • Javi - Backend Development, API Design, Database Architecture

Acknowledgments 🙏

  • BC Horizons Hackathon organizers for the amazing event
  • Claude AI for development assistance and brainstorming
  • The open-source community for incredible tools and libraries

"AI literacy isn't just about efficiency—it's about integrity."

Built With

Share this project:

Updates

Submission history