Forem: Navidreza Abbaszadeh

This Week’s Achievements at FA (FrontAdvanced)

Navidreza Abbaszadeh — Fri, 24 Oct 2025 08:18:11 +0000

Another exciting week for FA (FrontAdvanced), our open-source learning platform built by frontend developers, for frontend developers.

Our small but mighty team of international contributors has been hard at work pushing the boundaries of what a modern, community-driven platform can look like. Here's what we accomplished this week:

Authentication Pages, Designed & Implemented in Next.js

We kicked off the week by crafting clean, user-friendly authentication pages. From smooth sign-in flows to an elegant sign-up experience, our goal was to make onboarding effortless while keeping performance and accessibility in check.

Topics Page, A New Way to Explore

Next, we designed and structured the Topics Page, where learners can browse through the full range of FA courses. It’s intuitive, visually clear, and lays the groundwork for how users will navigate through learning paths in the future.

Topic Detail Page, Going Deeper

Finally, we brought the Topic Detail Page to life. Each topic now has its own dedicated space, a focused, distraction-free environment where learners can dive deep into advanced frontend concepts and techniques.

Each step brings us closer to our vision: a community-powered space where developers can grow, share, and master modern frontend development together.

Huge thanks to our amazing contributors from around the world who make this possible every week.

If you’re a web designer who loves creating beautiful and intuitive UIs, we’d love to have you join us.
Comment FA or reach out, let’s build something awesome together.

Automate Your API Docs Like a Pro with @nestjs/swagger

Navidreza Abbaszadeh — Tue, 14 Oct 2025 17:23:52 +0000

Automate Your API Docs Like a Pro with `@nestjs/swagger`

Ever shipped an API and forgot to write the docs?
You’re not alone. Documentation is often the most painful part of backend development, yet the most essential one.

If you’re using NestJS, you already know how beautifully it structures your backend. But did you know you can generate Swagger documentation automatically with almost zero extra work?

Today, let’s dive into how you can use @nestjs/swagger to turn your NestJS code into interactive API docs, instantly.

Why Swagger?

Swagger (a.k.a. OpenAPI) isn’t just a “fancy UI”, it’s a machine-readable format for describing APIs.
That means tools, teams, and clients can understand your endpoints without reading your source code.

With Swagger you can:

Auto-generate docs with examples
Test your endpoints live in the browser
Share a single URL for both frontend devs and clients
Generate SDKs or clients in other languages (via OpenAPI generators)

Setting Up `@nestjs/swagger`

Let’s jump straight into it.

Install the package:

npm install --save @nestjs/swagger swagger-ui-express

Then open your main.ts (the bootstrap file of your app) and add this snippet:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('Awesome API')
    .setDescription('The API documentation for my awesome NestJS app')
    .setVersion('1.0')
    .addBearerAuth()
    .build();

  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

That’s it.
Now, run your app and head to: http://localhost:3000/api, boom, you’ve got a fully interactive Swagger UI.

Automating Swagger Decorators

Manually writing DTO decorators can get repetitive.
Here’s where @nestjs/swagger really shines, it reads metadata from your TypeScript types and decorators, automatically generating docs.

Example:

import { ApiProperty } from '@nestjs/swagger';

export class CreateUserDto {
  @ApiProperty({ example: 'john@example.com', description: 'User email' })
  email: string;

  @ApiProperty({ example: 'John Doe', description: 'Full name of the user' })
  name: string;
}

Then, in your controller:

import { Controller, Post, Body } from '@nestjs/common';
import { ApiTags, ApiResponse } from '@nestjs/swagger';
import { CreateUserDto } from './create-user.dto';

@ApiTags('users')
@Controller('users')
export class UsersController {
  @Post()
  @ApiResponse({ status: 201, description: 'User created successfully.' })
  createUser(@Body() dto: CreateUserDto) {
    return { message: 'User created!', user: dto };
  }
}

Swagger now automatically understands:

Request body
Tags
Response types
HTTP codes
Auth methods

All from your code.

Pro Tip: Auto-generate Swagger JSON

Want to automate everything, even your CI/CD pipeline?

You can export your OpenAPI JSON file directly:

import { writeFileSync } from 'fs';

const document = SwaggerModule.createDocument(app, config);
writeFileSync('./swagger-spec.json', JSON.stringify(document));

Now your CI can upload swagger-spec.json to tools like:

Postman
Stoplight
SwaggerHub
Redocly

Boom, fully automated documentation that updates whenever your code does.

Bonus: Customizing Swagger UI

You can enhance your Swagger UI experience with extra options:

SwaggerModule.setup('docs', app, document, {
  swaggerOptions: {
    persistAuthorization: true,
    docExpansion: 'none',
  },
  customSiteTitle: 'My Awesome API Docs',
});

This small touch makes your docs feel more professional and branded.

Summary

Step	Action
1	Install `@nestjs/swagger`
2	Configure Swagger in `main.ts`
3	Use decorators in DTOs & Controllers
4	Optionally export `swagger-spec.json`
5	Automate updates via CI/CD

Wrapping Up

Documentation doesn’t have to be painful, with @nestjs/swagger, it’s automated, beautiful, and always up to date with your code.

Start using it today and make your API feel enterprise-ready with minimal effort.

Your turn:
Have you tried automating API docs in your NestJS project?
Drop your favorite Swagger tips in the comments below!

And if you found this post helpful,
follow me on Dev.to for fullstack development guides!

JWT vs OAuth 1.0 vs OAuth 2.0, What’s the Difference and When to Use Each?

Navidreza Abbaszadeh — Tue, 07 Oct 2025 18:12:39 +0000

JWT vs OAuth 1.0 vs OAuth 2.0, What’s the Difference and When to Use Each?

In modern web development, authentication and authorization are critical. Whether you’re building a full-stack app, an API, or a SaaS product, chances are, you’ll deal with tokens, headers, and access flows at some point.

Yet, terms like JWT, OAuth 1.0, and OAuth 2.0 are often thrown around interchangeably, even though they solve different problems in different ways.

Let’s break them down clearly, compare them, and decide when to use which.

1. JWT (JSON Web Token)

JWT stands for JSON Web Token, a compact, URL-safe token format used to securely transmit data between parties.

A JWT looks something like this:

xxxxx.yyyyy.zzzzz

It has three parts:

Header – specifies the algorithm and token type.
Payload – contains the data (claims) like user ID, roles, and expiration.
Signature – ensures the token wasn’t tampered with.

Example payload:

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "exp": 1735765200
}

When a user logs in, the server issues a JWT signed with a secret key. The client stores it (usually in localStorage or cookies) and sends it with every request. The server then verifies it without needing a session store , stateless authentication!

Pros:

Stateless, no server-side session storage.
Portable, easy to use across services or APIs.
Widely supported in modern frameworks.

Cons:

Hard to revoke before expiry (unless using a token blacklist).
If compromised, the attacker can access resources until it expires.

Use JWT when:
You need stateless API authentication, especially for SPAs, mobile apps, or microservices.

2. OAuth 1.0

OAuth 1.0 is an authorization protocol designed to let users grant third-party applications access to their data, without sharing passwords.

Think of how you “Sign in with Twitter” or let an app access your Google Calendar. OAuth makes this possible securely.

In OAuth 1.0, the process is signature-based.
Each request is signed using a consumer secret, token secret, and cryptographic algorithms (like HMAC-SHA1).

This ensures:

Requests can’t be tampered with.
The client never sees your password.
Data exchange is safe, even without HTTPS (though HTTPS is still preferred).

Pros:

Very secure (since every request is signed).
Doesn’t require HTTPS for integrity.

Cons:

Complex to implement.
Harder to debug (due to signature generation).
Superseded by OAuth 2.0 in most modern systems.

Use OAuth 1.0 when:
You’re working with legacy systems or APIs that still support it (like older Twitter APIs).
Otherwise, it’s better to use OAuth 2.0.

3. OAuth 2.0

OAuth 2.0 is the modern, simplified successor to OAuth 1.0, designed to make authorization easier and more flexible.

It allows a user to give third-party apps limited access to their resources on another service (like Google, GitHub, Spotify, etc.), without revealing their credentials.

Instead of signing every request, OAuth 2.0 uses tokens, typically Bearer Tokens (often JWTs).

How It Works

The user logs in with a provider (like Google).
The provider gives the app an access token.
The app uses that token to access resources on behalf of the user.

OAuth 2.0 Flows

Depending on your app type, you can choose from several flows:

Authorization Code Flow (for web apps)
Implicit Flow (for SPAs)
Client Credentials Flow (for machine-to-machine)
Password Flow (legacy, not recommended)

Pros:

Easier to use than OAuth 1.0.
More flexible (works for web, mobile, server apps).
Widely adopted, supported by Google, GitHub, Facebook, etc.

Cons:

Relies on HTTPS for security.
Implementation details differ per provider.
Can get complex when combining with OpenID Connect (for authentication).

Use OAuth 2.0 when:
You need third-party authorization, SSO (Single Sign-On), or secure access delegation, e.g., “Login with Google” or API access for external clients.

Comparison Summary

Feature	JWT	OAuth 1.0	OAuth 2.0
Purpose	Authentication	Authorization	Authorization
Token Type	Self-contained JWT	Signature-based tokens	Bearer or JWT tokens
Security Method	Signed with secret/public key	Signed per request	HTTPS + tokens
Use Case	Stateless user sessions	Legacy APIs	Modern APIs, SSO
Ease of Implementation	Simple	Complex	Moderate
Statefulness	Stateless	Stateful	Can be both
Modern Usage	Very common	Rare	Standard

When to Use Which?

JWT:

For authenticating users in your own API (no third-party app involved). Example: Your frontend logs in users and stores a JWT to call your backend.

OAuth 1.0:

For legacy systems that still rely on it. Example: Older APIs like pre-2020 Twitter integrations.

OAuth 2.0:

For third-party access or SSO scenarios. Example: “Sign in with Google” or letting a third-party app access your API.

Conclusion

In short:

JWT = token format for authentication (who you are).
OAuth = authorization framework (what you can do).
OAuth 2.0 often uses JWTs internally, so they’re not competitors, but complementary technologies.

Understanding these helps you design secure systems that protect users and scale with confidence

What about you?
Have you implemented any of these in your projects? Which one do you find easiest or most confusing? Let’s discuss in the comments

Event Sourcing & CQRS Explained

Navidreza Abbaszadeh — Sun, 21 Sep 2025 17:22:12 +0000

As applications grow, the traditional request/response (req/res) model starts showing cracks.

With two services (A -> B), things are simple: one service calls the other and gets a response.

But as soon as more services (C, D, …) join in, the complexity explodes. Instead of just a couple of connections, you now face a web of dependencies where every service potentially talks to every other service.

This is where event-driven architecture (EDA) patterns like Event Sourcing and CQRS come to the rescue.

What’s an Event?

An event is just a signal that something significant has happened.

Example:

OrderPlaced -> when a customer creates a new order

StockDecreased -> when inventory updates after the order

Main Components of EDA:

Producers: Services that generate events (e.g., OrderService)

Consumers: Services that react to events (e.g., InventoryService)

What is Event Sourcing?

Normally, systems just store the latest state of data.

But with Event Sourcing, instead of saving only the current state, we store all the events that happened to reach that state.

Think of it as a ledger of every change.

Example: Bank Account

AccountOpened (Initial Balance: $0)

DepositMade (Amount: $350)

WithdrawalMade (Amount: $300)

Current State -> Balance: $50

Instead of just storing “Balance = $50,” we store the entire history of events.

Benefits

Audit Trail: Full history of changes is always available.
Rebuild State Anytime: You can replay events to rebuild the current state.

Problem

Replaying every single event from the beginning can be slow and inefficient.

How Do We Solve This?

Hydration & Replay

Hydration: Rebuilding the current state by applying all events in order.

Replay: Reprocessing the entire event stream (or large parts of it) to recompute the current state.

Snapshots (Sourcing Optimization)

Instead of replaying every event since the beginning of time:

Periodically capture the current state as a snapshot (e.g., every 100 events).

To rebuild, load the latest snapshot and apply only the events that happened afterward.

This dramatically improves performance.

Materialized Views

For read-heavy systems, we often maintain pre-computed, query-optimized views of the current state in a separate database.

Think of it like a cached read model.

Producers keep emitting events, and consumers build these views in real-time.

CQRS (Command Query Responsibility Segregation)

Traditional systems use the same model for:

Commands (writes) -> change the system state

Queries (reads) -> retrieve system state

CQRS separates these responsibilities:

Command Side: Handles writes, stores events.

Query Side: Builds materialized views optimized for reads.

This separation makes systems more scalable, maintainable, and flexible.

Putting It All Together

Events capture what happened.

Event Sourcing stores the full history, not just the current state.

Snapshots & Hydration make it efficient to rebuild state.

Materialized Views provide fast access to the current state.

CQRS separates the write model (commands & events) from the read model (queries & views).

I Cloned Jira Task Manager Here's How:

Navidreza Abbaszadeh — Fri, 19 Sep 2025 18:09:52 +0000

Last month the idea of starting a light side-project came up.
While exploring options, a late-night review of tasks in Jira sparked a thought: “Why not clone this?”

That’s when the decision was made,
to build a “Jira Task Manager” clone.

I set up project using Next.js 15 (app router) + Tailwindcss, Typescript.

First I started creating authentication flow:

Technology used: Supabase Auth - ShadCn Auth Block

Then home page, overview of tasks & projects:

Tailwindcss + Prisma (Server side data fetching)

Third, I created members page, so other users can join the workspace:

After that, project list:

Then tasks view in 3 mode, table, board, calendar:

Table view

Board view: @hello-pangea/dnd

& calendar view: react-big-calendar

Hope you guys enjoyed this article!
See you next time!

Learn how I turned my content creation struggles into a powerful AI tool for SaaS founders.

Navidreza Abbaszadeh — Thu, 18 Sep 2025 11:53:49 +0000

HookAI, The Complete AI Hook Builder
Create scroll-stopping hooks for any type of content, on any platform, in any tone.

Whether you’re writing a tweet, LinkedIn post, YouTube title, or Instagram caption, HookAI generates multiple high-converting variations tailored to your niche and audience.

Why HookAI?

Platform-aware: Optimized hooks for Twitter, LinkedIn, TikTok, IG, or blogs.

Tone-flexible: From casual & fun to professional & persuasive.
Save hours: No more staring at a blank screen.
Boost engagement: Hooks that trigger curiosity and clicks.
Stop wasting time on weak intros. Let HookAI build the perfect hook, every time.

Problem

We’ve all been there:

Staring at a blank screen, trying to come up with a catchy opening.
Writing a tweet, YouTube title, or blog post intro… only to realize it’s flat.
Losing engagement because the first line didn’t grab attention.
In 2025, content is crowded. If your hook doesn’t grab, your content gets ignored.

Solution: HookAI

That’s why we built HookAI, a complete AI hook builder for creators, marketers, and businesses.

With HookAI, you can:

Generate multiple hook variations for the same content.
Customize tone: casual, persuasive, storytelling, professional, witty.
Optimize for any platform: Twitter, LinkedIn, TikTok, Instagram, YouTube, blogs.
Save hours of creative struggle and focus on delivering real value.

How It Works

Paste your idea, content, or headline.

Choose platform + tone + count + topic + audience.
Get a set of AI-generated hooks ready to use.
Pick the one you like, or regenerate until it clicks.

Example:

Why It Matters

For creators: Stand out on crowded platforms.

For startups: Craft persuasive landing page intros.

For marketers: A/B test multiple hooks instantly.

Let me know your feedback on this!

When a node crashes, how does it catch up with the cluster? That’s where Raft shines.

Navidreza Abbaszadeh — Wed, 17 Sep 2025 18:10:46 +0000

Understanding Raft: How Nodes Stay in Sync After Crashes

In leader election systems, when one node goes down but the majority remain up, the leader can continue accepting and contributing new data.

Example setup:

node0 (leader) --- node1 (follower) --- node2 (follower) --- node3 (follower)

Now imagine node3 crashes:

node0 (leader) --- node1 (follower) --- node2 (follower) --- node3 (crashed)

We see an error:

err: node3 is down

But that’s fine. As long as a majority of nodes (2 out of 3 followers) are still alive, the cluster continues contributing new data.

Recovery scenario

Let’s assume node3 comes back after five minutes.
During its downtime, three new contributions happened.

So what happens to node3 when it rejoins?

Is it up to date?

Obviously not, it’s missing those 3 contributions.

The question is: how does node3 catch up with the rest of the cluster?

The answer: Raft’s log replication

Each contribution in Raft is stored in a log entry.

i = log index

t = term

Before the crash
i = 1, t = 1 | i = 1, t = 1 | i = 1, t = 1 | i = 1, t = 1
i = 2, t = 1 | i = 2, t = 1 | i = 2, t = 1 | i = 2, t = 1

After 3 new contributions
i = 1, t = 1 | i = 1, t = 1 | i = 1, t = 1 | i = 1, t = 1
i = 2, t = 1 | i = 2, t = 1 | i = 2, t = 1 | i = 2, t = 1
i = 3, t = 1 | i = 3, t = 1 | i = 3, t = 1
i = 4, t = 1 | i = 4, t = 1 | i = 4, t = 1
i = 5, t = 1 | i = 5, t = 1 | i = 5, t = 1

Now the logs are inconsistent. That’s not what we want.

How Raft fixes it

When the leader sends the next log entry (say, i = 6), node3 pushes back:

“Hey! My last index is 2, but you’re sending me index 6. Not acceptable!”

The leader responds:

“Ok, here’s the previous entry (i = 5).”

But node3 complains again:

“Wait… I only have index 2!”

This back-and-forth continues until node3 receives a log entry with a matching previous index (i = 2).

At that point, node3 accepts the next entries (i = 3, 4, 5, 6…) and catches up with the cluster.

That’s Raft in action

This process of syncing logs is how Raft ensures consistency across nodes, even when one crashes and comes back later.

So in short:

Raft uses logs to track contributions.

When a node rejoins, the leader resends missing entries.

The follower rejects mismatched logs until it finds the last known consistent entry.

From there, it accepts new data and gets fully up to date.

Hope you found this insightful!
If so, leave a like and comment your thoughts below.

Here’s how far I’ve come after 7 days of grinding on system design.

Navidreza Abbaszadeh — Tue, 16 Sep 2025 13:46:04 +0000

When you’re young, learning feels like an investment. That’s why I started expanding my knowledge in the world of software engineering and diving into system design!

As a 15 y/o fullstack engineer, I’m trying to get ahead of most web developers by learning patterns and architectures that aren’t even taught in universities. And honestly, it feels really cool.

YouTube is basically a complete online university. You can choose your own teachers and professors!

So, I created a GitHub repo documenting my system design learning journey as a JS fullstack developer, covering everything from learning resources to cool projects.
All in one repo: https://github.com/Navidreza80/System_Design

Here’s what I’ve learned (and built) in just the last week:

Scalability
Latency vs Throughput
High Availability & Fault Tolerance
SQL vs NoSQL
Indexing, Sharding, Replication
Redis
CDNs & Cache Eviction Policies
DNS
L4/L7 Load Balancing
Nginx & Reverse Proxies

Sounds cool, right? But I didn’t just sit around watching videos, I’ve actually:

Designed systems
Implemented caching strategies
Modeled DB schemas
& so much more!

Let’s start learning together.

I’d love to talk technical with you, so let’s connect:

X: @Navidreza008
Discord: @navidreza008

5 Coding Habits That Transformed Me Into a Better Software Engineer

Navidreza Abbaszadeh — Mon, 15 Sep 2025 18:42:55 +0000

Discover the 5 essential coding habits that elevated my engineering skills from junior to senior level. Learn practical techniques for code reviews, testing, documentation, and continuous learning that will accelerate your career growth.

Checkout my latest blog here: https://navidrezaabbaszadeh.netlify.app/blogs/cmflgawj60001jr09zp2bg9qi

My Full-Stack Developer Toolkit After 4+ Years

Navidreza Abbaszadeh — Sun, 14 Sep 2025 05:38:35 +0000

I wrote my first line of code in Notepad++, that simple "Hello World" made me feel like a superhero!
Today, we describe what we want and AI delivers it in minutes. The landscape has changed dramatically, but the core tools that make us productive remain crucial.
After 4+ years of building everything from MVPs to production apps, here's my battle-tested toolkit as of September 2025:

Code Editor VS Code (Yes, not Cursor!)

Lightweight and incredibly productive
Perfect balance of features without bloat
Muscle memory built over years of use
Extensions ecosystem is unmatched

Debug & Dev Tools

Lighthouse: Performance measurement and optimization
Postman: API testing and documentation
Figma: Design collaboration and prototyping
Expo Tools: Mobile app development and testing

Essential Extensions The VS Code extensions that supercharge my workflow:

Auto Close Tag: Saves countless keystrokes
Auto Complete Tag: HTML/JSX completion
Auto Import: TypeScript/JavaScript imports
Code Spell Checker: Catches typos in comments/strings
ES7+ React/Redux/React-Native snippets: Rapid component creation
ESLint: Code quality and consistency
JavaScript (ES6) code snippets: Vanilla JS productivity
Material Icon Theme: Beautiful file icons
Prettier: Consistent code formatting
Prisma: Database schema management syntax check
Tailwind CSS IntelliSense: CSS class autocomplete
vscode-icons: Enhanced file explorer

Frontend Frameworks

Next.js: The best of the best! Full-stack React with everything built-in
Vite: Lightning-fast development experience
Expo: React Native development made simple

Backend Frameworks

Express.js (or Fastify): Node.js APIs with speed and simplicity
Nest.js: Enterprise-grade Node.js applications

DBs

Supabase: Postgres with real-time features and auth
Neon: Serverless Postgres (my most used!)
MongoDB: Document database for flexible schemas

Cloud & DevOps

Docker: Containerization and consistent environments
Cloudflare: CDN, DNS, and edge computing

AI & "Vibe Coding" The AI tools that have transformed my development process:

Claude Sonnet 4: Scaling applications like a pro, complex architecture decisions
ChatGPT-4: Creating MVPs and rapid prototyping
DeepSeek: Enhancing app UX/UI with design insights
Grok: Exploring new technologies and handling heavy computational tasks

Why This Stack Works Productivity First: Every tool is chosen for maximum efficiency

Modern but Stable: Cutting-edge features with production reliability

AI-Enhanced: Leveraging AI without becoming dependent on it

Full-Stack Ready: Seamless frontend-to-backend development flow

The Evolution From Notepad++ to AI-assisted development, the journey has been incredible! What hasn't changed is the importance of:

Solid fundamentals over trendy tools
Performance over flashy features
Developer experience that actually improves productivity
Reliable tools that work when you need them

What's Your Toolkit? I'm always curious about what other developers are using! Drop a comment with:

Your favorite code editor and why
Must-have VS Code extensions
AI tools that have changed your workflow
Any hidden gems I should try

Let's learn from each other!

What tools have transformed your development workflow in 2025? Share your setup below!

Why I'm Starting to Share My Developer Journey

Navidreza Abbaszadeh — Sat, 13 Sep 2025 17:59:21 +0000

Why I'm Starting to Share My Developer Journey
Four and a half years ago, I wrote my first line of HTML code. Today, I'm managing full-stack applications with complex API integrations, building real-time dashboards, and creating platforms that thousands of users interact with daily. Yet until now, I've kept most of my journey to myself.

That changes today.
The Silent Developer
Like many developers, I've been what I call a "silent contributor." I've built, I've solved problems, I've shipped features, but I've rarely shared the how, the why, or the lessons learned along the way. I convinced myself that my code was my voice, and that should be enough.
But here's what I've realized: knowledge shared is knowledge multiplied.
What +4.5 Years Taught Me
My journey has taken me through:

Building high-performance SPAs with Next.js that improved user engagements
Implementing trilingual React applications with seamless i18n integration
Creating real estate platforms with 3D visualizations and live mapping
Setting up CI/CD pipelines that boosted team velocity
Integrating AI-powered features and real-time data processing

Each project taught me something new. Each challenge revealed a better way to approach problems. Each success came with lessons that could help other developers avoid the pitfalls I encountered.

Why Share Now?

To Give Back to the Community
The React, Next.js, and broader JavaScript communities have given me everything. From Stack Overflow answers that saved my projects, to open-source libraries that powered my applications. It's time to contribute back.
To Connect with Fellow Developers
Development can be isolating. By sharing my experiences, I hope to connect with other developers facing similar challenges, celebrating similar wins, and building amazing things.
To Document My Growth
There's something powerful about publicly committing to learning and sharing. This journey will push me to stay current with new technologies and to articulate my thoughts clearly.
To Help Others Skip My Mistakes
I've made plenty of mistakes along the way. Poor architectural decisions, premature optimizations, choosing the wrong state management approach. If my stories can help one developer avoid these pitfalls, this effort is worthwhile.

What You Can Expect?

Going forward, I'll be sharing:

Technical Deep Dives: Real-world solutions to problems I've encountered with React, Next.js, TypeScript, and full-stack development.

Project Breakdowns: Behind-the-scenes looks at how I built applications, the decisions I made, and what I learned.

Performance Insights: Practical tips for optimizing React applications, API integrations, and user experience.

Career Lessons: Insights from working remotely, collaborating in Agile teams, and growing from junior to senior developer.

Tool Reviews: Honest assessments of libraries, frameworks, and development tools that have shaped my workflow.

The Platforms I'll Be On
You'll find me sharing across multiple platforms, each with its own flavor:

Dev.to & Personal Blog: Detailed technical articles and tutorials
Twitter/X: Quick insights, tips, and community engagement
Stack Overflow: Helping solve real problems developers face
YouTube: Video tutorials and coding sessions (coming soon!)
Indie Hackers: Discussing the business side of development

A Personal Note
Starting this journey feels vulnerable. Putting yourself out there as a developer means opening yourself up to scrutiny, to questions you might not have answers to, to the possibility of being wrong publicly.
But that vulnerability is also where growth happens. The best developers I know aren't those who never make mistakes, they're those who learn from them openly and help others do the same.

Join Me

Whether you're just starting your development journey, you're a seasoned pro, or you're somewhere in between, I'd love to have you along for this ride. Share your own experiences, ask questions, challenge my approaches, and let's learn from each other.

The developer community is at its best when we're lifting each other up, sharing knowledge, and building amazing things together.
Here's to the journey ahead.

What's one lesson you wish you'd learned earlier in your developer journey? I'd love to hear from you in the comments below.
Connect with me:

Twitter: @Navidreza008
GitHub: https://github.com/Navidreza80
Portfolio: https://navidrezaabbaszadeh.netlify.app

ReactJS #NextJS #FullStackDev #DeveloperJourney #WebDevelopment #JavaScript #Programming

My System Design Learning Journey!

Navidreza Abbaszadeh — Wed, 10 Sep 2025 09:12:06 +0000

What’s up everyone!

I’ve just started my System Design learning journey and I’d love to share it with you so we can learn and grow together.

I’ve created a repo to document everything:
System Design Repo

Here’s what you’ll find inside:

Roadmap, a clear path from beginner to advanced.
What to Learn + Resources, curated articles, docs, and YouTube videos.
Projects, practical system design implementations with links and images.
Weekly & Daily Plans, how I’m structuring my learning.

If you’re also diving into system design or want to sharpen your skills, feel free to check it out, drop feedback, or even learn alongside me!

Forem: Navidreza Abbaszadeh

This Week’s Achievements at FA (FrontAdvanced)

Automate Your API Docs Like a Pro with @nestjs/swagger

Automate Your API Docs Like a Pro with @nestjs/swagger

Why Swagger?

Setting Up @nestjs/swagger

Automating Swagger Decorators

Pro Tip: Auto-generate Swagger JSON

Bonus: Customizing Swagger UI

Summary

Wrapping Up

JWT vs OAuth 1.0 vs OAuth 2.0, What’s the Difference and When to Use Each?

1. JWT (JSON Web Token)

2. OAuth 1.0

3. OAuth 2.0

How It Works

OAuth 2.0 Flows

Comparison Summary

When to Use Which?

Conclusion

Event Sourcing & CQRS Explained

I Cloned Jira Task Manager Here's How:

Learn how I turned my content creation struggles into a powerful AI tool for SaaS founders.

When a node crashes, how does it catch up with the cluster? That’s where Raft shines.

Here’s how far I’ve come after 7 days of grinding on system design.

5 Coding Habits That Transformed Me Into a Better Software Engineer

My Full-Stack Developer Toolkit After 4+ Years

Why I'm Starting to Share My Developer Journey

ReactJS #NextJS #FullStackDev #DeveloperJourney #WebDevelopment #JavaScript #Programming

My System Design Learning Journey!

Automate Your API Docs Like a Pro with `@nestjs/swagger`

Setting Up `@nestjs/swagger`