A real-time interactive coding platform that bridges block-based programming to text with Python and micro:bit, designed for students in grades 5-7.

• Real-time Collaboration

  • Live code sharing between teachers and students
  • Real-time code execution and feedback
  • Virtual classroom environment

• Curriculum Management

  • Structured weekly learning modules
  • Progressive difficulty levels
  • Integrated micro:bit activities

• Interactive Learning

  • Code editor with syntax highlighting
  • Real-time test case validation
  • AI-assisted learning support

• Progress Tracking

  • Student progress monitoring
  • Task completion tracking
  • Weekly performance analytics

• Python Tutorial Modified from:
  • https://www.learnpython.org/en/Welcome
  • https://www.geeksforgeeks.org/python-for-kids/#control

• Frontend: Next.js 14, React
• UI Components: shadcn/ui
• State Management: Context API
• Backend: Firebase
  • Authentication
  • Firestore Database
  • Real-time updates
• Real-time Communication: Socket.IO
• Code Editor: CodeMirror
• Styling: TailwindCSS

├── users/
│   └── userId/
│       ├── displayName
│       ├── email
│       ├── role
│       └── solvedProblems[]
│
├── classrooms/
│   └── classroomId/
│       ├── teacherId
│       ├── name
│       ├── curriculumId
│       ├── activeSession
│       └── lastTaughtWeek
│
├── curricula/
│   └── curriculumId/
│       └── weeks[]/
│           ├── weekNumber
│           └── assignmentIds[]
│
└── weeklyProgress/
    └── ${classroomId}-${weekNumber}/
        ├── activeSession
        ├── lastUpdated
        └── taskCompletions/
            └── taskId/
                └── completedBy[]

• Socket.IO events handling:
  • Join/leave classroom sessions
  • Code sharing and updates
  • Task completion notifications
  • Student progress updates

1. Clone the repository:

git clone https://github.com/yourusername/python-bit.git
cd python-bit

2. Install dependencies:

npm install

3. Set up environment variables:

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_BASE_URL=

4. Run the development server:

npm run dev

• TeacherSessionView: Manages the teacher's view of the virtual classroom
• StudentSessionView: Handles the student's learning interface
• WeekSelector: Controls curriculum week navigation
• FileProcessorTest: Manages code execution and testing

• Context-based authentication system
• Role-based access control
• Protected routes and sessions

• User authentication system
• Real-time code sharing
• Basic curriculum structure
• Task completion tracking
• Live session management

• AI assistance integration
• Enhanced test case management
• micro:bit hardware integration
• Extended curriculum content

1. Performance Optimization

   • Implement caching mechanisms
   • Optimize database queries
   • Reduce unnecessary API calls

2. Feature Additions

   • Advanced AI code assistance
   • Extended micro:bit integration
   • Enhanced progress visualization
   • Comprehensive test suite

3. UI/UX Improvements

   • Responsive design enhancements
   • Accessibility improvements
   • Dark/light theme toggle

Contributions are welcome! Submit a pull request.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

• ✅ Implemented shadcn/ui components
• ✅ Created basic teacher/student pages
• ✅ Set up MongoDB database structure
• ✅ Implemented classroom session functionality
• ✅ Added real-time code sharing features
• ✅ Developed user management system

• ✅ Implemented code execution functionality
• ✅ Added progress tracking
• ✅ Enhanced session management
• ✅ Developed weekly task system
• ✅ Implemented student progress monitoring

• ✅ Migrated to Firebase
• ✅ Implemented AuthContext
• ✅ Created curriculum structure
• ✅ Enhanced classroom management
• ✅ Improved student dashboard
• ✅ Implemented real-time updates

// Core Events
1. join-room
2. leave-room
3. code-update
4. send-code-to-student
5. send-code-to-all
6. get-student-code

• API Route Consolidation
• Caching Implementation
• Test Case Management
• Progress Tracking Enhancement

• AI Integration
• micro:bit Connection
• UI/UX Improvements
• Extended Curriculum Development

• Implement caching for classroom/curriculum data in individual classrooms
• Consolidate API calls
• Add error boundaries
• Revamp everything to SWR/SWR Mutation implementation

• Lists and Loops
• Basic Data Processing
• Dictionaries
• File Handling

• Advanced Functions
• Error Handling
• Simple Classes
• Final Project

• Queuing system for code execution
• File persistence system
• Library optimization
• Enhanced test case system

• API route consolidation
• Caching implementation
• Error handling improvement
• Performance optimization

• Interactive problem sets
• Custom test case creation
• Progress visualization
• Peer review system

• ALL firebase operations under /api
• Dashboard cache
• Classrooms page cache
• Add caching for the individual classroom pages
• Explore page is just list of all problems
• lesson progress card -> firestore
• Add favicon for my app
• no need to store both username and code of students , just store the usernames
• Teacher dashboard & student dashboard -> many overlap
• Student classrooms & teacher classrooms -> many overlap

• Work on Week 5
• dont refresh code card after the test casses are passed
• Show which test cases are we running -> students can choose which test cases they want to run
• Make progress bar better
• fix topics
• UseAuth must be used within AuthProvider after login

• MDX w/ velite
• Add full python course mdx
• l1
• l2
• l3
• back button
• Share button

• Header fix
• Footer fix
• Added tags to python101 lessons

• Search btn
• Active tab
• Logo diff
• Exercise 1 in projects

• exercise type to types file
• project images added
• fix "Go to Theme ad card" end
• themes moved to config
• Run / Submit Btns

• Work on Tutorials page till 4pm
• Students need to run ever cell to complete exercise, so think of a logic

• rate Limiter
• add caching to all routes
• add error handling to all routes
• add validation to all routes

• Students need to run ever cell to complete exercise, so think of a logic
• handle Exercises completion check
• add footer icons
• siteConfig fix!
• bg gradient
• resize python code editor
• add home page
• remove underline in tailwind md
• accent to curr tab if togglable , accent to pages when I am in sub pages

• padding to project page
• add at least 4 projects
• if solved project, add to firestore
• store code ??
• add share if completed project
• add caching to progress checkers
• next tutorial Button
• Add 5 projects w/ tags
• Add better imgs
• Meme creation tools

• show if error when running
• should backend return {err & output} or {err, success, output}
• tut 4 and rest
• projects to config
• store expected output in config file, not in .md.
• added aura points , can see in frontend. add testCode to backend
• handleProjectCompletion
• show that project is completed
• do we even need config for the exercises? technically, if i dont want to pass starter code, but then i have to have it in json?

• add back btn to theme
• Project status
• project status to theme
• last attemp to date -> format date is util
• move utils/projects to lib

• add Reset code button to codeExecutor
• handleExercise run
• lastUpdated not shown if no progress at all
• add overall Progress thing to tutorial
• add last Activity
• keep all interfaces in 1 place
• add attempts. show attempts

• show attempts for project
• add one more project
• api/tutorial/[tid] -> get info on tutorial progress. cache it and only refresh if hanld exercise completing
• const { progress, invalidateCache } = useProjectProgress(projectId, user)
• add latest attempt to project

// When submitting code: await submitCode(...) invalidateCache() // This will drop the cache and trigger a refetch

• run code and show output
• no test code but rather expected output !!
• make reusable component for code editor in live session

• add three themes to live session code editor
• update code
• reset code
• fix when disabled
• add reset code to live session code editor
• Fix the assignent in firebase
• fix its json
• join leave session

• ui for management of classrooms
• backticks ui
• depreciate test code for assignments
• security for firestore stuff
• join session then u should pre select week task
• del active session from classroom interface

• del session

• add more weeks

• think of sys des for handle complete assignment

• show solution to teachers

• add students when they connect

• deploy to vercel

• remove selectedStudent

• have to upd the code before sending?

• [ ]

• get project progress information

• add like uncomment this code

• add caching to all firestore opers

• Avatar circles (students) https://magicui.design/docs/components/avatar-circles

• confetti https://magicui.design/docs/components/confetti

• particles

• cool mode for btns https://magicui.design/docs/components/cool-mode

• implement magic js somehwee

• Global search: tutorials, pages,
• Search projecs

• Make Run Code and Submit Btns different
• light+Dark mode header btns remove bg
• hydration issues solved
• create week 2 assignments
• create week 3 assignments
• Check project types: eg there is one from velite and one that i created
• beautiful 404
• what stuff should be in velite projects?
• create week 3 assignments

• create week 4 assignments
• When creating curricula, make sure assignment is added
• Fix week selector!, make sure assignments properly shown
• remove useless stuff from currcilim. which fields u dont need?
• Add 5 weeks to curricula

• how does lastTaught week get updated?
• lessonprogresscard
• why students: 0 ?
• add solved Assignments
• Remove headers from assignments
• list of schools in HK
• lesson progress -> just show if student has this assignment as completed assignment
• fetch classrooms doesnt get updated

• fetchClassroomAndCurriculum twice -> hooks

• get assignment expectedOutput from firestore [fastapi]
• Should I show progress for assignment ?

• create new pics for tutorials
• what do i need when i create a classroom ?
• Should i add dashboard page?

• school list Show
• https://en.wikipedia.org/wiki/List_of_secondary_schools_in_Hong_Kong
• login error show.
• why do we need id in useClassrooms
• API Error: Dynamic server usage: Route /api/classrooms couldn't be rendered statically because it used request.url. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
• classrooms not updated!
• tutorials: show where to press on tutorial (underline).
• exercises not found. dark theme remove. back not working.
• not started should not be there if there is last Attempt.
• add images to projects.
• indexof TypeError: undefined is not an object (evaluating 'n.indexOf') assignmentProgress

• how to see focused or not
• delete old problems
• make limits to writes
• next tutorial button.
• add tooltip to theme btns

• lesson 7

• allow users to change settings

• Add test cases to 2-3 projects Modern Features to Include: Achievements/badges system Social sharing options Project showcases Peer reviews AI-powered hints Real-time collaboration Customizable themes/avatars

for every classroom, teachers will want to see progress we will leyt them choose classroom and show

lesson

list of students and their progress for every student -> go to their "tutorials progress" -> set of completed exercises we will see the total progress by tutrials data or every tutorials

• is logged in ? exerices number, tutorial_id
• execute code , is_exercise if yes then upd in firestore
• show is completed for ever lesson
• progress for every lesson
• what to store on firestore (lesson id , total exercises count)
• for user, create progress_tut collection and store their tut progress
• How can i track completion? For every classroom, show list of lessons and how many completed. Completed = Did exercise
• Classes
• For teacher, add panel to monitor each classroom

• GitHub, Logo icons
• In Live Session, Markdown rendered renders backticks and ``` in a weird way. Figure out how rehype pretty code is messing is in conflict
• Dont send expectedOutput and testCases, they should be in Backend
• Search Button Functionality
• logo
• Add quiz custom elements
• fix page paddings & nav font bigger
• Pagination in Tutorials page should be more sophisticated (per page), show page numbers
• Background -> picture not just white/dark.
• Fix session view ui, make it more engaging for kids (Raise hand needed?)
• Add PythonCodeEditor integration to Lessons4-...
• why is my ```code theme not githubdark
• Clean up types

• go thru every week and check what works and what not
• Student create their own accounts -> no need

• markdown based sessions for every week.

• make them and just add them to firebase

• students can either see them or what their teacher chose

• Create a template where teachers can create their own courses

• Self paced learning -> add problems there

• Teachers create students' accounts

• Every student has managed_by field

• Easier

• Detect if students are active import { useAuth } from '@/contexts/AuthContext'

  const { user, loading, signOut } = useAuth()

1. container mx-auto px-8 py-8
2. add toc to tutorials Output does not match expected result

users/
  {uid}/
    projects/
      {project_id}/
        completed: boolean
        lastAttempt: number
        totalAttempts: number
        successfulAttempts: number
        attempts/
          {auto-id}/  // Automatically generated ID
            code: string
            timestamp: number
            success: boolean

1. #D7F4EE
2. #E0D7F4
3. #F4D7DD
4. #EBF4D7

images, change questions.

• Bugs: quiz 5, q6: options should be code blocks

• add more quizzes

• interactivity

So, i want my pages to take up whole width , unless i specify smth diff, now need to think on padding