Series Open CSS Loaders ["4. Final Submission"]

What I built

For DigitalOcean's hackathon, I built an app called Open CSS Loaders. It is exactly what it sounds, a collection of CSS loaders, which are open to all and anyone can use. The main difference however is that anyone can also add a loader. Just like on DEV anyone can submit a post, even if he is a beginner, in the same way if someone has a great idea for a loader and want to share it, he can add it here. There is a live editor that shows you how the loader will look on the site.
One can also edit the pre-existing code on the site so that he can customize the loader according to his liking.
The best part though is still the dark mode.😍

Category Submission:

I am submitting the app to Built for Business

App Link

The app can be found here:
open-css-loaders-pwtuz.ondigitalocean.app/
Thank You DigitalOcean for that sweet $50 so I can host my site on the platform for some time.

Screenshots

Description

The app is built to provide a collection of CSS loaders which can be used by anyone, ranging from beginner to professionals. Of course, the highlight being anyone can add a loader if he follows the id and the keyframe rule.
There is also a maintainer page on which one can edit the existing code and save it, in case it hinders the site, or completely delete the code. Though these things require a password.
The nifty features of the app are

• quote on page load from adviceslip
• dark mode
• likes being a random image
• Seperate themes for the editor

Link to Source Code

The Source Code is hosted on GitHub:
https://github.com/TusharYaar/Open-CSS-Loaders

Permissive License

The license provided is MIT

Background

While making a project from my college, I was looking for a CSS loader. While there are many great sites, usually they belong to an individual or a very small number of people. Thus the loaders on those sites are limited and are not updated frequently. The solution to this is making a site where anyone can add a loader, thus, in theory, it will be updated more frequently. So I made that site and it does not require login so that there is no pulling back users who don't want to login on random sites. And yes obviously you can copy any of the code and use it on your site.

How I built it

When I got this idea, I visualized what I wanted to make. I was sure I wanted it to be a single-page app. I wanted it to be simple not very wacky and that what I went with.
The first thing was to get the backend running, it was simple since not many routes are there, then it was the front end that took most of my time.
I got the database connection and working in a day, and then it was finding bugs or design flaws, and fix that.
The technologies used are:
Front-end: HTML, CSS, Javascript
Front-end Libraries: Jquery, ace.js
Backend: Node.js and Express
Database: MySQL
The digital Ocean platform provides a platform to serve this. The deployment process is very easy. I was able to get the app running in under 2 minutes. While making the app the biggest thing I learned was asynchronous requests. This was my first single-page web app, and I am pretty happy with how it turned out. The second thing I learned was how to use colors in dark-mode. That drastically improves how the site looks and feels.

Additional Resources/Info

I wanted the app to be light-weight as much as I could because I already am using jQuery and ace so I didn't go with a CSS library and wrote all the CSS on my own, and I think it turned out better compared to if I would have used a library.
I am a 2nd-year college student and this was my first app so I don't have much experience in making apps or improving them. Any feedback or improvements are really appreciated.