DEV Community: Hosein Mahmoudi

I Create My X Account 🤍

Hosein Mahmoudi — Wed, 12 Aug 2026 12:58:51 +0000

Hi guys, i create my X account to share my posts in that :)

if you can please follow me and i will back , Thanks :)

Hosein Mahmoudi (@Hosein_Mah_Dev) / X

Frontend Developer ⚡️ React • Next.js • TypeScript Building products, sharing lessons & exploring the web. DMs open for freelance work.

twitter.com

How I Added Eye-Catching Animations to My Frontend Projects ✨

Hosein Mahmoudi — Tue, 11 Aug 2026 12:29:41 +0000

Have you ever visited a website and thought:

"How did they make that animation?! 😳"

I definitely have.

As a frontend developer, I've always been fascinated by websites with beautiful and smooth animations.

You know those websites where cards move when you hover over them, elements smoothly appear as you scroll, and everything just feels... alive? ✨

For a long time, I had one question:

Did the developer actually build all of these animations from scratch?!

Well... not always 😄

A while ago, I discovered Aceternity UI, and it completely changed the way I think about adding animations to frontend projects.

🚀 Aceternity UI

Aceternity UI is a collection of beautiful and animated UI components that you can use in your projects and customize however you want.

And there are a LOT of them.

You can find things like:

✨ Animated cards
🌌 Background effects
💫 Hover animations
🖱️ Interactive components
⚡ Text animations
🎨 Beautiful UI effects

The best part?

You don't have to reinvent the wheel every time you want to create something visually interesting.

You can start with an existing component, understand how it works, and then customize it to fit your own project.

That's exactly what I did with my portfolio.

💼 Experience Section

For the Experience section of my portfolio, I used the Card Spotlight component from Aceternity UI.

Of course, I didn't use it exactly as it was.

I customized it to match the design and style of my portfolio.

Here's the result:

🎥 Experience Animation

I really like these kinds of subtle animations because they don't scream:

"HEY! LOOK AT ME! I'M AN ANIMATION!" 😂

Instead, they make the UI feel more interactive without getting in the user's way.

🚀 Projects Section

For my Projects section, I used another Aceternity UI component called Comet Card.

Again, I customized it to fit my own design.

Here's how it turned out:

🎥 Projects Animation

This was one of those moments where I realized:

You really don't need to create every animation from scratch.

Sometimes, the best approach is to find a good starting point and make it your own.

🌀 And Then There's GSAP...

Aceternity UI wasn't the only tool I used.

I also used GSAP in my portfolio, especially when I wanted more control over animations based on scrolling.

And honestly, this is where things get really interesting. 👀

Instead of simply saying:

"Animate this element when I hover over it."

I can create animations that react to the user's scroll position.

For example:

Scroll ↓

Element starts moving

↓

Opacity changes

↓

Position changes

↓

Animation progresses

↓

User keeps scrolling

↓

Animation continues

This gives you much more control over how the page feels while the user is navigating through it.

And honestly...

Scroll-based animations can make a portfolio feel completely different. 🔥

🧠 Do You Need to Build Everything From Scratch?

I used to think that using a component library for animations somehow meant I wasn't "really" building the UI myself.

I don't think that anymore.

There's a huge difference between:

Copy → Paste → Done

and:

Understand → Customize → Integrate → Make it yours

Libraries like Aceternity UI can save you a huge amount of time while still giving you the freedom to create something unique.

Instead of spending hours trying to recreate a specific animation from scratch, you can start with a working implementation and spend your time improving the actual user experience.

And I think that's a pretty good trade-off. 😄

🎨 My Portfolio

If you're curious about how these animations look together, you can check out my portfolio:

👉 My Portfolio

I've used both Aceternity UI and GSAP to create different interactions and animations throughout the website.

Final Thoughts

I think animations are one of those things that can completely change how a user perceives a website.

You don't necessarily need hundreds of animations.

Sometimes, just a few well-designed and subtle interactions can make a website feel much more polished.

And tools like Aceternity UI make experimenting with these ideas much easier.

So if you've ever looked at a beautiful website and wondered:

"How the hell did they make this animation?" 😂

Maybe you don't need to start from zero.

Go explore some UI libraries, find something interesting, understand how it works, and make it yours. 🚀

And if you've used any interesting animation libraries or tools in your projects, I'd love to hear about them!

What are you using for animations these days? 👇

🔗 Resources

frontend

Hosein Mahmoudi — Tue, 11 Aug 2026 09:16:18 +0000

🎨 Bringing SVGs to Life with Motion for React: From Static Vectors to Dynamic UI ✨

Hosein Mahmoudi — Thu, 06 Aug 2026 20:23:14 +0000

For a long time, my workflow with SVGs was pretty straightforward: export from Figma, paste the code into a React component, render it, and move on. SVGs were basically just resolution-independent, static assets sitting silently on the screen. 😴

But let's be honest—modern user interfaces thrive on micro-interactions! A subtle line-drawing animation on hover or a smooth morphing icon during state changes can transform a basic functional UI into a polished, delightful experience that users love. ❤️

While CSS animations handle basic transitions pretty well, complex SVG orchestration—like path drawing, staggered delays, and spring physics—can quickly turn your CSS files into a messy nightmare. 😅

That is where Motion for React (motion/react, formerly Framer Motion) changes the game! 🚀

⚡ The Bottleneck of Raw CSS SVG Animations

CSS animations are great for simple transforms like scale, rotate, or opacity. But when you start manipulating SVG path metrics using stroke-dasharray and stroke-dashoffset, things get tricky fast:

Calculations are Manual: You need to pre-calculate path lengths or hardcode estimates. 📐
State Management is Clunky: Linking CSS keyframe animations to React state changes usually involves dynamic class toggles or tricky inline CSS variables. 🤯
Lack of Spring Physics: Standard CSS cubic-bezier curves often feel a bit mechanical compared to realistic physics-based spring dynamics. 🧬

🔥 Enter Motion for React (`motion/react`)

Motion provides first-class support for SVG elements out of the box! By simply prefixing standard SVG tags with motion. (e.g., <motion.svg>, <motion.path>, <motion.circle>), you gain instant access to declarative animation props and path-drawing magic. ✨

🛠️ Practical Example: Interactive Path Drawing

One of my absolute favorite features in Motion is the pathLength property. Motion automatically measures the total length of the SVG path under the hood, allowing you to animate line drawing effortlessly from 0 to 1. 🎉

Here is a super smooth interactive checkmark example:

import React, { useState } from "react";
import { motion } from "motion/react";

export const InteractiveCheckmark = () => {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <button
      onClick={() => setIsChecked(!isChecked)}
      className="flex items-center gap-3 px-4 py-2 rounded-lg bg-slate-900 text-white cursor-pointer hover:bg-slate-800 transition-colors"
    >
      <motion.svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {/* Background Box */}
        <motion.rect
          x="2"
          y="2"
          width="20"
          height="20"
          rx="4"
          animate={{
            stroke: isChecked ? "#10B981" : "#64748B",
            fill: isChecked ? "#10B981" : "transparent",
          }}
          transition={{ duration: 0.2 }}
        />

        {/* Animated Path Length Checkmark ✍️ */}
        <motion.path
          d="M6 12L10 16L18 8"
          stroke="#FFFFFF"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: isChecked ? 1 : 0 }}
          transition={{
            type: "spring",
            stiffness: 300,
            damping: 20,
          }}
        />
      </motion.svg>
      <span>{isChecked ? "Completed! 🎉" : "Mark as Complete"}</span>
    </button>
  );
};

🤖 Accelerating the Workflow with AI (And Fine-Tuning Manually)

Lately, I’ve been using AI to speed up my early prototyping phase:

Idea Generation: I ask LLMs to generate valid SVG paths for multi-state icons (like a play button morphing into a pause button, or a menu icon turning into a close button). 💡
Initial Rigging: Prompting the AI to wrap raw SVGs in motion/react components gives me a working foundation in seconds. ⏱️

⚠️ The Limits of AI Generation

While AI is fantastic for fast prototyping, it often generates unoptimized SVG vectors with unnecessary <g> groups or redundant code. Manual fine-tuning is still essential to:

Clean up Figma exports: Group related paths together and strip useless transform tags. 🧹
Refine Spring Physics: Adjust stiffness, damping, and mass parameters to give interactions realistic weight and character. 🎛️
Optimize Viewboxes: Ensure coordinates align properly across different screen sizes. 📐

💡 Performance & Best Practices for SVG Animations

Animating vector graphics can cause performance issues if not handled carefully. Here are three quick rules I follow to keep things buttery smooth 🧈:

Animate Transforms and Opacity Where Possible: Vector path morphing forces the CPU to recalculate coordinates every frame. Whenever possible, rely on scale, rotate, and opacity which can be offloaded directly to the GPU! 🏎️
Keep SVGs Modular: Break complex animated SVGs into smaller, reusable React components instead of maintaining giant, monolithic SVG files. 🧩
Use layoutId for Shared Transitions: Motion’s layoutId prop makes morphing SVGs across different component boundaries feel like pure magic without complex coordinate math! 🪄

💬 Conclusion & Community Discussion

Moving from treating SVGs as static illustrations to interactive UI elements has completely changed how I approach frontend development. Motion for React makes this transition so smooth, blending intuitive declarative syntax with powerful performance capabilities. 🌱

There's always a better, cleaner, or more creative way to build something than the way we built it yesterday—and that's what makes web development so exciting! 🚀

👇 I'd genuinely love to hear how you approach SVG animations:

Have you tried motion/react in your projects yet? 💭
Or do you prefer other vector workflow tools like Rive or Lottie for complex animations? 🎬

Let's discuss in the comments below! 👇

🍕Nonna’s Table

Hosein Mahmoudi — Sun, 02 Aug 2026 09:37:28 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

A landing page for Nonna's Table — a wood-fired pizza place that only exists in my head, but I built it like it's been on the corner of Mulberry St for thirty years.

I leaned hard into "comfort food" being about more than the food itself — it's the whole ritual around it. So instead of a generic hero + menu + footer page, I tried to make it feel like someone's actually telling you about their family restaurant: a hero that promises "Sunday dinner," a three-step story section about the dough (knead, rise, fire), a short six-item menu instead of an exhaustive one, and testimonials that sound like real people instead of five-star review copy.

Little details I'm happy with:

The hero pizza slowly bobs like it just came off the peel, and spins as you scroll past it
Every flame icon on the page (menu, story) flickers off one shared GSAP loop
A custom Tailwind theme with color names pulled straight from the food — marinara, basil, crust, dough, parmesan — instead of gray-500/orange-600 style naming
Sections fade/slide in on scroll using a small reusable Reveal component instead of a full animation library for that part

Stack: Next.js (App Router), React, Tailwind v4, GSAP + ScrollTrigger for the scroll-tied motion, and Motion for the hover/tap micro-interactions on buttons and cards.

Live Demo 🍕

Journey

I started with the copy before touching any styling, which is not how I normally work but it ended up shaping everything else. Once I'd written "we do not talk about 1998" for the dough-rise step, the whole tone of the site kind of fell into place — a little dry, a little affectionate, not trying to sell you anything too hard.

The animation split ended up being GSAP for anything tied to scroll or physical motion (the pizza rotating as you scroll past, the steam drifting, the flame flicker), and Motion for the small interactive stuff — button taps, card hover lifts, the mobile menu opening. Having both in the same project felt like overkill at first, but they're solving different problems and mixing them was less painful than I expected.

The part I spent the most time tweaking was the hero illustration — getting the pizza, basil leaf and tomato SVGs to move independently but not fight each other took a lot of nudging duration and easing values until it stopped looking like clutter and started looking like things settling into place.

Next, I'd like to add a real reservation flow instead of just a phone number, and maybe a dark "late night" theme for the site since half the point of a place like this is showing up after 9pm.

🧠 Is AI Replacing Developers? My Honest Experience with Vibe Coding

Hosein Mahmoudi — Fri, 31 Jul 2026 11:30:25 +0000

🚀 Introduction

“Is AI going to replace developers?”

That’s a question I hear a lot these days…

And honestly, the answer isn’t simple.

Recently, I had an experience that changed the way I think about AI and development — especially something people now call “vibe coding.”

I thought it might be useful to share it with you.

💡 The Idea That Was Collecting Dust

A while ago, my team had an interesting idea.

It had potential, but we didn’t have enough time or budget to actually build it.

So the idea just sat there… unused.

Until one day, we decided to give it a shot using AI tools (Claude + vibe coding approach).

⚡ What is Vibe Coding?

For those who haven’t tried it yet:

👉 Vibe coding = building software mostly by describing what you want, and letting AI generate the code.

Sounds powerful, right?

Well… yes and no.

🧪 What Happened When We Built It

We actually managed to build the project pretty fast.

Faster than we normally would.

But then things started to get… complicated.

🧱 The First Problem: Debugging Nightmare

At some point, the project reached a stage where:

The code worked
But we didn’t fully understand how

And debugging?

Almost impossible without asking AI again.

It felt like:

“Only the AI can fix what the AI created.”

🏗 The Second Problem: No Real Architecture

Our project needed a backend too.

But I’m a frontend developer.

So naturally:

I didn’t fully understand what was happening behind the scenes
The structure wasn’t clearly defined
Dependencies started growing randomly

And eventually:

👉 Complexity on top of complexity.

🔁 The Third Problem: Loss of Control

This was the biggest issue.

With vibe coding:

You don’t always know where the project is going
New dependencies appear mid-way
The codebase becomes harder to reason about

At some point, adding new features becomes risky or even impossible.

🤯 The Reality Check

The project worked.

But the situation was basically this:

“It works… but nobody really knows why.”

And that’s not a good place to be.

✅ So, Is Vibe Coding Useless?

Not at all.

In fact, it’s incredibly powerful — if used correctly.

🎯 When Vibe Coding Actually Makes Sense

Vibe coding is great when:

You want to test an idea quickly
You’re building an MVP
Speed matters more than perfection

⚠️ When It Becomes a Problem

It fails when:

You rely on it without understanding the code
You skip architecture and planning
You treat AI like a black box developer

🧠 What I Learned

Here’s the key takeaway:

👉 AI should accelerate you, not replace your thinking.

To use it properly, you still need to:

Define the architecture
Choose the right technologies
Review and understand the generated code
Stay in control of the project

🔚 Final Thoughts

Vibe coding is not magic.

If you just say:

“Build me an app”

It might work… for a while.

But in the long run?

It won’t scale.

💬 Let’s Talk

Have you tried vibe coding?

Did you have a similar experience — or a completely different one?

I’d love to hear your thoughts 👇

programming #webdev #ai #softwareengineering #frontend #react #nextjs #devlife

🎧 Vibe Coding — Is It the Future of Development or Just Hype?

Hosein Mahmoudi — Tue, 28 Jul 2026 09:10:16 +0000

You sit down to code.

Music on.

Lights low.

Flow state activated.

Hours pass…

and suddenly — you built something real.

That’s vibe coding.

🧠 What is Vibe Coding?

Vibe coding is not about tools.

It’s about state.

A mental zone where:

distractions disappear
thinking becomes fluid
coding feels natural

You’re not forcing logic —

you’re flowing with it.

🎯 Why Developers Love It

Because in that state:

you write cleaner code
you think faster
you enjoy the process

And most importantly:

You ship.

⚠️ But Is It Actually Good?

Short answer:

👉 Yes — but only if you control it.

❌ The Problem with Pure Vibe Coding

If you only rely on vibes:

you may skip architecture
you ignore edge cases
you build messy systems

It feels productive…

but can turn into technical debt.

✅ The Right Way to Use Vibe Coding

The key is balance.

Use vibe coding for:

rapid prototyping
building UI
experimenting with ideas

But combine it with:

structured thinking
refactoring
system design

🚀 Vibe Coding + Discipline = Power

The best developers don’t choose one.

They do both:

Enter flow (build fast)
Step back (analyze & improve)

🛠️ How to Vibe Code Effectively

1. Set the Environment

good music 🎧
clean workspace
no notifications

2. Define a Clear Goal

Bad:

“I’ll just code something”

Good:

“I’ll build the story generator UI”

3. Limit the Session

60–90 minutes deep focus
then break

4. Review After the Flow

This is the most important part.

After coding:

clean your code
rename variables
fix structure

🧑‍💻 Real Example

Building something like:

👉 an AI-powered app

👉 interactive UI

👉 storytelling platform

is perfect for vibe coding.

You can:

quickly test ideas
build features fast
iterate without friction

🔥 When Vibe Coding Works Best

frontend development
creative projects
side projects
MVP building

❄️ When You Should Avoid It

critical backend systems
security-sensitive code
large-scale architecture decisions

🧠 The Truth

Vibe coding is not a replacement for skill.

It’s a multiplier.

💬 Final Thought

Don’t fight the vibe.

But don’t trust it blindly either.

⚡ The Formula

Flow + Discipline = Great Software

🚀 If You’re a Developer

Try this today:

put on your favorite playlist
remove distractions
build something small

You’ll feel the difference.

#programming
#webdev
#productivity
#flowstate
#softwareengineering

📓 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

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

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.

DEV Community: Hosein Mahmoudi

I Create My X Account 🤍

Hosein Mahmoudi (@Hosein_Mah_Dev) / X

How I Added Eye-Catching Animations to My Frontend Projects ✨

🚀 Aceternity UI

💼 Experience Section

🚀 Projects Section

🌀 And Then There's GSAP...

🧠 Do You Need to Build Everything From Scratch?

🎨 My Portfolio

Final Thoughts

🔗 Resources

frontend

🎨 Bringing SVGs to Life with Motion for React: From Static Vectors to Dynamic UI ✨

⚡ The Bottleneck of Raw CSS SVG Animations

🔥 Enter Motion for React (motion/react)

🛠️ Practical Example: Interactive Path Drawing

🤖 Accelerating the Workflow with AI (And Fine-Tuning Manually)

⚠️ The Limits of AI Generation

💡 Performance & Best Practices for SVG Animations

💬 Conclusion & Community Discussion

🍕Nonna’s Table

What I Built

Live Demo 🍕

Journey

🧠 Is AI Replacing Developers? My Honest Experience with Vibe Coding

🚀 Introduction

💡 The Idea That Was Collecting Dust

⚡ What is Vibe Coding?

🧪 What Happened When We Built It

🧱 The First Problem: Debugging Nightmare

🏗 The Second Problem: No Real Architecture

🔁 The Third Problem: Loss of Control

🤯 The Reality Check

✅ So, Is Vibe Coding Useless?

🎯 When Vibe Coding Actually Makes Sense

⚠️ When It Becomes a Problem

🧠 What I Learned

🔚 Final Thoughts

💬 Let’s Talk

programming #webdev #ai #softwareengineering #frontend #react #nextjs #devlife

🎧 Vibe Coding — Is It the Future of Development or Just Hype?

🧠 What is Vibe Coding?

🎯 Why Developers Love It

⚠️ But Is It Actually Good?

❌ The Problem with Pure Vibe Coding

✅ The Right Way to Use Vibe Coding

🚀 Vibe Coding + Discipline = Power

🛠️ How to Vibe Code Effectively

1. Set the Environment

2. Define a Clear Goal

3. Limit the Session

4. Review After the Flow

🧑‍💻 Real Example

🔥 When Vibe Coding Works Best

❄️ When You Should Avoid It

🧠 The Truth

💬 Final Thought

⚡ The Formula

🚀 If You’re a Developer

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

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

🧠 The Real Problem

🚀 The Idea

✨ Introducing: English Notebook

🤖 Generate Stories Based on Your Level

🖼️ Story Generator

📖 Learn by Clicking Words

🖼️ Word Interaction

📚 Smart Vocabulary Notebook

🖼️ Vocabulary Notebook

📊 Track Your Progress (Game Changer)

🖼️ Dashboard

🕘 Nothing Gets Lost (History System)

🖼️ History

🔊 Learn with Audio

🌍 Multi-Language Support

🎯 Why This App Is Different

🧑‍💻 Built With

🔗 Try It Yourself

🔥 Enter Motion for React (`motion/react`)