DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Series Open CSS Loaders ["1. Setting up backend"]
Tushar Agrawal
Tushar Agrawal

Posted on • Updated on

Series Open CSS Loaders ["1. Setting up backend"]

This is PART-1 of the series for my entry in the hackathon.

The Idea

For the hackathon, I decided to complete my Open CSS Loaders and host it on the Digital Ocean platform.
So I began the work. The cover image you see is the design I had in mind. The top Being the Header "Open CSS Loaders", then a hr, the links to my social media accounts, followed by a quote, and the two buttons, one for adding a code and the other to set editor theme.

The work

But this was the front end. First I started with the backend on Node.js and Express.
Install the basic packages.

npm i express request mongoose dotenv body-parser --save
Enter fullscreen mode Exit fullscreen mode

Now, it was just defining the routes and testing them which was pretty straightforward. So as of now I have the following routes:-

  1. / => the home page
  2. /getquote => to get a quote
  3. /api/serveranypopup => to check if there is any popup message to show on the page
  4. /api/setpopup => to set a popup message
  5. /api/getloader => to get all the loaders
  6. /api/addthiscode => to add a code
  7. /api/like/:loaderid => to like a loader

There are other routes for managing the page

  1. /iamadmin => to go to the admin page
  2. /api/updatecode => it requires a password to update any code
  3. /api/iamgoingtodeletethispost => it deletes any of the loader but requires password

Top comments (0)

🌚 Turn on dark mode

πŸ”  Change your default font

πŸ“š Adjust your experience level to see more relevant content

Β 

Head to your account's Settings to do all this and more.