Spakr

• 

  Sparkr

Inspiration

With the shift to hybrid and remote learning, many students and educators struggle to collaborate effectively in real-time. Tools are scattered, laggy, or hard to use — especially for quick interactive activities like quizzes, whiteboarding, and peer feedback. We wanted to build an all-in-one classroom collaboration tool that's fast, intuitive, and designed with real-time education in mind.

What it does

Sparkr is a collaborative web platform that connects teachers and students in remote classrooms. Teachers can:

Create and manage virtual classrooms

Build quizzes with custom questions

Track student performance through a live leaderboard

Students can:

Join classrooms via invite

Answer quizzes in real-time

See immediate feedback after each question

View overall performance at the end

The platform also supports video rooms, whiteboarding, and peer feedback sessions.

How we built it

We used:

Next.js App Router for routing and rendering

Chakra UI for clean and accessible design

Firebase for authentication and real-time Firestore database

LocalStorage for quick prototyping without backend

Chart.js for quiz analytics (planned)

Jitsi Meet for embedded video conferencing (planned)

Excalidraw + Liveblocks for collaborative whiteboard (planned)

We split our work across 4 teammates using GitHub feature branches for each module — auth, classrooms, quiz, and live tools — and merged them into a main codebase.

Challenges we ran into

Syncing data between teachers and students without a full backend setup

Designing a beginner-friendly UI with Chakra while handling dynamic quiz logic

Adapting to Next.js App Router and managing client/server components properly

Time constraints — we had to get everything running in just one day

Accomplishments that we're proud of

Built a fully functional quiz system with real-time feedback

Implemented classroom roles (teacher/student) with access control

Created a leaderboard that updates based on scores

Designed and deployed a clean UI using Chakra UI

Everyone contributed a meaningful piece to the final product

What we learned

How to structure a Next.js App Router project across multiple features

How to use Chakra UI to quickly build interfaces

How to use localStorage to simulate quiz persistence without a backend

How to collaborate in parallel using Git branches and GitHub PRs

The importance of clear planning and task division — especially under time pressure

What's next for Spakr

How to structure a Next.js App Router project across multiple features

How to use Chakra UI to quickly build interfaces

How to use localStorage to simulate quiz persistence without a backend

How to collaborate in parallel using Git branches and GitHub PRs

The importance of clear planning and task division — especially under time pressure

Built With

• api/liveblocks-auth
• chakra
• chakra-ui/react
• cookie
• emotion/react
• emotion/styled
• eslint-config-next
• eslint-plugin-react
• eslint/eslintrc
• firebase
• framer-motion
• javascript
• jose
• jsonwebtoken
• jwt
• liveblocks/node
• next-themes
• next.js
• react
• react-dom
• react-icons
• typescript