DEV Community

Cover image for Building my First CRUD app for Marvel Database from Scratch
Sarthak Chhabra
Sarthak Chhabra

Posted on

Building my First CRUD app for Marvel Database from Scratch

Recently, I decided to build my first CRUD application just for the experience of creating something from scratch, so I decided to create a Marvel Heroes related application for fun. My goal wasn't grand; I simply wanted to explore how everything fits together practically and also I didn't want to follow the same path by creating an e-commerce website , or blog website like everyone else.

So, the idea was simple - an app where I could display a bunch of superheroes in a card format with an image and some details about them . And it needed to have full CRUD functionalities so that users could view the card in full-screen, edit it, delete it, and even add a new superhero.

It sounds pretty simple right , but as I got deeper into it, I realised there’s so much that goes into making even a simple CRUD app work smoothly.

MySQL database of the Heros
MySQL database of the Heros

I built the app using Technologies -

  1. HTML CSS and Javascript for the front end in which HTML was used inside EJS files(NPM package)
  2. NodeJs & ExpressJs for backend handling and routing
  3. EJS, it is a simple templating language that lets you generate HTML markup with plain JavaScript.
  4. MySQL as the database to store superhero data.
  5. And along with all these there were some more npm packages that I used such as method-override , nodemon , uuidv4 and more for making tasks easy.

So after spending so much time I finally built an application which fetches the data from the mySQL database of the marvel heroes whose details are stored in Database and we can perform all CRUD operations on that .

Some screenshots of Website ->

Home Page of the Website
Add new card in MySQL form & single card view
Preview of a single data

Building this app significantly enhanced my understanding of how frontend, backend, and databases interact in real-world scenarios. There's certainly room for further improvements, and one immediate enhancement I'm planning is to implement a table grid layout. While the card layout looks great, adding a table format would make searching, filtering, and managing superhero data much easier.

Since this was my first proper CRUD app, I'd love to hear your thoughts and suggestions. I'm always eager to learn from the community—any recommendations for a table view / data grid suitable for this use-case would be greatly appreciated!
Thank you...

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more