Inspiration

The inspiration for Easy ERD came from tools like Lucidchart and Draw.io. While they are powerful, I often struggled when designing databases because the free tiers restrict the number of shapes, forcing me to stop mid-design. Other diagram tools also didn’t work well for database-specific workflows. As a student, this friction made learning and experimenting with database design unnecessarily difficult, which motivated me to build a better, more focused solution.

What it does

Easy ERD helps users design PostgreSQL-based ER diagrams, visualize tables instantly, and understand database relationships clearly. Users can create, share, and collaborate on ER diagrams in real time. It also integrates AI to generate database designs automatically and explain schemas when users need help understanding them. The platform is especially focused on helping students learn database design smoothly and intuitively.

How we built it

The project was built using Next.js as the core framework, along with libraries such as React Flow for diagram rendering and Supabase for backend services and authentication. Real-time collaboration was implemented using WebSockets, allowing multiple users to work on the same diagram simultaneously. AI features were added to assist with schema generation and explanations.

Challenges we ran into

One of the biggest challenges was making the application collaborative in real time. Managing socket connections, syncing state between users, and handling real-time updates reliably was tedious and complex. Another challenge was building a custom canvas system midway through research and development, discovering React Flow helped solve a large portion of this problem.

Accomplishments that we're proud of

I’m proud that the project is fully functional and running, even though it’s not yet fully optimized. Building a working collaborative ERD tool with AI assistance within limited time was a big achievement. Successfully integrating React Flow and real-time updates was a major milestone for the project.

What we learned

Through this project, I learned how React Flow works internally and realized that many modern design tools are built on top of it. I also gained hands-on experience handling real-time data synchronization, socket communication, and collaborative application design.

What's next for Easy ERD

I plan to continue developing Easy ERD to make it more useful for students and professors. Future improvements include adding more diagram shapes, supporting additional database types, improving performance, and making it suitable for use as a lightweight database tool for small projects.

Built With

  • generative-ai
  • nextjs
  • prisma
  • railway
  • react
  • reactflow
  • socket.io
  • supabase
  • tailwind
Share this project:

Updates