The creation of Spawner
cyberRohan
Posted on January 24, 2022
Introduction
The first time I started with Web Development, HTML was easy, CSS was still googleable, and JavaScript was logical. Still, the backend was tough to understand, I wanted to create stuff, but it was difficult creating those particular models and setting up those CRUD APIs.
That has been the case with everyone who's a beginner in the backend. And also, the people who want to work in the frontend, React, React native, or any other front-end framework have to use dummy APIs or create and use data from local .json files.
Well, without further ado, I present to you, The Spawner.
The Spawner is the first web app that can generate a complete backend in seconds. The user only needs to be concerned with what they want to create, just the fundamental relations.
This is one of my best projects to date, and I have loved working on this. I realized this craziness when I generated a backend application using my phone in 30 seconds, laying in my bed at 1 AM yesterday.
Important Links
- Github Repo - Go to the repo for detailed instructions on how to give inputs
- Live Link - Do checkout the web app
- Postman Collections
- Demo Link - A video explaining the use case of the app
- LinkedIn Post
Functionality
Let's try to understand the functionality with the help of an example.
Say we want to create the backend for an app which can have 3 types of Models, users(having basic details), state(having the state name) and finally district(having the state Id and the district name). That's all we need to provide to our Spawner app, we can use the UI(built in React) or we can hit a simple POST request with the data using Postman.
If you want The Spawner UI
Go to the Homepage and fill the entries as required
OR
If you're using Postman
Send a POST request to
https://the-spawner.herokuapp.com/app
with the following JSON object(or according to your needs, the format should be the same) as the body
{
"name": "Show Case",
"email": "showcase@gmail.com",
"slug": "showcase-app",
"password": "123456",
"schema": [
{
"name": "user",
"isAuth": true,
"attributes": [
{
"name": "name",
"type": "String",
"required": true
},
{
"name": "email",
"type": "String",
"required": true
},
{
"name": "password",
"type": "String",
"required": true
}
]
},
{
"name": "state",
"attributes": [
{
"name": "name",
"type": "String",
"required": true
}
]
},
{
"name": "district",
"attributes": [
{
"name": "name",
"type": "String",
"required": true
},
{
"name": "state_id",
"type": "ObjectId",
"required": false
}
]
}
]
}
Then fire up your browser and go to https://the-spawner.herokuapp.com/zips/yourAppSlug.zip to download the zipped backend app.
Voila
your app is generated.
It's all set with Mongoose, Express and NodeJS, all you need to do is just set the env parameters and run using npm start.
Technical Jargon
I have utilized the template literals to their fullest in this web application.
Tech Used - NodeJS, ReactJS, Express, Mongoose, JWT, Passport, BcryptJS
To generate any backend app, a few things had to be kept in mind-
- Creating the models - I utilized the schema given by the user to transform it into mongoose models
- Creating a folder structure which could work easily and be understandable to a majority of population (
fs-extra
helped a lot in quickly creating directories and files) - Generating all the possibilities of CRUD Routes in minimum number of Routes, for e.g. for a GET route, user can given
/model/all
to get all instances of that model or/model/10/?findBy=name&value=rohan
to get 10 model instances having the property name equals to rohan - Generating a README automatically for every backend app with all the routes data - I accomplished this using template literals and jotting down a good standard README
- Generating the base files like index.js, .env, config, middlewares(if required), and data for routes, controllers and services - again template literals came to rescue
Extra Checks
- Checking if any attribute has the type
ObjectId
, if so, check theref
provided, it will tell us the connection between models and generate theModel.js
file accordingly - Checking if any attribute has the type
Array
, if so, check theref
, if ref exists, the attribute will be anArray
ofObjectId
, if not, it will be anArray
of `String - To make sure I get the expanded versions of all the
ObjectId
, I have used themongoose-autopopulate
package - Check if
isAuth=true?
for any model, if yes, additional encryption usingBcryptJS
and JWT token setup(usingJson Web Token
andPassportJS
) is to be done for that particular model. In this case, there must be apassword
attribute in that model. - Mongoose automatically pluralizes our model names, which is fine when we're creating the backend ourselves but in automatic backend generation, it's important that the model name stays exactly the same to ensure that we are able to query database and use populate easily.
- Formatting the
.js
and.json
files created. The template literals creates the files but the format is complete chaos, to solve that problem, I have usedjs-beautify
package to format the backend app files using a custom formatter.
Current Ongoing Improvements
- Adding Validations to the Schema Input, to make sure proper formatted data is being sent to the backend
- UI Improvements obviously ;)
Limitations
Or as I like to call them, scope for future work
- Infinite loop possibility due to mongoose auto-populate - As we are using auto-populate, any one can create relations in such a way that it can get stuck in an infinite loop, I need to set depth of populate according to the relations
- Add validations in the generated backend apps automatically, I am sure validator package can help in this
- Check uniqueness of entries like email or username in the generated backend apps automatically
- If I have an attribute with the type Array, it will be easy to create an instance of that model in your app but updating it is a whole other story, currently, to update it, we have to send the updated array(old items +/- changes) to update it. A method should be created so that even if I just supply the new item, it's appended(or removed) to/from that array.
- Options for file uploads in the generated backend app using aws s3 and multer
My Socials
Posted on January 24, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.