A Database Diagram Builder built using React and Next.js, bootstrapped with create-next-app and is used to help visualise data relationships between tables in a relational database.
A clone of DrawSQL although the only thing I actually know about it is the image on the landing page. Haven't actually used it myself to be honest.
App deployed with Vercel.
Note: The app is not meant to be used on mobile. I decided that it would be too difficult to make the webpage work on mobile (managing the drag and drop features mainly) that it would not be worth it to try making media queries for mobile. Sorry!
Demo without creating an account
Individual tables in the app are draggable, making it easy to organise your database. Table positions are stored in the database on drop (probably not the most efficient) so the next time you come back into the app, your tables will be where they were before.
Note: The table positions are stored based on the position they are from the left and top of the screen, so users with smaller screens may not be able to reach some tables put all the way to the right.
User authentication is managed with jsonwebtoken and bcryptjs. The token is stored in the app itself (via Context) so no information about the token is transferred to the browser. However, this means that whenever the browser is reloaded, the context is lost and the user has to log in again. This is quite stupid honestly and I might just consider using http cookies to store the token instead.
Create and add other users to groups to collaborate on the same databases together. (As of now still quite unreliable on the same database at the same time due to the app keeping track of drag and drop positions - it will work, but there will be lags/delays). All databases belong to a group, so users in the same group can work on the same databases.
The app isn't really complete yet, there are still quite a few functionalities that are not working very well yet but I have decided to deploy it first to test the remote database.
WIP:
- Logout functionality
- Allowing the addition of users after group is created
- Allowing the revoking of access of users from groups
- Allowing the deletion of groups
- Allowing the deletion of users
- Alternative view of diagram schemas (in JSON format maybe?)
- More customisability to the user
Also, need to get around removing some of the excess packages.
Initially intended to deploy with Netlify but Netlify was giving me quite a bit of trouble. Didn't realize Vercel was a deployment platform as well, and since they were the ones who made Next.JS, I decided to go ahead and try using them.
I would consider it generally complete - although there are quite a few functions that aren't built in yet. Most of the diagram builder works as I had intended for it to; just need to add more features.
