Forem: Mohamed Ibrahim

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. 🙌

⚡30+ Frameworks and Libraries Every Frontend Developer Should Explore in 2025

Mohamed Ibrahim — Wed, 08 Jan 2025 06:00:00 +0000

The world of frontend development is constantly evolving, and staying up-to-date with the latest tools is crucial for developers aiming to build modern, efficient, and engaging web applications. In 2025, these 20+ frameworks and libraries stand out as must-know tools to explore and master.

UI Frameworks and Libraries

React 🔷

React remains one of the most popular libraries, known for its component-based architecture and extensive ecosystem.
Vue.js 🟢

A lightweight, easy-to-learn framework that's perfect for both beginners and professionals building scalable applications.
Svelte 💛

A compiler-based framework offering small bundle sizes and improved performance.
Angular 🛡️

The all-in-one framework for building enterprise-grade applications with advanced tools and features.
SolidJS 🚀

A modern library focused on fine-grained reactivity and optimized rendering performance.
Preact 🌀

A lightweight alternative to React with similar APIs, perfect for performance-critical applications.

CSS Frameworks and Styling Tools

Tailwind CSS 🎨

A utility-first CSS framework that allows for rapid styling and responsive designs.
Bootstrap 5 🅱️

The latest version of Bootstrap brings even more powerful grid and utility classes.
Chakra UI 🌈

A component-based library for building accessible and modern React applications.
Material-UI (MUI) 📐

Google’s Material Design principles implemented in a React-friendly library.

State Management Libraries

Redux Toolkit 📦

Simplifies managing application state with tools for better maintainability.
Recoil 🎯

A lightweight state management library for React with a simple API.
Zustand 🐻

Minimalist state management with no boilerplate, perfect for small to medium projects.

Build Tools and Optimizers

Vite ⚡

A fast build tool with instant HMR (Hot Module Replacement) for improved development experience.
Parcel 📦

A zero-configuration bundler ideal for small to medium projects.
ESBuild 🔥

A blazing-fast JavaScript bundler and minifier for modern projects.

Testing and QA Tools

Jest 🔍

A widely-used testing framework for JavaScript applications.
Cypress 🧪

The go-to tool for end-to-end testing with an intuitive interface.
Playwright 🎭

A modern framework for automating browser interactions in testing.
Storybook 📖

A powerful tool for developing and testing UI components in isolation.

Animation and Visual Libraries

Framer Motion 🎥

A React animation library offering smooth transitions and gestures.
Three.js 🌌

Create 3D graphics and animations for immersive web experiences.
GSAP (GreenSock Animation Platform) 🎢

A robust library for creating high-performance animations.

Content Management and Static Site Generators

Next.js ⚡

The leading framework for React-based applications with SSR and SSG capabilities.
Gatsby 🚀

A static site generator built on React, great for creating fast and SEO-friendly websites.
Astro 🪐

A rising star in static site generation, focusing on delivering fast and lightweight websites.
Nuxt.js 🔵
The go-to framework for Vue.js developers, providing SSR, SSG, and API integration out of the box.

GraphQL and Data Fetching

Apollo Client 🌐

Simplifies managing GraphQL data in frontend applications.
React Query 🔄

A library for fetching, caching, and updating server state in React applications.

Accessibility and Optimization Tools

AccessiBe ♿

AI-powered accessibility tool for ensuring compliance with accessibility standards.
Lighthouse 🚦

An open-source tool for auditing website performance and accessibility.

Final Thoughts

From UI frameworks to performance optimization tools, these 20+ frameworks and libraries reflect the cutting-edge technologies shaping frontend development in 2025. Mastering these tools will not only make you a better developer but also prepare you for building innovative and efficient web applications.

What tools are you planning to learn this year? Let us know in the comments!

Follow Me

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

10+ Top Free Tools and Templates for Creating Developer CVs 🛠️

Mohamed Ibrahim — Tue, 31 Dec 2024 07:32:09 +0000

Creating a developer CV that stands out is crucial when applying for tech jobs. A great CV highlights your technical expertise, showcases your projects, and communicates your value effectively to recruiters and hiring managers. Thankfully, there are numerous free tools and templates available to help you craft a professional and visually appealing CV. Here are some of the best options you can use:

1. JSON Resume 🌐

Overview: JSON Resume is an open-source framework that allows you to create and maintain your resume in JSON format. You can use this tool to easily generate beautiful resumes using various themes.

Key Features:

Create, edit, and store resumes in JSON format.
Multiple themes to choose from.
Export your resume to PDF or host it online.

How to Get Started:

Visit JSONResume.
Use their CLI tool or the web editor to build your resume.

Best For: Developers who enjoy working with structured data and want a highly customizable resume.

2. Canva 🎨

Overview: Canva is a user-friendly design tool that offers free templates for creating visually appealing CVs. It’s great for developers looking for a creative yet professional design.

Key Features:

Drag-and-drop interface.
Customizable templates for various industries.
Export options for PDF, PNG, and other formats.

How to Get Started:

Sign up for a free account at Canva.
Search for “resume templates” and choose one that suits your style.

Best For: Developers who want a quick and visually impressive CV.

3. Overleaf 📄

Overview: Overleaf is an online LaTeX editor ideal for creating professional, typeset CVs. It’s especially popular in academia and among developers who appreciate clean, structured layouts.

Key Features:

Professional LaTeX templates.
Real-time collaboration and version control.
Easy export to PDF.

How to Get Started:

Visit Overleaf.
Use one of their free resume templates.

Best For: Developers with a technical or academic background who want a polished and professional CV.

4. GitHub Pages 💻

Overview: Turn your CV into a live webpage using GitHub Pages. It’s a perfect option for developers who want an online portfolio that doubles as a CV.

Key Features:

Host your resume online for free.
Showcase your GitHub repositories.
Fully customizable with HTML, CSS, or static site generators like Jekyll.

How to Get Started:

Create a repository for your CV.
Use a resume HTML template or a static site generator to build your CV.
Host it on GitHub Pages.

Best For: Developers who want to combine their CV with a portfolio.

5. Novoresume ✍️

Overview: Novoresume offers a free plan that allows you to create a single-page CV with a clean, professional design.

Key Features:

Drag-and-drop editor.
Optimized templates for various industries.
Easy-to-use interface.

How to Get Started:

Visit Novoresume.
Sign up for a free account and choose a template.

Best For: Developers who need a quick, polished CV without diving into technical customization.

6. Reactive Resume ⚛️

Overview: Reactive Resume is a free and open-source resume builder designed specifically for developers. It supports multiple languages and includes collaborative editing features.

Key Features:

Intuitive drag-and-drop editor.
Export to PDF.
Collaborative editing for teams.

How to Get Started:

Visit Reactive Resume.
Start building your CV with their intuitive editor.

Best For: Developers who want an open-source solution with team collaboration.

7. Google Docs 📝

Overview: Google Docs offers free resume templates that are easy to edit and share. It’s a straightforward tool for creating simple yet professional CVs.

Key Features:

Multiple resume templates.
Easy sharing via link or email.
Free collaboration and real-time editing.

How to Get Started:

Open Google Docs.
Search for “resume” in the template gallery and choose a design.

Best For: Developers who want a no-frills, collaborative option.

8. Figma 🎨

Overview: Figma is a design tool that lets you create highly customized CVs. While it’s primarily for UI/UX design, developers can use it to create unique, creative resumes.

Key Features:

Collaborative design environment.
Highly customizable templates.
Free for personal use.

How to Get Started:

Sign up for a free account at Figma.
Search for free resume templates in the Figma community.

Best For: Developers who want to add a personal, creative touch to their CVs.

9. VisualCV 📊

Overview: VisualCV provides free templates that focus on clean and professional designs. It also offers analytics to track views if you share your resume online.

Key Features:

Professional templates.
Analytics for shared resumes.
Easy export to PDF.

How to Get Started:

Visit VisualCV.
Create a free account and choose a template.

Best For: Developers who want a mix of professional design and analytics.

Conclusion 🎉

With these free tools and templates, creating a standout developer CV has never been easier. Whether you prefer a structured approach with JSON Resume, a creative design with Canva, or a polished look with Overleaf, there’s a tool that suits your style. Remember, a great CV isn’t just about the design – it’s also about how well it communicates your skills, projects, and experiences.

Pick a tool that works best for you, and start building your CV today! 🚀

Follow Me

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