how-i-build-my-webapp-using-nodejs-expressjs
Artificial IntelegenceNodeJsProgrammingTechnologyTutorialUI/UXWeb development

How I Built My Web App Using ChatGPT (From Scratch!)

Thetechnotreat
May 10, 2025 3 Mins Read
47 Views
0 Comments

I recently built my web app using ChatGPT, and I had zero experience with Express.js or building full-stack apps before this. 😅

It all started with a simple idea. Thanks to ChatGPT guiding me at every step, I was able to turn it into a real, working product: SnappyQR.com, a QR code scanning and generating tool.

Here’s how I did it, step by step 👇

Starting from Scratch

I had heard of Express.js, but only in the context of creating REST APIs. I didn’t know you could actually build web pages with it too. So the first thing I asked ChatGPT was:

“Can I build a web app using Express.js?”

The answer: Absolutely yes!

But to display web pages, Express.js needs something called a templating engine. After exploring options (and asking ChatGPT again), I chose EJS because it seemed beginner-friendly and widely used.

The Project Idea: A QR Code Tool

Once I had the tech sorted, I needed a project idea.

So I came up with something simple and useful:

  • A web app where users can upload a QR code image, and the app decodes the text.
  • Plus, the ability to create custom QR codes, even with an image or logo in the center.

Getting Help from ChatGPT

Since I was new to structuring web projects, I asked:

“What should my folder structure look like for an Express + TypeScript project?”

ChatGPT suggested a clean and logical structure like this:

- dist
- node_modules
- src
    - app.ts
    - config
    - controllers     # Core business logic
    - public          # CSS, images, JS
    - routes          # Route handlers
    - server.ts       # App entry point
    - views           # EJS templates
- uploads           # Uploaded QR images

This setup helped me keep everything organized from the beginning.

Finding the Right Libraries

Once again, I turned to ChatGPT and asked:

“What are some Node.js libraries to scan and generate QR codes?”

Here’s what it recommended:

  • qrcode-reader for reading and scanning QR codes from images
  • qrcode for generating QR codes

QR Code Generator (with optional logo)

import QRCode from "qrcode";
import { createCanvas, loadImage } from "canvas";

export async function generateQR(data: string, width = 300, centerImg?: string) {
  const canvas = createCanvas(width, width);
  await QRCode.toCanvas(canvas, data, {
    errorCorrectionLevel: "H",
    margin: 1,
  });

  if (centerImg) {
    const ctx = canvas.getContext("2d");
    const img = await loadImage(centerImg);
    const center = (width - 50) / 2;
    ctx.drawImage(img, center, center, 50, 50);
  }

  return canvas.toDataURL("image/png");
}

QR Code Scanner

import QrCode from "qrcode-reader";
import { Jimp } from "jimp";

export async function scanQRCodeFromImage(imagePath: string): Promise<string> {
  const image = await Jimp.read(imagePath);
  image.resize(300, 300);

  return new Promise((resolve, reject) => {
    const qr = new QrCode();
    qr.callback = (err, value) => {
      if (err) return reject(err);
      resolve(value.result);
    };
    qr.decode(image.bitmap);
  });
}

Designing the UI with ChatGPT

I’m not great at CSS, so I asked ChatGPT for help:

“Can you help me design a simple, clean UI?”

It gave me CSS and HTML suggestions that I could copy and paste into my EJS files. I made a few small tweaks, but honestly, ChatGPT saved me a lot of time and confusion.

The Final Result: SnappyQR.com

And just like that, my little experiment turned into a real, working app.

✨ SnappyQR.com
 ✔️ Upload QR code images
 ✔️ Instantly decode them
 ✔️ Generate custom QR codes (even with logos)

It’s simple, but I’m super proud of it because I built it from scratch and learned so much along the way.

What I Learned

By the end of the project, I had learned how to:

  • Use Express.js and EJS
  • Write and organize code in TypeScript
  • Use npm libraries
  • Handle file uploads
  • Create a simple frontend UI

Ask better questions and learn quickly using ChatGPT

Final Thoughts

If you’re just starting out and feeling overwhelmed, my advice is simple:

👉 Pick a small project idea
 👉 Use ChatGPT as your coding buddy
 👉 Learn by building and asking questions

You don’t need to know everything before you start. I didn’t. I just kept learning one step at a time and improved along the way.

Thanks for reading! I hope this inspires you to start your own project too 🙌

Tags:

Share Article

Follow Me Written By

Thetechnotreat

Other Articles