DEV Community: Mohamed Ibrahim

Why Your App Might Be Costing More Than You Think

Mohamed Ibrahim — Tue, 26 May 2026 23:33:47 +0000

Understanding Edge Requests, Bandwidth, CDN, Fast Origin Transfer, and Why Your Next.js App Might Be Costing More Than You Think

A deep but beginner-friendly guide to how modern web infrastructure actually works — especially on platforms like Vercel.

Introduction

When I first started deploying apps, I thought hosting was simple:

Upload website
Users open it
Done

But after deploying real-world apps — especially with Next.js on platforms like Vercel — I started seeing terms like:

Edge Requests
Bandwidth
Fast Origin Transfer
CDN
Serverless Computing
Edge Functions
Cache Hits & Misses

At first, all of this felt confusing.

Why is a simple website making thousands of requests?
Why does bandwidth suddenly spike?
Why can a Next.js app become expensive faster than expected?
Why does enabling Cloudflare sometimes reduce costs dramatically?

This article is the guide I wish I had earlier.

We’ll go deep — but explain everything in simple language.

The Internet Is Basically Moving Files Around

At its core, the web is simpler than it looks.

Every time someone visits your site:

Their browser sends requests
Your server responds with files
The browser renders the page

Those files might include:

HTML
CSS
JavaScript
Images
Fonts
API responses
Videos

The internet is basically:

“Requests going in, data coming out.”

Everything else is optimization.

What Is a Request?

A request is simply:

“Hey server, give me this thing.”

Example:

Your homepage might need:

index.html
main.js
styles.css
logo.png
10 product images
API data

That single page visit could easily generate:

20–100 requests

Not 1.

This surprises many beginners.

What Are Edge Requests?

Edge Requests are requests handled by servers close to the user.

Instead of every user connecting directly to your main server, platforms use global infrastructure.

Imagine:

User in Egypt
Your server is in the US

Without edge infrastructure:

Egypt → US → Egypt

That’s slower.

With edge infrastructure:

Egypt → Nearby Edge Server

Much faster.

What Does “Edge” Actually Mean?

“Edge” means:

Servers distributed around the world near users.

Companies like:

have data centers globally.

These edge servers can:

Cache files
Run code
Return responses
Block attacks
Compress assets

This reduces latency massively.

What Is a CDN?

CDN = Content Delivery Network.

A CDN is basically:

A network of edge servers that cache and deliver content faster.

Instead of downloading your image from one server in one country:

The CDN stores copies worldwide.

So users download from the nearest location.

Simple CDN Example

Without CDN:

User → Main Server → Response

With CDN:

User → Nearby CDN Server → Response

Huge difference.

Especially for:

Images
Videos
CSS
JavaScript
Fonts

Why CDNs Matter So Much

CDNs improve:

1. Speed

Closer servers = lower latency.

2. Lower Server Load

Your origin server gets fewer requests.

3. Lower Bandwidth Usage

Cached content avoids repeated transfers from origin.

4. Better Scalability

Millions of users become manageable.

5. DDoS Protection

Many CDNs block malicious traffic automatically.

What Is Bandwidth?

Bandwidth is the amount of data transferred.

Example:

Image = 2MB
1000 users download it

Bandwidth used:

2MB × 1000 = 2000MB

That’s about 2GB.

Bandwidth is usually one of the biggest hosting costs.

Especially for:

Images
Videos
AI apps
File downloads
Large APIs

Why Images Destroy Bandwidth

Developers massively underestimate image costs.

Example:

Homepage:
- 20 images
- Each image = 500KB

That’s:

10MB per visit

10,000 visits:

100GB bandwidth

From images alone.

What Is Fast Origin Transfer?

This term is common on Vercel.

To understand it, we first need to understand “Origin.”

What Is the Origin Server?

The Origin is:

The main source server where the original content exists.

Example:

User → CDN → Origin Server

If the CDN already has cached content:

CDN → User

No origin needed.

But if the CDN misses:

CDN → Origin → CDN → User

That transfer from origin is important.

Fast Origin Transfer Explained Simply

Fast Origin Transfer is basically:

Data transferred from your origin infrastructure to edge locations quickly.

This often happens when:

Cache misses occur
Dynamic content is generated
Server-side rendering runs
Functions execute
Data isn’t cached

If your cache strategy is poor:

Your origin gets hammered.

Costs rise fast.

Cache Hits vs Cache Misses

This is one of the most important concepts in web performance.

Cache Hit

The CDN already has the file.

User → CDN → Done

Fast and cheap.

Cache Miss

The CDN doesn’t have the file.

User → CDN → Origin Server

Slower and more expensive.

Why Next.js Can Increase Costs

This is where things get interesting.

Next.js is extremely powerful.

But many features trade simplicity for infrastructure complexity.

Static vs Dynamic Pages

Static Page

Generated once.

Same for everyone.

Cheap.

Example:

Blog article
Landing page
Documentation

Perfect for CDN caching.

Dynamic Page

Generated per request.

Example:

Dashboard
Personalized feed
Authenticated pages

These often require:

Serverless functions
Database calls
Edge compute
Origin traffic

Much more expensive.

Why Server Components Can Cause More Work

Modern Next.js apps often:

Fetch data server-side
Stream UI
Revalidate content
Use middleware
Run authentication checks

This creates more compute operations.

Even if the app looks simple.

What Is Compute?

Compute means:

Server resources used to execute code.

This includes:

CPU usage
Memory usage
Function execution time

When code runs:

You consume compute.

Static File vs Compute

Serving a static image:

Very cheap

Running server code:

More expensive

Running AI inference:

Very expensive

Serverless Functions Explained

Platforms like Vercel heavily use serverless architecture.

Instead of:

One always-running server

You get:

Functions that run only when needed

Advantages:

Auto scaling
Easier deployments
Pay-per-use

Disadvantages:

Cold starts
Higher costs at scale
Complex billing metrics

Why Middleware Can Accidentally Explode Edge Requests

This is a huge issue in many Next.js apps.

If middleware runs on every request:

Every image
Every page
Every asset
Every API request

Then edge requests skyrocket.

Developers often don’t realize this.

Example of a Bad Middleware Setup

Imagine middleware checking auth for:

/
/dashboard
/logo.png
/fonts/inter.woff
/favicon.ico

Now every asset triggers compute.

That’s expensive.

Why Authentication Increases Costs

Auth systems often require:

Cookie parsing
Token validation
Session fetching
Database reads

Doing this globally at the edge:

Millions of compute executions

even on small projects.

Why Cloudflare Can Reduce Costs Dramatically

Many developers place Cloudflare in front of Vercel.

Why?

Because Cloudflare can:

Cache aggressively
Block bots
Reduce origin hits
Compress assets
Filter traffic before Vercel sees it

This reduces:

Edge Requests
Bandwidth
Origin Transfer
Compute usage

But There’s a Tradeoff

Using Cloudflare in front of Vercel can sometimes:

Break automatic optimizations
Affect analytics accuracy
Interfere with bot protection
Cause caching confusion

So it must be configured carefully.

Why Bots Increase Costs

A shocking amount of internet traffic is bots.

Bots can:

Crawl pages
Spam APIs
Scrape content
Hammer dynamic routes

Even if you have few real users.

Without protection:

Costs rise quickly.

Why Caching Is Everything

Modern web performance is basically:

“How much can we avoid recomputing?”

Good caching means:

Fewer requests
Lower compute
Lower bandwidth
Faster pages
Lower bills

The Ideal Architecture

The cheapest scalable architecture usually looks like:

CDN Cache First
↓
Static Assets
↓
Minimal Dynamic Logic
↓
Efficient APIs
↓
Database Only When Necessary

Why Static Sites Scale So Well

A static site can handle massive traffic cheaply because:

Files are prebuilt
CDN serves everything
Minimal compute needed

This is why documentation sites are so cheap.

Why AI Apps Become Expensive Fast

AI apps combine:

Heavy compute
Large bandwidth
Long requests
Streaming responses
GPUs

Costs rise dramatically compared to normal apps.

How to Reduce Vercel Costs

1. Cache Aggressively

Use:

Static rendering
ISR
CDN caching

whenever possible.

2. Avoid Unnecessary Middleware

Scope middleware carefully.

Never run it globally unless necessary.

3. Optimize Images

Use:

Compression
WebP
AVIF
Lazy loading

Images are bandwidth killers.

4. Avoid Dynamic Rendering Everywhere

Not every page needs SSR.

Static pages are cheaper and faster.

5. Use Cloudflare Carefully

Cloudflare can massively reduce costs if configured properly.

Especially for:

Bots
Static assets
Caching
DDoS protection

6. Monitor Analytics Constantly

Most developers only discover problems after huge bills.

Watch:

Edge Requests
Function Invocations
Cache Hit Ratio
Bandwidth
Bot Traffic

The Biggest Beginner Mistake

Many developers optimize for:

Developer Experience

instead of:

Infrastructure Efficiency

Modern frameworks make powerful features incredibly easy.

But “easy” doesn’t mean “cheap.”

Final Thoughts

Modern web infrastructure is fascinating because almost everything comes down to:

Moving data
Avoiding unnecessary work
Caching intelligently
Running compute efficiently

Once you understand:

CDN
Edge
Compute
Caching
Origin Transfer
Serverless infrastructure

you start seeing the internet differently.

You realize:

Performance and cost are deeply connected.

And sometimes the fastest app is simply:

The app doing the least work possible.

I Got Tired of Heavy Design Tools😩… So I Built My Own

Mohamed Ibrahim — Sun, 24 May 2026 06:00:00 +0000

Like the title says, I got tired of heavy design tools… so I built my own.

I wanted something simple, fast, and focused — no complicated setup, no unnecessary features, and absolutely NO TIME WASTED.

Every time I wanted to create a quick transparent PNG, logo mockup, or simple social media graphic, I ended up wasting time.

Open a design tool.
Create an account.
Verify email.
Wait for assets to load.
Deal with unnecessary features.
Get annoying emails every week trying to sell you premium features.

UGHHHH 😩😩😩

Sometimes I just wanted to open a website and start designing instantly.

So I built something for myself.

And that project became Editsify.

What is Editsify?

Editsify is a lightweight browser-based design tool focused on simplicity and speed.

The goal was simple:

Open the website
Start designing immediately
Export transparent PNG images easily
No sign-up
No complicated dashboard
No unnecessary features

Everything runs directly in your browser.

Why I Built It

Most design tools today are powerful — but sometimes too powerful.

If you're trying to quickly:

Create a transparent PNG
Make a simple thumbnail element
Design a logo concept
Create social media assets
Share a quick design with someone

...you probably don't need a massive editor with hundreds of menus.

I wanted something minimal, fast, and distraction-free.

The Feature I Personally Love Most

One thing I really wanted was easy design sharing.

With Editsify, you can share your design with another person instantly so they can preview it or continue working on it.

And the interesting part?

You still don't need an account.

No login system.

No forced registration.

No complicated setup.

Just create and share.

Everything is Stored Locally

Another thing I care about a lot is privacy and speed.

Your design data is stored directly inside your browser instead of being uploaded somewhere automatically.

That means:

Faster experience
Less waiting
More privacy
Simpler workflow

Who is This Tool For?

I think Editsify is useful for:

Content creators
YouTubers
Designers who need quick assets
Developers making UI elements
People who just want transparent PNG images fast

Especially if you hate wasting time before starting actual work.

Still Improving It

The project is still growing, and I’m continuously improving the editor and adding new features.

I mainly built it because I personally needed something simpler than traditional design tools.

But now other people are starting to use it too, which is honestly exciting to see.

I’ve also been thinking about making parts of Editsify open source in the future so developers can contribute and build cool things around it.

If the project gets enough support and community interest, I’d genuinely love to make that happen.

Try It

If you want to test it yourself:

Editsify

I’d genuinely love to hear feedback, ideas, or feature suggestions.

How I Built a Multi-Language Code Playground with Next.js 🚀

Mohamed Ibrahim — Thu, 29 Jan 2026 06:00:00 +0000

We've all seen them: sites like CodePen or LeetCode where you can write code and see the output instantly. As a developer, I wondered: "How hard is it to build one from scratch?"

It turns out, integrating an editor is easy, but making it actually run code (especially languages like Java or C++) is where the real fun begins.

Today, I’m sharing how I built Next.js Monaco Editor, a platform that doesn't just edit code—it breathes life into it.

🛠 The Stack

Framework: Next.js (App Router)
Editor: @monaco-editor/react (The engine behind VS Code)
Styling: Tailwind CSS
Code Execution: Local (for JS) + Piston API (for Java, C#, C++)

🛑 The Problem: "Where does the code run?"

When I started, I faced a dilemma:

Running locally (eval): Great for JavaScript, but what about Java or C++? You can't run those in a standard browser environment.
Building a backend: Setting up Docker containers to safely execute untrusted code is a nightmare for a frontend-focused project.

✅ The Solution: A Hybrid Approach

I decided to split the execution logic to get the best of both worlds:

1. The Local Speed (JavaScript & HTML)

For JavaScript, I used a clean new Function() approach to capture console logs without re-rendering the whole app. For HTML, I implemented a Live Preview using an iframe with strict sandbox attributes to keep the main site secure.

2. The Remote Power (Java, C#, C++)

To support compiled languages, I integrated the Piston API. It’s a high-performance code execution engine that allowed me to send code snippets and receive execution results instantly, without managing a single server.

🏗 Clean Code vs. Spagetti

As the features grew, the page.tsx became a mess. One of my favorite parts of this project was the Refactoring Phase.

I decoupled the project into logical modules:

lib/api.ts: Pure logic for Piston communication.
lib/funcs.ts: Dedicated logic for JS execution.
lib/constants.ts: A single source of truth for language versions and starter templates.

This made the codebase so clean that adding a new language like Python or Go now takes literally 30 seconds.

🔒 Security First

One big question was: "Can users hack my site?"
Since it's a frontend-only app, the risk is minimal, but I still implemented:

Iframe Sandboxing: sandbox="allow-scripts" prevents executed HTML from stealing cookies or accessing local storage.
Client-Side Execution: Everything runs either in the user's browser or an isolated remote container.

🌟 Takeaways

Building this project taught me that you don't always need a complex backend to create powerful tools. By leveraging great APIs and robust libraries like Monaco, you can build pro-grade developer tools right in the browser.

🔗 Check out the Project!

I've open-sourced the entire codebase. If you find this helpful or want to use it as a template for your next project, please give it a star on GitHub! ⭐

👉 GitHub Repository: next-monaco-editor

What should I add next? Python support? A dark mode toggle? Let me know in the comments!

Best game engine to start with in 2026?

Mohamed Ibrahim — Sun, 25 Jan 2026 21:10:57 +0000

I’m getting into game development (mainly mobile & indie games) and I’m trying to choose a game engine.

Between engines like Godot, Unity, Unreal, LibGDX, etc:

Which one would you recommend today?

And why?

I’m mostly interested in 2D / 2.5D, good performance, and a smooth learning curve.

Thanks! 🙏

🚀 I Built a Clean & Modern Next.js E-commerce Template — And You Can Use It or Contribute!

Mohamed Ibrahim — Sat, 07 Jun 2025 18:22:34 +0000

The Problem

Building a clean, scalable, and modern e-commerce frontend with Next.js App Router is not always straightforward.

You often find:

Messy component structures
Poor responsiveness
Overcomplicated state management
Lack of form validation
And worst of all: bad DX (Developer Experience)

So I decided to fix that by creating a clean, modern e-commerce template using Next.js 15, Tailwind CSS, and shadcn/ui.

💡 The Idea

I wanted something that:

Is easy to extend (e.g. for your own store or client work)
Has a clean codebase that respects file structure
Solves common UI problems (cart, filtering, responsive design)
Uses up-to-date Next.js features (App Router, Server Components, etc.)
Just works out of the box

🔧 What I Built

✅ A production-ready, minimal, modern E-commerce frontend with all the essentials.

🛒 Features include:

Clean homepage with CTA and categories
Fully responsive layout
Product catalog and detail pages
LocalStorage-powered cart (via React Context)
Advanced filtering (category, price)
Full-text search
Multi-step checkout (in progress)
Component-based structure
TypeScript and strict types
Form validation using React Hook Form + Zod
Deployed on Vercel

📸 Screenshots

Here's a sneak peek 👇

👨‍💻 Technologies Used

Next.js 15 with App Router
Tailwind CSS
shadcn/ui for reusable UI
Lucide icons
React Context for cart state
TypeScript
React Hook Form + Zod

💬 Why This Might Help You

If you’re:

A frontend developer tired of setting up from scratch every time
A freelancer looking for a starter template
A team looking to build MVPs faster
Or just curious how to structure a modern Next.js 15 project

This repo might save you hours.

🌟 Star it, Fork it, Use it, Improve it!

Here’s the repo:
👉 https://github.com/Mo-Ibra/nextjs-clean-ecommerce

If you find it helpful — please give it a star ⭐

If you want to contribute — PRs are welcome! 🙌

If you have feedback — drop it in the Issues section.

✅ What’s Next?

Planned features:

Checkout flow (in progress)
Wishlist support
Auth system (maybe NextAuth)
Stripe integration
Admin dashboard
Product reviews
Dark mode
Multi-language support

🙌 Let’s Build It Together

I built the foundation — now I’d love your help in making it better.

If you're into clean code, DX, and e-commerce — feel free to jump in.

Built with ❤️ by @Mo-Ibra

Let’s connect on GitHub or in the comments!

Top AI-Powered Chrome Extensions for Web Developers 🚀

Mohamed Ibrahim — Sun, 20 Apr 2025 07:00:00 +0000

Boost your coding speed, productivity, and creativity with these smart browser tools.

AI is no longer just a buzzword — it’s here, and it’s helping developers code faster, debug smarter, and even write documentation. These AI-powered Chrome extensions can supercharge your web development workflow with minimal effort.

🚀 1. GitHub Copilot

What it does: Suggests code and entire functions as you type.

AI Power: OpenAI Codex

Best For: Auto-completing functions, writing boilerplate, learning new code patterns

🔗 Link

🔍 2. WebChatGPT

What it does: Adds real-time web results to your ChatGPT responses.

AI Power: Enhances ChatGPT with live web access

Best For: Researching frameworks, libraries, and up-to-date docs

🔗 Link

✍️ 3. Monica

What it does: Offers AI chat support and can summarize, explain, or translate selected text.

AI Power: ChatGPT integration

Best For: Understanding documentation, rewriting content, email drafting

🔗 Link

💬 4. AIPRM for ChatGPT

What it does: Adds curated prompt templates for developers, SEOs, and marketers.

AI Power: Custom ChatGPT prompts

Best For: Speeding up repetitive requests, inspiration for code fixes

🔗 Link

💡 5. Blackbox

What it does: Lets you copy code from videos or any website using AI.

AI Power: OCR + ML-based code detection

Best For: Extracting code from tutorials and YouTube

🔗 Link

📋 6. CodeWhisperer (AWS)

What it does: Auto-suggests code based on comments and your current line.

AI Power: AWS-trained LLM

Best For: Backend developers using AWS tools

🔗 Link

🧠 7. Wiseone

What it does: Explains difficult terms, suggests deeper reading, and simplifies complex pages.

AI Power: GPT-based

Best For: Learning new concepts while browsing

🔗 Link

🖥️ 8. Octocom

What it does: Integrates ChatGPT directly into GitHub.

AI Power: GPT

Best For: Understanding pull requests, writing better commit messages

🔗 Link

🧩 9. ChatGPT for Google

What it does: Adds ChatGPT responses alongside Google search results.

AI Power: GPT

Best For: Comparing code search results with AI suggestions

🔗 Link

📚 10. Merlin

What it does: Lets you use ChatGPT anywhere on the web (Google, Gmail, docs).

AI Power: ChatGPT

Best For: Web-wide AI assistant for dev tasks and explanations

🔗 Link

🔚 Final Thoughts

With AI tools now available at your fingertips in the browser, there's no excuse to work harder instead of smarter. Try a few of these extensions and watch your productivity skyrocket.

🚀 Let’s Connect and Build Together!

Thanks for making it to the end! I’m passionate about web development, open source, and building tools that make life easier for developers.

💻 Check out my projects on GitHub
🐦 Follow me on Twitter/X for tips, threads, and dev insights
🌐 Visit my Portfolio to learn more about what I do

Whether you're looking to collaborate, hire, or just chat about code, my DMs are always open. 🙌

🚀 50 Must-Try Websites for Web Developers

Mohamed Ibrahim — Mon, 24 Mar 2025 04:26:04 +0000

Web development is constantly evolving, and staying updated with the best tools and resources is essential. Whether you’re looking for learning platforms, design inspiration, or debugging tools, this list of 50 must-try websites will help you enhance your development workflow.

🎯 Learning & Documentation

MDN Web Docs – The ultimate resource for HTML, CSS, and JavaScript documentation.
W3Schools – Beginner-friendly tutorials with interactive coding exercises.
FreeCodeCamp – A free platform offering full web development courses.
DevDocs – Fast and offline-accessible API documentation for various technologies.
Smashing Magazine – Articles and tutorials on web design and development.
CSS-Tricks – The best resource for mastering CSS techniques.
Web.dev – Google’s resource for best web performance, accessibility, and PWA techniques.
Frontend Mentor – Real-world coding challenges to improve front-end skills.
The Odin Project – A full-stack curriculum to become a self-taught developer.
JavaScript.info – A deep-dive guide to JavaScript fundamentals and advanced concepts.

🎨 Design & UI/UX Inspiration

Awwwards – Showcases beautifully designed websites for inspiration.
Dribbble – A platform where designers share UI/UX concepts.
Behance – A community showcasing web and graphic design work.
Lapa Ninja – A collection of stunning landing page designs.
Mobbin – Mobile app design inspiration from top apps.

🔥 Front-End Development Tools

CodePen – An online sandbox for front-end experimentation.
JSFiddle – A playground for testing JavaScript, HTML, and CSS snippets.
Shadcn UI – A component library built for modern UI development.
Aceternity UI – Animated UI components for web projects.
Uiverse – Open-source UI elements for quick prototyping.

🚀 Performance & Optimization

PageSpeed Insights – Google’s tool for analyzing and improving web performance.
Lighthouse – Audits your site’s speed, accessibility, and SEO.
GTmetrix – Provides detailed web performance analysis.
TinyPNG – Compresses PNG and JPG images without losing quality.
Squoosh – A powerful image optimization tool from Google.

🛠 Back-End & API Development

Postman – The best tool for testing and building APIs.
RapidAPI – A hub for discovering and connecting to APIs.
MockAPI – Easily generate fake APIs for development and testing.
JSONPlaceholder – A free online REST API for testing.
ReqRes – Another free API for simulating REST responses.

🔍 Debugging & Testing Tools

Regex101 – A regex tester and debugger.
Can I Use – Check browser support for HTML, CSS, and JavaScript features.
Google DevTools – A built-in tool for debugging web applications.
Responsively App – A browser for testing responsive web designs.
Wave – An accessibility testing tool for websites.

📦 Icons, Fonts, and UI Components

Google Fonts – A vast collection of free fonts for web development.
Font Awesome – A massive library of icons for web projects.
Heroicons – Beautiful SVG icons for your UI components.
Lordicon – Animated icons to enhance UX.
Flaticon – Thousands of free and premium icons.

🧑‍💻 Code Collaboration & Productivity

GitHub – The most popular platform for version control and collaboration.
GitLab – A DevOps platform with integrated CI/CD.
Bitbucket – Another Git-based repository hosting service.
CodeSandbox – Online collaborative IDE for front-end projects.
Replit – A cloud-based IDE supporting multiple programming languages.

📱 Prototyping & Wireframing

Figma – A powerful tool for designing and prototyping UI.
Adobe XD – A great alternative for wireframing and prototyping.
Balsamiq – A simple wireframing tool for mockups.
Penpot – A free and open-source design and prototyping tool.
Whimsical – A visual workspace for wireframing and brainstorming.

🚀 Conclusion

These 50 websites cover everything from learning resources and front-end tools to debugging utilities and collaboration platforms. Whether you're just starting or you're an experienced developer, these tools will help you work smarter and more efficiently.

🔥 Follow Me

Thank you for reading my blog. 🚀 You can follow me on GitHub and connect on Twitter

15 Side Projects That Will Make You a Better Developer 🚀

Mohamed Ibrahim — Tue, 18 Mar 2025 19:01:53 +0000

Side projects are one of the best ways to level up your skills, build a portfolio, and explore new technologies. Whether you're a frontend, backend, or full-stack developer, these project ideas will challenge you and help you grow. Each project includes a skill breakdown, why it’s valuable, and ways to expand on it.

🚀 Beginner-Friendly Projects

1️⃣ To-Do List App

Skills: JavaScript, React, Local Storage
Why? Learn state management, CRUD operations, and UI interactions.
How to Build: Create a simple to-do list where users can add, edit, and delete tasks. Use local storage to persist data.
Upgrade it: Add authentication, real-time sync with Firebase, or a calendar feature.

2️⃣ Weather App

Skills: API calls, Async/Await, UI Design
Why? Get hands-on experience with API integration and error handling.
How to Build: Use OpenWeatherMap API to fetch weather data based on user input. Display temperature, humidity, and forecast.
Upgrade it: Use Next.js for SSR, add a map for location-based results, or implement AI for personalized weather insights.

3️⃣ Markdown Editor

Skills: React, Hooks, Local Storage
Why? Work with text inputs, parsing, and real-time preview.
How to Build: Create a simple text editor that converts Markdown syntax into formatted output.
Upgrade it: Add file exports (PDF/HTML), cloud storage, or AI-powered text formatting.

4️⃣ URL Shortener

Skills: Express.js, Database (MySQL, PostgreSQL, or MongoDB)
Why? Learn backend, database operations, and API development.
How to Build: Create an Express.js backend that takes a long URL and returns a short one, storing mappings in a database.
Upgrade it: Track analytics, add authentication, or generate QR codes for shortened URLs.

5️⃣ Image Gallery with Search

Skills: React, Unsplash API, Tailwind CSS
Why? Work with API calls, filtering, and UI layouts.
How to Build: Fetch images from Unsplash API and display them in a grid with a search bar.
Upgrade it: Add infinite scrolling, user uploads, or categories.

🔥 Intermediate-Level Projects

6️⃣ Notes App with Rich Text Editor

Skills: React, Draft.js/Quill.js, Local Storage
Why? Learn text formatting, state management, and component design.
How to Build: Create a note-taking app that supports rich text formatting.
Upgrade it: Sync notes across devices, add voice-to-text, or AI summarization.

7️⃣ Expense Tracker

Skills: React, Redux, Firebase
Why? Work with state management, database storage, and charts.
How to Build: Users can log their expenses and view reports.
Upgrade it: Add multi-user support, currency conversion, or AI-based budget tips.

8️⃣ AI-Powered Chatbot

Skills: OpenAI API, React, Node.js
Why? Understand API calls, AI models, and chatbot logic.
How to Build: Implement an OpenAI-powered chatbot using React and Express.js.
Upgrade it: Integrate with WhatsApp, Discord, or Slack.

9️⃣ E-Commerce Product Page

Skills: React, Tailwind CSS, Payment Integration
Why? Learn UI design, state management, and API integration.
How to Build: Design a product display page with a shopping cart.
Upgrade it: Add full checkout flow using Stripe or PayPal.

🔟 Real-Time Chat App

Skills: WebSockets, Firebase, React, Express.js
Why? Learn real-time communication and database updates.
How to Build: Create a chat app where users can send and receive messages instantly.
Upgrade it: Add authentication, end-to-end encryption, or AI moderation.

💎 Advanced-Level Projects

1️⃣1️⃣ Job Board Website

Skills: Next.js, PostgreSQL, API Development
Why? Build a full-stack project with dynamic data fetching.
How to Build: Fetch job postings from a database or API and allow users to filter jobs.
Upgrade it: Scrape job listings from LinkedIn, Indeed, or Wuzzuf.

1️⃣2️⃣ YouTube Video Downloader

Skills: Next.js, Puppeteer, Express.js
Why? Learn web scraping and video processing.
How to Build: Create an app where users enter a video URL and get a download link.
Upgrade it: Allow downloading audio-only versions or full playlists.

1️⃣3️⃣ AI-Based Code Review Tool

Skills: OpenAI API, Next.js, Node.js
Why? Automate code reviews and best practices enforcement.
How to Build: Use OpenAI API to analyze code and provide suggestions.
Upgrade it: Integrate with GitHub to review pull requests automatically.

1️⃣4️⃣ Multi-Tenant SaaS Dashboard

Skills: Next.js, PostgreSQL, Authentication
Why? Learn about multi-tenant architecture and database scaling.
How to Build: Create a dashboard that serves multiple users with separate data.
Upgrade it: Implement billing, team management, and analytics.

1️⃣5️⃣ Portfolio Generator

Skills: React, Next.js, Tailwind CSS
Why? Help developers generate and deploy their portfolios easily.
How to Build: Users can enter their details and generate a customizable portfolio.
Upgrade it: Add drag-and-drop customization or AI-based content suggestions.

🚀 Final Thoughts

Side projects help you apply what you learn, build confidence, and make your portfolio stand out. Pick one from the list, build it, and share your progress! Which one will you try first? Let me know in the comments! 🎯

Follow Me

Thank you for reading my blog. 🚀 You can follow me on GitHub and connect on Twitter

Creating a Reusable Component Library with Next.js & Tailwind CSS 🚀

Mohamed Ibrahim — Thu, 13 Mar 2025 12:16:51 +0000

Introduction

Building a reusable component library can significantly improve development efficiency, maintainability, and consistency across projects. In this guide, we’ll walk through setting up a reusable component library using Next.js and Tailwind CSS, ensuring it’s modular, customizable, and easy to integrate into various projects.

1. Setting Up the Project

Initialize a New Next.js Project

First, create a new Next.js project and install dependencies:

npx create-next-app@latest next-component-library --typescript
cd next-component-library

Install Tailwind CSS

Set up Tailwind CSS by installing its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind to globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Structuring the Component Library

Create a Components Directory

Inside the src/ folder, create a components/ directory to organize reusable UI components.

Example: Button Component

Create a Button.tsx file inside components/:

import React from "react";
import clsx from "clsx";

type ButtonProps = {
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "danger";
  onClick?: () => void;
};

const Button: React.FC<ButtonProps> = ({ children, variant = "primary", onClick }) => {
  const buttonClasses = clsx(
    "px-4 py-2 rounded-md font-semibold transition",
    {
      "bg-blue-500 text-white hover:bg-blue-600": variant === "primary",
      "bg-gray-500 text-white hover:bg-gray-600": variant === "secondary",
      "bg-red-500 text-white hover:bg-red-600": variant === "danger",
    }
  );
  return (
    <button className={buttonClasses} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

3. Making Components Reusable & Customizable

Using Props for Customization

Props allow us to make components flexible. The Button component above supports different variants and actions.

Supporting Tailwind Overrides

To allow additional styles, modify the component to accept class names:

const Button: React.FC<ButtonProps & { className?: string }> = ({ children, variant = "primary", onClick, className }) => {
  return (
    <button className={clsx(buttonClasses, className)} onClick={onClick}>
      {children}
    </button>
  );
};

4. Creating More Components

Example: Card Component

const Card: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => {
  return (
    <div className="border rounded-lg p-4 shadow-md">
      <h3 className="font-semibold text-lg mb-2">{title}</h3>
      {children}
    </div>
  );
};
export default Card;

Example: Input Component

const Input: React.FC<{ placeholder: string; type?: string; className?: string }> = ({ placeholder, type = "text", className }) => {
  return (
    <input
      type={type}
      placeholder={placeholder}
      className={clsx("px-3 py-2 border rounded-md w-full", className)}
    />
  );
};
export default Input;

5. Exporting Components for Easy Import

To make the library easier to use, create an index.ts inside the components/ folder:

export { default as Button } from "./Button";
export { default as Card } from "./Card";
export { default as Input } from "./Input";

Now, importing components is simple:

import { Button, Card, Input } from "@/components";

6. Publishing as an NPM Package (Optional)

To share your component library, you can publish it as an npm package.

Prepare the Package

Create a package.json in the root directory.
Add exports to enable modular imports.
Ensure your components are inside a src/ folder.

Build the Package

Add a build script in package.json:

"scripts": {
  "build": "tsc && tailwindcss -o styles.css"
}

Run the build command:

npm run build

Publish to NPM

npm login
npm publish

Once published, it can be installed in other projects:

npm install my-nextjs-ui-library

Conclusion

By following this guide, you’ve built a reusable component library using Next.js and Tailwind CSS. This modular approach helps maintain design consistency across projects while keeping components highly customizable.

Next Steps:

Expand the library with more components like modals, dropdowns, and alerts.
Add Storybook for component documentation.
Implement Tailwind’s @apply for reusable utility styles.
Optimize the package for tree shaking.

By making your components reusable and shareable, you enhance efficiency in Next.js projects while maintaining a beautiful and consistent UI. 🚀

Follow Me

Thank you for reading my blog. 🚀 You can follow me on GitHub and connect on Twitter

Best Practices for Structuring an Express.js Project

Mohamed Ibrahim — Thu, 27 Feb 2025 08:39:45 +0000

How to organize your Express.js application for scalability and maintainability

📝 Introduction

Express.js is a minimalist and flexible Node.js framework, but as your project grows, a well-structured codebase becomes crucial for maintainability. In this guide, we'll cover the best practices for structuring an Express.js project for clarity, scalability, and maintainability.

📂 Recommended Folder Structure

A clean structure keeps your project modular and scalable. Here's a commonly used Express.js project structure:

📁 my-express-app  
 ├── 📁 src  
 │   ├── 📁 config          # Configuration files (e.g., database, environment variables)  
 │   ├── 📁 controllers     # Business logic (handles requests/responses)  
 │   ├── 📁 models          # Database models & schemas  
 │   ├── 📁 routes          # API route definitions  
 │   ├── 📁 middlewares     # Custom middleware (authentication, logging, error handling)  
 │   ├── 📁 services        # Business logic or external API interactions  
 │   ├── 📁 utils           # Helper functions and utilities  
 │   ├── app.js            # Express app setup  
 │   └── server.js         # Server initialization  
 ├── .env                  # Environment variables  
 ├── .gitignore            # Files to ignore in version control  
 ├── package.json          # Dependencies and scripts  
 ├── README.md             # Project documentation

1️⃣ Separate Concerns: Use MVC Pattern

The Model-View-Controller (MVC) pattern helps organize code into logical layers:

Models → Handle database interactions
Controllers → Contain business logic (handling requests and responses)
Routes → Define API endpoints

Example:

// src/routes/userRoutes.js
const express = require('express');
const { getUsers, createUser } = require('../controllers/userController');

const router = express.Router();

router.get('/', getUsers);
router.post('/', createUser);

module.exports = router;

// src/controllers/userController.js
const User = require('../models/User');

exports.getUsers = async (req, res) => {
    const users = await User.find();
    res.json(users);
};

exports.createUser = async (req, res) => {
    const newUser = new User(req.body);
    await newUser.save();
    res.status(201).json(newUser);
};

2️⃣ Use Environment Variables (`.env` file)

Never hardcode sensitive information like API keys, database credentials, or JWT secrets. Instead, store them in a .env file and load them using dotenv.

Example .env file:

PORT=5000
MONGO_URI=mongodb://localhost:27017/mydb
JWT_SECRET=mysecretkey

Usage in config.js:

require('dotenv').config();

module.exports = {
    port: process.env.PORT || 3000,
    mongoURI: process.env.MONGO_URI,
    jwtSecret: process.env.JWT_SECRET
};

3️⃣ Use Middleware for Code Reusability

Middleware helps keep the main logic clean and reusable.

Example: Logger Middleware

// src/middlewares/logger.js
const logger = (req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
};

module.exports = logger;

Usage in app.js:

const express = require('express');
const logger = require('./middlewares/logger');

const app = express();
app.use(logger);

4️⃣ Implement Proper Error Handling

Centralized error handling prevents redundant error-handling code.

Example: Custom Error Handler

// src/middlewares/errorHandler.js
const errorHandler = (err, req, res, next) => {
    res.status(err.status || 500).json({ message: err.message || "Server Error" });
};

module.exports = errorHandler;

Usage in app.js:

const errorHandler = require('./middlewares/errorHandler');
app.use(errorHandler);

5️⃣ Use Services for Business Logic

Keep business logic separate from controllers by using a services layer.

Example: User Service

// src/services/userService.js
const User = require('../models/User');

exports.getAllUsers = async () => {
    return await User.find();
};

Controller Usage:

const userService = require('../services/userService');

exports.getUsers = async (req, res) => {
    const users = await userService.getAllUsers();
    res.json(users);
};

6️⃣ Database Connection in a Separate File

To keep the app.js clean, manage the database connection separately.

Example: Database Connection File

// src/config/db.js
const mongoose = require('mongoose');
const { mongoURI } = require('./config');

const connectDB = async () => {
    try {
        await mongoose.connect(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true });
        console.log('MongoDB Connected');
    } catch (err) {
        console.error(err.message);
        process.exit(1);
    }
};

module.exports = connectDB;

Usage in server.js:

const connectDB = require('./config/db');
connectDB();

🚀 Conclusion

By structuring your Express.js project properly, you create a scalable, maintainable, and organized codebase that grows with your application. Following these best practices ensures your project is easy to debug, extend, and collaborate on.

💡 What structure do you use for your Express.js projects? Let me know in the comments! 🚀

📢 If you found this guide helpful, share it with fellow developers and follow me for more web development tips! You can follow me on GitHub and connect on Twitter

What Technologies Do You Use Every Day? Let's Discuss! 🤝

Mohamed Ibrahim — Wed, 12 Feb 2025 16:18:58 +0000

As developers, we rely on various technologies, frameworks, and tools to streamline our workflow and enhance productivity. Recently, I started a discussion with my friends about the technologies we use daily, including for development, deployment, API integration, and even coding assistance.

Here’s a look at my daily tech stack:

🌐 Frontend Technologies

React: My go-to JavaScript library for building UI components.
Next.js: The framework I use for server-side rendering (SSR), static site generation (SSG), and full-stack capabilities.
TailwindCSS: A utility-first CSS framework that helps me style my applications efficiently.
shadcn/ui: A great component library that works seamlessly with TailwindCSS.

🖥️ Backend Technologies

Clerk: For authentication and user management.
Supabase: A backend-as-a-service platform providing authentication, database, and API services.
Node.js: My choice for backend development due to its speed and efficiency.
Express.js: A minimal and flexible framework for handling server-side logic and APIs.
PostgreSQL: A powerful and reliable relational database for storing and managing data.

⚙️ Tools & Extensions

ChatGPT: For brainstorming, debugging, and generating code snippets.
GitHub Copilot: AI-powered code suggestions that speed up my development process.
Codium: Another great AI-assisted coding tool to improve efficiency and reduce repetitive tasks.

🚀 Deployment & APIs

For API management, I often use Express.js and RESTful principles, along with authentication techniques like JWT.
I deploy my applications using platforms like Vercel (especially for Next.js projects) and Render for backend services.
Supabase also helps me manage authentication, database, and API functionalities.
For API management, I often use Express.js and RESTful principles, along with authentication techniques like JWT.
I deploy my applications using platforms like Vercel (especially for
Next.js projects) and Render for backend services.

💬 Now It’s Your Turn!

I’d love to hear from you! What technologies, tools, or frameworks do you use daily? Are there any hidden gems that have boosted your productivity? Let’s exchange insights in the comments! 🚀

Best VS Code Extensions to Boost Your Productivity 🚀

Mohamed Ibrahim — Sun, 09 Feb 2025 17:03:02 +0000

Visual Studio Code offers a robust ecosystem of extensions that can significantly boost your productivity. Here are 20 must-have VS Code extensions:

1. Prettier – Code Formatter ✨

Automatically formats your code for a consistent style.
Supports multiple languages including JavaScript, TypeScript, HTML, and CSS.

2. ESLint 🔍

Detects and fixes common code errors.
Enforces coding standards across your projects.

3. Live Server 🌐

Provides real-time reloading for HTML, CSS, and JavaScript files.
Enables instant browser previews for quicker development.

4. GitLens 🔥

Enhances Git integration in VS Code.
Shows detailed commit histories and code annotations.

5. Native Bracket Pair Colorization 🎨

Built into VS Code since version 1.60.
Enable it by setting "editor.bracketPairColorization.enabled": true in your settings.
Offers similar functionality to the old Bracket Pair Colorizer extension with improved integration and performance.

6. Auto Rename Tag 🔄

Automatically renames paired HTML, JSX, or XML tags.
Saves time and reduces syntax errors during editing.

7. Path Intellisense 📁

Provides autocompletion for file paths in your code.
Speeds up the process of importing modules and assets.

8. Thunder Client 🚀

A lightweight REST API client built into VS Code.
Facilitates quick API testing without leaving the editor.

9. REST Client ⚡

Allows you to send HTTP requests directly from VS Code.
Supports environment variables and request history.

10. Material Icon Theme 🎨

Enhances file navigation with visually appealing icons.
Makes it easier to identify file types at a glance.

11. Tailwind CSS IntelliSense 🔥

Provides advanced autocompletion and tooltips for Tailwind CSS.
Enhances productivity when working with Tailwind CSS projects.

12. Docker 🐳

Integrates Docker functionalities within VS Code.
Manage containers and images without leaving the editor.

13. Remote - SSH 🔌

Enables remote development on SSH servers.
Seamlessly work on remote projects as if they were local.

14. Code Runner ⚡

Allows you to run code snippets for various languages quickly.
Supports multiple languages and improves rapid prototyping.

15. Settings Sync 🔄

Synchronizes your VS Code settings across different devices.
Easily maintain your configuration wherever you work.

16. Debugger for Chrome 🐞

Facilitates debugging JavaScript code directly in Chrome.
Simplifies the debugging process for front-end projects.

17. Live Share 🤝

Enables real-time collaboration with other developers.
Share your coding session with peers for pair programming.

18. Rainbow CSV 🌈

Colorizes CSV files for easier reading and editing.
Enhances visibility of data in comma-separated values.

19. Markdown All in One 📝

Provides a comprehensive set of Markdown editing tools.
Includes shortcuts, previews, and enhanced syntax support.

20. npm Intellisense 📦

Offers autocompletion for npm modules in your import statements.
Simplifies the process of managing package dependencies.

Enhance your VS Code experience with these extensions and watch your productivity soar! 💥

🚀 Let’s Connect and Build Together!

Thanks for making it to the end! I’m passionate about web development, open source, and building tools that make life easier for developers.

💻 Check out my projects on GitHub
🐦 Follow me on Twitter/X for tips, threads, and dev insights
🌐 Visit my Portfolio to learn more about what I do

Whether you're looking to collaborate, hire, or just chat about code, my DMs are always open. 🙌