Rippleboard

Inspiration

Coding interviews and technical brainstorming often happen on pen/paper or in plain text, which makes it hard to clearly show how data structures change over time. We wanted to build a tool that makes problem-solving more visual, interactive, and easier to communicate.

What it does

Rippleboard is an interactive whiteboard for coding interview prep and general brainstorming. Users can create and manipulate visual representations of arrays, linked lists, hash maps, and graphs, add annotations, and save their boards for later review or export them to share.

How we built it

We built Rippleboard with Next.js and React for the frontend, Tailwind CSS for styling, and Supabase for authentication and persistent board storage. The whiteboard editor manages interactive canvas state, structure editing, annotations, autosave, and export features.

Challenges we ran into

One challenge was designing a canvas that felt flexible for brainstorming while still supporting structured interactions for technical diagrams. We also had to handle state persistence, autosave behavior, and keeping the editing experience intuitive across multiple data structure types.

Accomplishments that we're proud of

We’re proud that Rippleboard goes beyond a static whiteboard and gives users hands-on, visual ways to work through technical ideas. We’re also proud of building persistent accounts, saved boards, and an editor that supports both coding interview workflows and broader brainstorming use cases.

What we learned

We learned how important interaction design is when building educational or thinking tools. We also gained experience managing complex client-side state, connecting a React app to Supabase, and balancing technical structure with open-ended creativity.

What's next for Rippleboard

Next, we want to add real-time collaboration, more data structure and algorithm visualizations, better templates for common interview problems, and smoother sharing features so Rippleboard can support both solo practice and team problem-solving.

Built With

• next.js
• postgresql
• supabase
• tailwindcss
• typescript