DEV Community: TheDivyaLog

How I Structure My Technical Notes to Actually Use Them

TheDivyaLog — Mon, 11 May 2026 10:48:46 +0000

When I first started learning web development, I used to write notes like I was preparing for an exam.

Long paragraphs. Definitions copied from tutorials. Random screenshots.
And later? I never opened those notes again.

So I changed the way I take technical notes.

Now my notes are built for one purpose:
to help me while building projects.

Here’s the structure I use now :-

** 1. Concept → Syntax → Real Example **
Instead of writing only theory, I divide every topic into 3 parts:

Concept
What is it actually used for?

Example:
useEffect lets us run side effects in React components.

Syntax
The basic structure.

useEffect(() => {
// code here
}, [])

Real Example
A practical use case from a project.

useEffect(() => {
fetchJobs();
}, []);

This makes revision much faster because I remember where I used it.

*2. I Write Notes While Building, Not While Watching *
Earlier, I paused tutorials every 2 minutes to write everything.

Now I only write notes after:

building something
debugging something
understanding something properly

Because notes written from experience are easier to remember.

** 3.I Use Small Code Snippets Instead of Big Explanations **

I avoid writing huge theory blocks.
Instead of this:
“Local storage is a web storage object that stores data in key-value pairs…”

I write:
localStorage.setItem("user", "Divya")
const data = localStorage.getItem("user")

Short. Practical. Easy to revise.

*4. I Separate “Learning Notes” and “Project Notes” *
This changed everything for me.

Learning Notes

concepts
syntax
examples

Project Notes

folder structure
API routes
bugs faced
deployment steps
features added

Project notes become super useful later when revisiting old projects.

*5. I Make Notes Searchable *
I keep most of my notes digital now.
Because searching:

"how to map array in react"
is faster than flipping pages for 20 minutes.

*Final Thoughts *
Good technical notes are not meant to look beautiful.

They should help you:

debug faster
revise quickly
build projects confidently
avoid repeating mistakes

The best notes are the ones you actually come back to.

What’s one thing you include in your technical notes that helps you the most?

The "Invisible" Side of Growth"

TheDivyaLog — Fri, 08 May 2026 12:14:42 +0000

Today is Day 4 of my 30-day challenge,

and if I’m being 100% honest, I struggled to hit the 'Record' button.

When you start building in public, there's this pressure to always look successful. You want to show perfect UIs and 'bug-free' days. But growth isn't a straight line. Sometimes, you feel like what you're doing doesn't matter, or that you're just 'boring' the audience.
What I realized today: The 'Jack of all trades' journey is messy. It’s not just about learning MERN; it’s about learning how to stay consistent when you don't feel like it.

I’m proud of my Job Portal and my Notes App, but today, I’m most proud of the fact that I didn’t quit when things felt 'off.'

*To anyone else out there feeling like they aren't on the right track: Just keep walking. The path shows up while you're moving."
*

Why I’m Proud to be a "Jack of All Trades"

TheDivyaLog — Thu, 07 May 2026 09:16:49 +0000

"For a long time,

I was afraid to share my work because I wasn't a 'Master' yet.
I thought my MERN projects weren't perfect enough, or my English wasn't technical enough.
But then I rediscovered the full quote: 'A jack of all trades is a master of none, but oftentimes better than a master of one.'This changed everything for me.
It gave me the 'blessing' to be a learner. On this 3rd day of my 30-day challenge, I’m realizing that being versatile—knowing how to code, how to write, and how to speak—is my real superpower.

Are you holding yourself back because you aren't a 'master' yet? Let's stop waiting and start building."

🐛 The Bug That Taught Me to Check the Basics

TheDivyaLog — Wed, 06 May 2026 10:28:40 +0000

Hey Dev's👋

While working on my Job Portal UI project using React, I ran into a persistent issue while fetching data from an API using Axios.

The error looked simple—but debugging it wasn’t.

*⚠️ The Problem
*
Every time I tried to fetch data, I got:

AxiosError: Network Error
net::ERR_INTERNET_DISCONNECTED
TypeError: Failed to fetch

At first glance, it seemed like a connectivity issue—but the API endpoint was opening fine in the browser

🔍 What I Checked
Instead of assuming one cause, I started verifying basics step by step:

✔️ API endpoint working in browser

✔️ Correct Axios request syntax

✔️ Proper component rendering in React

✔️ Dev server running correctly

✔️ Console logs for deeper inspection

🤔 What I Realized
This experience made me slow down and stop guessing.
Even if an error message looks obvious, it can sometimes be misleading or caused by multiple factors like:

Network instability

CORS issues

Incorrect API usage

Environment/config problems

🧠 The Lesson

What this bug is teaching me:
Don’t jump to conclusions based on error names
Always verify fundamentals step-by-step
Debugging is more about process than assumptions
Stay patient—especially when the issue isn’t clear yet

🚧 Current Status
The issue is still under investigation, and I’m continuing to narrow it down systematically.

🙌 Looking for Suggestions

If you’ve faced similar issues with:

Axios “Network Error”
API working in browser but failing in React

I’d really appreciate your insights!

Building a Job Portal UI with MERN

TheDivyaLog — Tue, 05 May 2026 10:40:52 +0000

Hey Dev's 👋

I recently started working on a Job Portal project using the MERN stack, but instead of jumping straight into backend, I decided to focus on the frontend first.

This approach is helping me clearly understand the UI structure before connecting everything.

🧠 Why I started with frontend?

In many tutorials, backend and frontend are built together, but I wanted to:

Visualize the complete UI first
Structure components properly
Avoid messy integration later

**⚙️ Tech Stack (Frontend)
**React.js
CSS / Tailwind (mention what you used)

**⚠️ Challenges I faced
Managing component structure properly
Handling state cleanly
Designing reusable UI components

🚧 What’s next?
I’ll be moving to the backend using:

Node.js
Express.js
MongoDB

And then connect everything to make it a fully functional job portal.

🎯 Goal of this project

Learn real-world project structure
Improve React skills
Build something useful for users 🙌 Feedback?

If you’ve built something similar or have suggestions on:

UI improvements
Folder structure
Best practices

I’d love to hear from you!

My First Log: Building a Job Card UI with MERN

TheDivyaLog — Mon, 04 May 2026 14:54:45 +0000

Hi everyone! I’m Divya.

I’ve recently been diving deep into the MERN stack, and honestly, it’s been a journey of highs and lows. I used to keep my projects hidden on my local computer, but I’ve decided to embrace the famous quote:

"A jack of all trades is a master of none, but oftentimes better than a master of one."

This blog is my way of stepping out of my comfort zone and documenting my growth.

**The Project: Job Card UI
Recently, I focused on the "Front-end" part of the MERN stack by building a Job Card UI. I wanted to create something that looked clean and was easy for a job seeker to navigate.

What I used:

React.js for the component structure.
CSS/Tailwind for the styling.

One Big Challenge I Faced :

While building the "Job Cards," I struggled with making them responsive. On smaller screens, the text was overlapping! How I fixed it: I realized I wasn't using flex-wrap correctly. Once I adjusted my CSS, the cards started stacking beautifully on mobile devices.
It was a small "aha!" moment that taught me a lot about layouts.

My Goal I’m not a master yet, but I’m building my skills every day. My plan is to: Complete the backend for this portal. Overcome my fear of sharing my work with the world .

What was the most challenging project you built when you started with React? I’d love to hear your stories in the comments!