DEV Community: Farooq

How I Solved a Data-Driving Challenge while Building My Quote Gallery SPA

Farooq — Sun, 09 Nov 2025 09:15:48 +0000

This challenge i faced when i was working on my first data driven modular project called Quote Gallery (SPA).

I created everything from folder structure and routing system to connecting home page with that quotes storage file. Now the next task was to show that quote and it's author name equally and at same time on another two pages of this app, quote page & author page, right after user entered & specified the category in quote search bar,

I spended my whole day in just figuring out that, how i will do it, how will i create that fluid data driving system, that will flow data automatically right after user clicked "Show Me".

I tried many things, like i try creating functional system, importing that quote page and author page functions and quote storage file here in home page, user will click that show me button and it will send that input data to that imported storage file and it will check whether that category entered by user is exists or not, if exists, author and quote page's imported functions will take that quote data with its author name, and they will present it in their pages, and it simply doesn't work...

I tried this method again and again, even with different approaches, but nothing worked. Then i asked chatgpt about it, about how can i show data simultaneously right after user clicked "Show me". It helped me a little by telling me about some ideas and methods i can follow to create this kind of system..

One method that chatgpt told me, it was about using localstorage, although previously i was tried that method, but then there's mistake i did, i used Arrays in localstorage, and it becomes the reason for the failure, and i can't be successful in creating that data driving system..., i left that method.

but now, one thing get click to my brain. and that was ---- instead using localstorage this way...

const quotedata = JSON.parse(localStorage.getItem("quotedata")) || {};

Now i write localStorage this way On that quote storage file,

For quote:

localStorage.setItem("quote", thatQoute);

For author:
localStorage.setItem("author", thatAuthor);

Now if that quote exists, it will get saved in this localStorage, these will save that quote and it's author data separately. I will call this localStorage data from author & quote pages. like,,

localStorage.getItem("author");
localStorage.getItem("quote");

And present them,

It worked, after trying this idea, my app started working just as i expected it to work.

And finally, i successfully created that fluid data driving system in my first Data-Driven SPA (Quote Gallery). Now, if you don't understand this, or my explanation didn't help you in any way. You wanted to learn and understand it by looking at that code, like how i actually defined that localStorage system.

Here's it's GitHub repo:

How i Solved My First Modular Project Deployment Issue on GitHub

Farooq — Tue, 04 Nov 2025 04:27:52 +0000

I'm talking about the problem i face during deploying my first Modular project called contact manager (SPA) on my GitHub profile, and then how i solved it.

First of all, if you don't know anything about what is modular project, or SPA (single page application), its not something totally different type, it runs same as that simple 3 files (index.html, style.css & main.js) web app, but now it has many files, like if i show you in visuals,

/simple web application

|---- index.html
|---- main.js
|---- style.css

/Modular (Single Page Application)

├── index.html
├── /js/
│ ├── app.js
│ ├── router.js
│ └── views/
│ ├── HomeView.js
│ ├── CompletedView.js
│ └── StatsView.js
└── /css/
└── style.css

So what actually happened, i built and practiced my first Single Application Project, and after making it working perfectly, after polishing it a bit, i think i should push it to my GitHub, as my first step in building SPAs, but what happens when i try pushing it,

If you're a dev who use GitHub, you might know that GitHub doesn't allow pushing whole project folder at once, it allows only files not folders, especially if you're pushing your project manually on GitHub through browser drag & drop.

So i need to create a copy of that project, and i flattened that whole copy, remove all folders & edit all the imports,
from this ---> '/src/js/router.js' to that ---> '/router.js'..

Then i started creating a repo on my GitHub for that project, i setup it carefully with nice name and description, & i pushed my project file by file, then after making it live, when i opened that live site, i got panicked,

What happened,?.. while testing that flatten version on local server, it was working perfectly, but i don't understand what happened on gitHub, why GitHub's behavior is something different for this project than my previous simple three file projects i pushed, i know that it has many files, & i was expecting that kind of issue,

I immediately go to chat gpt, i asked,

"Is modular Javascript project, doesn't work as normal one file Javascript web projects on github?"

It's response was:

"When you create a modular JavaScript project (like an SPA with ES modules), your files are split across multiple JS modules:

// main.js
import { showQuotes } from './utils/quote.js';

Here the browser needs to load each imported file separately, respecting the module system.

But GitHub Pages (and normal static hosting) just serves plain files — it doesn’t “build” or bundle your project like npm/Vite does.
So if your folder structure or import paths aren’t correct (especially case sensitivity or relative paths), or if your imports use local paths, it can break after deployment."

It suggested me some common reasons like

"1. Missing type="module"

Wrong import paths (case or folder)
GitHub Pages URLs are case-sensitive.
So import "./Utils.js" ≠ utils.js.
Root-relative imports fail
Don’t use /src/..., always use relative paths like ./src/....
Files not uploaded correctly
If your folder structure changes (e.g. src/ or modules/), make sure the exact structure is uploaded.
Index file not at the root
GitHub Pages serves from / by default, so index.html must be in the root of your repository (not inside src)."

then i explain everything to it, what i did like

"In local server it was working perfectly... right know, its impossible for me to do upload whole folder at once even if i try, GitHub drag & drop only allow files not folders...

I made a copy of my project, & edited it, for GitHub, i removed all folders, & reconnected modules file to file,
then i tested it locally, it was fully ready for github, but now, don't know why GitHub behaving this way"

my code doesn't have any problems like the ones you showed as reasons, then it suggested me something that changes everything for me, he suggested me to do one thing..

It asked me to update each import in each file in that project on github, what it wanted me to do is,

I should update my imports, from '/app.js' to './app.js',
or from '/style.css' to './style.css'

In easy words, it wanted me to add '.' before every import in that project, and when i try running my project on github after doing all of these things.

Boom... i successfully deployed my first modular project. I built and made it run live on github, the issue i was facing, was gone now.

I learned & understand that deploying modular JS projects is slightly different from regular scripts. Always check your paths, use a local server, and remember that GitHub Pages hosts your files at a specific URL structure.

This small issue taught me something bigger — every error or failure hides a new concept waiting to be understood.
I used to get nervous when something broke, but now I see it as part of learning.

Live Demo:
Source Code

How I Started Building Neat App UIs Using Two Simple Rules

Farooq — Sat, 25 Oct 2025 04:18:32 +0000

I’ve never been into UI/UX design — I mostly focus on logic and functionality. I'm not quite good in making uis, but this week, I learned and i tried applying two simple design rules in my ui making, and my projects started to look completely different.

The Two Rules I Follow:

Leave enough space (padding, margins, gaps), it instantly makes everything look calm and readable.
Use only 2–3 colors, it keeps the app cohesive and easy on the eyes.

Once I started following these, I realized making clean designs doesn’t have to be a big deal. Even simple layouts started feeling modern and organized if you try following these two rules carefully. Here's some projects i try applying these rules on,

Both use these rules — and they look better many times without any fancy design tools. I learned that simplicity is the real design power. You don’t have to love UI — just keep it clean, consistent, and calm.

Learning Web Development Entirely from Mobile — My Journey Begins

Farooq — Thu, 23 Oct 2025 03:36:58 +0000

Hey everyone, I’m Farooq!
I’m currently learning frontend development — focused on core technologies like Vanilla JS, HTML, and CSS — completely from my mobile setup.

It’s not always easy, but I'm really interested in development, creating things, solving problems, building small web applications and tools that do or solve, even something small.

This is my first post on DEV, and I’ll be sharing weekly updates about my learning progress, small projects, and the lessons I pick up along the way.

My goal is to grow step by step, build real things, and inspire others who might be learning with limited tools too.

Thanks for reading, and feel free to follow along — I’d love to connect with others on a similar path.