Novus

• 

  An intuitive tool for visualising, connecting, and exploring the fundamentals of electricity.

• 

  A screenshot

Inspiration

I wanted to create a tool that helps people understand circuits in a more visual and intuitive way. Most circuit simulators either feel too advanced or too abstract. With Novus, my goal was to make circuit building fun, interactive, and accessible — especially for students and beginners diving into STEM.

What it does

Novus lets users drag and drop components like resistors and voltage sources onto a canvas, connect them using terminal points (positive, negative, input, output), and visualise the wiring in real time using SVG. It’s a smooth, low-barrier interface for building circuits without any code or complicated menus.

How I built it

• Next.js & TailwindCSS for the UI
  
• Zustand for managing component state, wires, selection, and interactions
  
• SVG for rendering live wires and connections
  
• A custom click-based wiring logic system
  
• Sidebar controls for adding components and managing circuit state

Challenges I ran into

• Handling drag-and-drop alongside accurate wiring logic
  
• Calculating dynamic terminal positions for SVG lines
  
• Preventing duplicate/self-connections
  
• Making the interface feel smooth and intuitive while keeping the logic tight

Accomplishments that I'm proud of

• Built a full wiring system from scratch with no external libraries
  
• Designed a clean, extensible architecture using Zustand
  
• Developed responsive wire drawing with dynamic terminal tracking
  
• Created a polished user experience with subtle but meaningful interactions

What I learned

• Deepened my understanding of SVG manipulation and geometry in React
  
• Learned how to architect state-heavy UIs using Zustand effectively
  
• Improved at building custom drag/drop and connect mechanics without relying on full libraries
  
• Gained insight into balancing technical accuracy with usability

What's next for Novus

• Add simulation logic to calculate voltage drops
  
• Introduce pan and zoom functionality for larger circuits
  
• Add export and share functionality (e.g., PNG export or JSON save/load)
  
• Support more components like LEDs, switches, capacitors, and more advanced logic gates
  
• Integrate basic circuit evaluation for real-time feedback

Built With

• javascript
• next.js
• react
• tailwindcss
• typescript