DEV Community: Hosein Mahmoudi

📓 I Built an AI App That Makes Learning English Feel Effortless

Hosein Mahmoudi — Sat, 18 Jul 2026 12:11:14 +0000

📓 Stop Memorizing English — I Built an AI App That Actually Works

⚡ The Hook

You try to learn English.

You memorize words.

And then… you forget them.

🧠 The Real Problem

Most people learn English the wrong way:

memorizing random word lists
switching between apps and dictionaries
learning without context

That’s why nothing sticks.

🚀 The Idea

What if learning English felt like this:

👉 You read something interesting

👉 You click a word you don’t know

👉 You instantly understand it

No interruptions. No friction.

✨ Introducing: English Notebook

A modern AI-powered app where you learn English by interacting with real content.

generate stories
click unknown words
build vocabulary automatically

🤖 Generate Stories Based on Your Level

This is one of the most powerful features.

You choose your level:

A1 → Beginner
A2
B1
B2
C1
C2 → Advanced

And the app generates a custom story just for you.

🖼️ Story Generator

📖 Learn by Clicking Words

No more:

copy-pasting
opening dictionary tabs
losing focus

Just click any word:

definition
translation (your language 🌍)
example sentences

🖼️ Word Interaction

📚 Smart Vocabulary Notebook

Every word you click:

👉 automatically saved

👉 turned into a flashcard

You can:

review anytime
mark as mastered ✅

🖼️ Vocabulary Notebook

📊 Track Your Progress (Game Changer)

This is where things get serious.

You don’t just learn — you measure your growth.

Dashboard shows:

total words learned
active vs mastered words
daily streak
14-day activity trend

🖼️ Dashboard

What gets measured gets improved.

🕘 Nothing Gets Lost (History System)

Every story you generate is saved.

You can:

revisit old stories
continue reading anytime
track your learning journey

🖼️ History

🔊 Learn with Audio

listen to stories
follow highlighted words
improve pronunciation naturally

🌍 Multi-Language Support

You can choose your translation language:

Persian 🇮🇷
Arabic
Spanish
Hindi
and more

🎯 Why This App Is Different

Most apps:

❌ force memorization

❌ feel like school

❌ break your focus

English Notebook:

✅ learning through stories

✅ real-time interaction

✅ measurable progress

✅ smooth modern UX

🧑‍💻 Built With

Next.js 15
React 19
TypeScript
Tailwind CSS
Prisma + Neon
OpenRouter (AI)
Auth.js

🔗 Try It Yourself

👉 https://english-notebook-sigma.vercel.app/

Generate a story. Click words. See the difference.

💬 Why I Built This

As a developer, I realized:

English is not optional — it's your growth engine.

So I built a tool I actually wanted to use.

🚀 Let’s Connect

If you like this project or want to support:

👉 https://github.com/hoseinmdev

I’m building more tools like this — follow along 🔥

🔥 Final Thought

Stop memorizing English.

Start interacting with it.

#englishlearning
#ai
#nextjs
#webdev
#programming

🌍 Why English Is a Superpower for Developers (Not Just a Language)

Hosein Mahmoudi — Fri, 17 Jul 2026 11:26:47 +0000

You’re learning to code. You’re building projects. You’re improving every day.

But something invisible is slowing you down.

It’s not your skills.

It’s your English.

🧠 It’s Not About Speaking Perfectly

Let’s be clear:

You don’t need perfect English to become a great developer.

But you do need enough English to learn, search, and understand.

Because most of the programming world runs on English.

💻 1. Almost All Learning Resources Are in English

The best content is written in English:

documentation
blog posts
tutorials
GitHub READMEs
Stack Overflow answers

❌ Without English

You rely only on translated or limited resources

👉 slower learning

✅ With English

You can access global knowledge instantly

👉 faster growth

The difference is not small. It’s massive.

🔍 2. You Debug Faster

Every developer Googles errors.

Example Error

TypeError: Cannot read properties of undefined

❌ Without English

harder to understand the error
harder to search correctly
limited results

✅ With English

You can:

search effectively
understand answers
fix issues faster

Better English = better debugging

📚 3. Documentation Becomes Your Best Friend

Official docs are always in English.

❌ Without English

You avoid docs and rely on random tutorials.

✅ With English

You go directly to the source of truth.

Great developers read docs. A lot.

🌍 4. You Can Join the Global Developer Community

English connects you to developers worldwide.

You can:

ask questions
answer others
write blog posts
contribute to open source

You don’t need perfect grammar. You need clear communication.

🚀 5. More Opportunities Open Up

Many opportunities require English:

remote jobs
international teams
freelance clients
open-source collaboration

❌ Without English

You stay limited to local opportunities.

✅ With English

You unlock global opportunities.

⚠️ Common Mistakes Developers Make

waiting to be perfect
avoiding English content
not practicing daily

✅ How to Improve English as a Developer

🔹 Read documentation daily

🔹 Watch tutorials in English

🔹 Write commits in English

git commit -m "feat: add authentication flow"

🔹 Read GitHub projects

🔹 Think in English while coding

Combine coding + English = faster improvement

🧠 The Mindset Shift

Don’t think:

“My English is not good enough”

Think:

“English is part of my developer toolkit”

🔥 Final Thought

English won’t make you a great developer overnight.

But it will:

speed up your learning
improve your problem-solving
connect you to the world
unlock better opportunities

💬 Let’s Talk

How has English impacted your developer journey?

Do you learn in English or your native language?

Drop your thoughts 👇

#programming
#webdev
#career
#learning

🐙 Why Every Developer Needs GitHub (Even If You’re Not Job Hunting)

Hosein Mahmoudi — Thu, 16 Jul 2026 14:07:19 +0000

⚡ The Hook

You write code. You build projects. You learn every day.

But no one sees it.

That’s the problem.

I’ve worked on multiple frontend projects, and one thing became clear:

If your code isn't visible, people can't understand what you can actually build.

Your GitHub is not just a place to store code.

It is your developer identity.

🧠 GitHub Is More Than Just “Saving Code”

A lot of developers think GitHub is just:

“a place to push my code”

That’s only the beginning.

GitHub is:

your portfolio
your proof of work
your developer identity
your learning history

Your resume says what you know.

Your GitHub shows what you build.

💻 1. GitHub Shows What You Can Actually Build

Anyone can say:

“I know React”

“I know Next.js”

“I can build full-stack applications”

But GitHub gives people something much more valuable:

Evidence.

It shows:

real projects
real architecture decisions
real code quality
your progress over time

❌ Without GitHub

"I built some projects but didn't upload them"

Nobody can verify your experience.

✅ With GitHub

github.com/hoseinmdev

People can see:

how you write code
how you organize projects
how you solve problems

That creates trust.

🚀 2. GitHub Helps You Become a Better Developer

GitHub is not only for showing your work.

It improves how you work.

When you use GitHub consistently, you naturally start:

writing cleaner commits
organizing projects better
documenting your decisions
thinking about maintainability

Example

❌ Bad commit

git commit -m "fix"

Nobody knows what changed.

✅ Better commit

git commit -m "fix: handle undefined user data in dashboard API"

Now your team understands:

what changed
why it changed
where to look

Good GitHub habits create better engineering habits.

🌍 3. GitHub Connects You With Developers

GitHub is not only code.

It is a community.

You can:

discover open-source projects
learn from experienced developers
contribute to real applications
collaborate with people worldwide

Some of the best developers I know improved because they started reading other people's code.

🧩 4. Your GitHub Becomes Your Developer Portfolio

You don't always need a fancy portfolio website.

A clean GitHub profile can already tell your story.

A strong profile should have:

✅ pinned projects

✅ good README files

✅ meaningful commits

✅ clear project descriptions

✅ consistent activity

Example README structure

# Project Name

Short explanation about the project.

## Features

- Authentication
- Dashboard
- API integration

## Tech Stack

- React
- Next.js
- TypeScript

## Installation

npm install
npm run dev

Small details create a professional impression.

⚡ 5. Companies Look At GitHub

Many developers only focus on:

resume
LinkedIn
certificates

But your GitHub can answer the most important question:

"Can this person actually build software?"

People look for:

real projects
coding style
problem-solving ability
consistency

⚠️ Common GitHub Mistakes

I see many developers making these mistakes:

❌ Only private repositories

Nobody can see your growth.

❌ Empty README files

A project without explanation is harder to understand.

❌ Bad commit messages

git commit -m "update"

This gives no context.

❌ Uploading everything

Quality is better than quantity.

A few strong projects are better than dozens of unfinished ones.

✅ How I Recommend Using GitHub

My workflow:

push projects regularly
write meaningful commits
create README files
pin your best repositories
contribute when possible
keep improving old projects

You don't need to code 10 hours every day.

Consistency wins.

🧠 The Mindset Shift

Don't think:

"I will upload my projects later."

Think:

"If my work is invisible, nobody knows it exists."

Build in public.

Share your progress.

Let your code speak.

🚀 Real Example

I share my frontend development journey and projects on GitHub:

👉 https://github.com/hoseinmdev

I focus on building projects with:

clean structure
modern frontend technologies
real-world practices

Feel free to explore my repositories and share feedback.

💬 Let's Build in Public Together

If you are also building projects, learning new technologies, or improving as a developer:

Let's connect 👇

👉 GitHub: https://github.com/hoseinmdev

I love discovering developers who are actively building.

Drop your GitHub profile in the comments — let's learn from each other and grow together 🚀

🔥 Final Thought

GitHub won't magically make you a better developer.

But it will help you:

make your work visible
build credibility
learn faster
connect with amazing developers
create new opportunities

Your code deserves to be seen.

Start building in public.

#github
#webdev
#programming
#career

How AI Can Help You Improve Your Performance as a Developer

Hosein Mahmoudi — Thu, 16 Jul 2026 12:54:16 +0000

Why this matters

Let’s be real — most of us don’t struggle because we “can’t code”.

We struggle because:

we waste time on repetitive tasks
we get stuck on small bugs
we context-switch too much
we overthink simple problems

That’s where AI actually helps.

Not as a replacement — but as a performance multiplier.

🤖 First, what AI is actually good at

AI is not magic.

But it’s really good at:

generating boilerplate
explaining errors
suggesting improvements
summarizing docs
speeding up repetitive work

👉 Basically: saving your mental energy

⚡ 1. Write code faster (without burning out)

Instead of writing everything from scratch:

// prompt idea
"create a custom React hook for localStorage"

You get a solid starting point instantly.

👉 You still review it
👉 You still understand it
👉 But you don’t waste time writing boilerplate

🐞 2. Debug faster

Instead of Googling for 20 minutes:

Error: Cannot read property 'map' of undefined

You ask AI:

👉 It explains the issue
👉 suggests fixes
👉 shows edge cases

Example mindset shift

Before:

search → open 5 tabs → read → test → maybe fix

Now:

ask → get explanation → apply → move on

🧠 3. Learn way faster

AI is like having a senior dev on demand.

You can ask:

“Explain React Server Components simply”
“When should I use memo?”
“What’s wrong with this pattern?”

👉 Instant explanations
👉 Real examples
👉 No fluff

🔄 4. Automate boring tasks

Things you shouldn’t waste time on:

writing regex
generating types
creating repetitive components
converting data formats

👉 AI handles these in seconds

📚 5. Write better documentation

Most devs hate writing docs.

AI helps you:

generate README files
write comments
document APIs

👉 Your project becomes easier to understand
👉 Your team moves faster

🧩 6. Break down complex problems

Instead of getting stuck:

"build a dashboard with auth, charts, and API integration"

Ask AI to break it down:

👉 smaller steps
👉 clear structure
👉 less overwhelm

⚡ 7. Stay focused (this is underrated)

Biggest hidden benefit:

👉 less context switching

Instead of:

switching between StackOverflow, docs, and code

You:

stay in one flow
ask → get answer → continue coding

🧠 Real talk (important)

AI is powerful, but:

❌ Don’t copy blindly
❌ Don’t skip understanding
❌ Don’t rely on it for everything

✅ Best way to use AI (my workflow)

use it for boilerplate
use it for debugging help
use it for learning concepts
review everything before using
treat it like a junior dev assistant

⚠️ Common mistakes I see

copying code without understanding
over-relying on AI
ignoring edge cases
trusting wrong outputs

👉 AI is fast, but not always right

🧩 Final thought

AI won’t replace developers.

But:

developers who use AI will replace those who don’t

Use it to:

move faster
think clearer
focus on real problems

Not just write more code.

🔥 My takeaway

AI didn’t make me a better developer overnight.

But it helped me:

waste less time
learn faster
stay focused

And that’s where the real performance gain comes from.

How to Improve Performance in Next.js Projects

Hosein Mahmoudi — Wed, 15 Jul 2026 10:15:08 +0000

Why this matters

Performance in Next.js isn’t just a “nice to have”.

It directly affects:

user experience
SEO
conversion rate

And the truth is — most performance issues don’t come from React itself, but from how we use it.

This is a breakdown of what actually works in real projects.

🚀 1. Use Next.js built-in optimizations (don’t fight the framework)

Next.js already gives you a lot for free — if you actually use it.

✅ Image Optimization

import Image from 'next/image';

<Image
  src="/hero.webp"
  alt="hero"
  width={1200}
  height={600}
  priority
/>

👉 Automatically:

lazy loads images
serves modern formats (WebP/AVIF)
resizes per device

✅ Font Optimization

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

👉 No layout shift
👉 No external requests

⚡ 2. Code Splitting & Dynamic Imports

Don’t load everything at once.

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

👉 Load only when needed
👉 Reduce initial bundle size

📦 3. Reduce Bundle Size

This is where most apps fail.

🔍 Analyze your bundle

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

Run:

ANALYZE=true npm run build

💡 Common mistakes

importing whole libraries instead of specific functions
unused dependencies
large UI libraries without tree-shaking

👉 Example:

// ❌ bad
import _ from 'lodash';

// ✅ good
import debounce from 'lodash/debounce';

🧠 4. Use Server Components (when possible)

With modern Next.js (App Router), you should default to Server Components.

👉 Benefits:

less JS sent to client
faster load time
better SEO

Example

// server component by default
export default async function Page() {
  const data = await fetch('https://api.com/data').then(res => res.json());

  return <div>{data.title}</div>;
}

👉 No useEffect
👉 No client-side fetching

⚡ 5. Smart Data Fetching & Caching

Next.js gives you built-in caching.

fetch('https://api.com/data', {
  cache: 'force-cache',
});

Or:

fetch('https://api.com/data', {
  next: { revalidate: 60 },
});

👉 ISR (Incremental Static Regeneration)
👉 Data stays fresh without killing performance

🧩 6. Optimize Rendering

❌ Avoid unnecessary re-renders

overusing useState
passing unstable props
not memoizing components

✅ Use memoization when needed

import { memo } from 'react';

export default memo(MyComponent);

👉 Don’t overuse it — only where needed

🖼️ 7. Optimize Images (properly)

always use next/image
use correct sizes
avoid huge images

👉 biggest impact on LCP (Largest Contentful Paint)

🧪 8. Measure, don’t guess

Use real tools:

Lighthouse
Web Vitals
Chrome DevTools
Vercel Analytics

👉 If you’re not measuring, you’re guessing

⚠️ Common mistakes I see

turning everything into client components
ignoring bundle size
fetching data on the client unnecessarily
not using caching
overusing libraries

🧠 Real-world mindset

Performance is not about doing one thing.

It’s about:

small optimizations everywhere

🔥 My go-to checklist

use Server Components by default
optimize images with next/image
lazy load heavy components
analyze bundle size
use caching properly
avoid unnecessary client logic

🧩 Final thought

Next.js is already optimized.

Most performance issues come from:
👉 how we use it, not the framework itself

Keep things simple.
Ship less JS.
Measure everything.

That’s it.

React 19 — What’s New, Benefits & Key Differences

Hosein Mahmoudi — Tue, 14 Jul 2026 18:46:56 +0000

Why this matters

If you’ve been working with React for a while, you probably got used to patterns like:

useEffect for data fetching
lots of state handling
extra boilerplate for async logic

React 19 changes some of that — not in a “rewrite everything” way, but in a make things simpler and cleaner way.

This post is a quick breakdown of what actually matters.

🚀 What’s new in React 19?

1. `use()` — Simpler async handling

Before (React 18):

const [data, setData] = useState(null);

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(setData);
}, []);

Now (React 19):

const data = use(fetch('/api/data').then(res => res.json()));

👉 No useEffect, no extra state
👉 Much cleaner async logic

2. Server Components (more practical now)

React 19 makes Server Components more usable in real apps.

Run components on the server
Send less JS to the client
Better performance by default

👉 Especially useful if you're using frameworks like Next.js

3. Actions (Better form handling)

Handling forms used to be messy.

Now:

async function submit(formData) {
  // handle form
}

<form action={submit}>
  <input name="email" />
  <button type="submit">Send</button>
</form>

👉 No need for manual event handlers
👉 Cleaner and more native feeling

4. Improved performance

Better rendering optimizations
Smarter updates
Less unnecessary re-renders

👉 You don’t always see it, but you feel it in bigger apps

5. Better developer experience

clearer patterns
less boilerplate
fewer “React hacks”

👉 React is slowly becoming more intuitive again

⚖️ React 18 vs React 19 (real difference)

React 18	React 19
useEffect for async	`use()` for async
more boilerplate	cleaner logic
client-heavy	more server-friendly
manual forms	built-in actions

💡 So… is it worth upgrading?

Short answer: yes — but not blindly

👍 Upgrade if:

you’re starting a new project
you’re using modern React frameworks
you want cleaner async logic

⚠️ Wait if:

your project is large and stable
dependencies are not ready yet

🧠 My take (from a frontend dev)

React 19 isn’t a revolution — it’s a refinement.

It removes a lot of the awkward patterns we’ve been dealing with for years.

The biggest win for me:
👉 less useEffect
👉 less mental overhead
👉 cleaner components

🔗 Useful links

🧩 Final thought

React is moving toward:

“Write less code, do more by default”

And honestly… it’s about time.

Stop Arguing About Code Style — Set Up Prettier, ESLint & Husky Once

Hosein Mahmoudi — Tue, 14 Jul 2026 09:59:31 +0000

Why this matters

I’ve worked on a few frontend projects where code reviews turned into style debates—tabs vs spaces, semicolons, quote styles… you name it.

It slows everything down and adds zero value.

At some point, I realized this shouldn’t even be a discussion.

So now, whenever I start a project, I set up Prettier + ESLint + Husky on day one.
No debates. No manual fixes. No messy PRs.

This post is exactly how I do it.

🧰 What each tool actually does

Prettier → formats your code automatically
ESLint → catches bad patterns & enforces rules
Husky → runs checks before commits (so no one skips them)

Together → clean, consistent code without thinking

⚙️ Step 1 — Install dependencies

npm install -D prettier eslint husky lint-staged

🎯 Step 2 — Setup Prettier

Create:

prettier.config.js

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2,
};

Create:

.prettierignore

node_modules
dist
build

🔍 Step 3 — Setup ESLint

Initialize:

npx eslint --init

Then tweak your config:

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/react-in-jsx-scope': 'off',
  },
};

👉 Important: "prettier" disables ESLint rules that conflict with Prettier.

🔗 Step 4 — Connect ESLint + Prettier

Install:

npm install -D eslint-config-prettier

That’s it.
Now ESLint won’t fight Prettier.

🐶 Step 5 — Setup Husky

Initialize Husky:

npx husky init

Add pre-commit hook:

npx husky add .husky/pre-commit "npx lint-staged"

🚀 Step 6 — Setup lint-staged

Add to package.json:

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

💡 What happens now?

Every time you commit:

ESLint checks your code
Prettier formats it
Only clean code gets committed

No more:

“fix formatting” PR comments
broken lint rules in main branch
inconsistent code styles

🧠 Real impact (from experience)

After adding this to a team project:

PR noise dropped a lot
reviews focused on logic, not style
onboarding new devs got easier
nobody thinks about formatting anymore

🔗 Useful links

🧩 Final thought

If you're not setting this up at the start, you’re just postponing the pain.

Set it once. Forget it forever.

My Github Profile 🤍

Hosein Mahmoudi — Mon, 29 Jun 2026 10:25:21 +0000

Let's Connect and Grow Together on GitHub! 👋

Hey everyone!

I'm a developer working on [Web Development / Next.js / React.js ]. I want to expand my network, meet new developers, and explore interesting projects.

Here is my GitHub profile:
👉 Click here to visit my GitHub Profile

Drop your GitHub link in the comments below! I will definitely check out your repositories and follow you back. Let's support each other! 🌟