DEV Community: 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! 🙏

💭 What's the Best Tech Stack for a Markdown-Based Programming Blog?

Mohamed Ibrahim — Sat, 02 Aug 2025 11:40:21 +0000

Hi everyone 👋

I'm planning to build my own programming blog, and I’d love to get your input!

Here’s what I’m aiming for:

✅ The content will be written fully in Markdown
✅ I don’t want to use any database
✅ I want full control over customization — so I’m not looking to use WordPress, Ghost, or similar platforms
✅ I prefer building things from scratch or at least with lightweight frameworks/libraries

Basically, I want a developer-focused blog that I can style and structure completely my way.

So my question is:

Which tech stack would you recommend for this kind of setup?

& How to best organize and parse Markdown content?

Right now I’m thinking of using Next.js with some Markdown libraries like gray-matter and remark to parse the posts. It seems like a solid setup using getStaticProps for static generation.

But I’m wondering...

👉 Is there a better or more lightweight option for this use case?
Maybe something like Astro, Eleventy, or even something more minimal?

Thanks in advance for any thoughts or experiences you can share!

Will AI replace programmers? 🤔

Mohamed Ibrahim — Mon, 07 Jul 2025 19:00:05 +0000

Recently, we’ve all seen how powerful AI tools like ChatGPT and GitHub Copilot have become.

They can write code, suggest solutions, and even fix bugs.

Some people believe AI will eventually replace developers, while others see it as just a smart assistant that helps us work faster — not a full replacement.

Honestly, I think AI is a powerful tool that can support us, but I don't believe it can fully replace human logic, creativity, and decision-making... at least not any time soon.

🔥 What do you think?

Do you believe programmers will be replaced by AI in the future?
Or will the best developers be the ones who learn to use AI effectively?

Let me know your thoughts in the comments 👇

💬 How to Build a Real-Time Chat App from Scratch with Node.js + Socket.IO

Mohamed Ibrahim — Wed, 11 Jun 2025 19:46:44 +0000

Have you ever wanted to build your own real-time chat app from scratch? In this post, I’ll show you how I built a simple and clean chat application using Node.js, Socket.IO, and a frontend built with HTML/CSS/JavaScript — no database required (at least for now 😉).

🔧 Technologies Used

Node.js + Express — backend server
Socket.IO — real-time communication (WebSockets)
HTML + CSS (Dark theme) — GitHub-like dark mode
Vanilla JavaScript — frontend logic

🖼️ App Preview

Users join a room by entering their name, and immediately join the live chat. Messages appear on the right for your own messages, and on the left for others. You’ll also see join/leave system notifications.

📦 Project Structure

/public
  ├── index.html     # Join page (username input)
  ├── chat.html      # Main chat interface
  ├── styles.css     # Custom dark styling
  └── script.js      # Handles socket and UI logic

server.js            # Node.js server + Socket.IO logic

🚀 How to Run Locally

Clone the repository:

git clone https://github.com/Mo-Ibra/simple-chat-app
cd your-repo-name

Install dependencies:

npm install

Start the server:

node server.js

Open in browser:

http://localhost:3000

💡 Features

✅ Real-time messaging between users
✅ Notifications when users join/leave
✅ Messages styled to indicate sender
✅ Logout button that redirects to the join screen
✅ No backend database needed for now (session-based)

🔒 No Database? No Problem

At this stage, all messages are held temporarily in memory and disappear on refresh. In the future, you can easily plug in MongoDB, PostgreSQL, or any database to persist data.

📁 Want the Code?

Here’s the GitHub repo:

🔗 Mo-Ibra/simple-chat-app

💬 Final Thoughts

This was a great exercise to understand WebSocket communication and Socket.IO in a very hands-on way. It’s perfect for beginners who want to get a feel for real-time apps.

Feel free to fork the project, add new features like emojis, typing indicators, private messaging, or even a database backend!

Thanks for reading! ❤️

If you found this useful, give it a ❤️ or leave a comment below.

🚀 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

30 Git Commands Every Developer Should Know 🔥

Mohamed Ibrahim — Thu, 20 Mar 2025 07:00:00 +0000

Git is an essential tool for developers, but with so many commands available, it's easy to get overwhelmed. This guide covers 30 Git commands that you'll actually use in your daily workflow, from setting up a repository to managing branches and resolving conflicts.

🔹 Getting Started with Git

1️⃣ Initialize a Repository

git init

Creates a new Git repository in the current directory.

2️⃣ Clone a Repository

git clone <repository-url>

Downloads a copy of a remote repository to your local machine.

3️⃣ Check Repository Status

git status

Shows changes that have been staged, unstaged, or untracked.

4️⃣ Add Files to Staging Area

git add <file>
git add .

Stages a specific file or all files for the next commit.

5️⃣ Commit Changes

git commit -m "Commit message"

Saves changes in the local repository with a descriptive message.

🔹 Branching & Merging

6️⃣ Create a New Branch

git branch <branch-name>

Creates a new branch without switching to it.

7️⃣ Switch to a Branch

git checkout <branch-name>
# or (Git 2.23+)
git switch <branch-name>

Moves to an existing branch.

8️⃣ Create & Switch to a New Branch

git checkout -b <branch-name>
# or (Git 2.23+)
git switch -c <branch-name>

Creates and switches to a new branch in one step.

9️⃣ Merge a Branch

git checkout main
git merge <branch-name>

Merges changes from another branch into the current branch.

🔟 Delete a Branch

git branch -d <branch-name>

Deletes a branch that has been merged.

🔹 Working with Remote Repositories

1️⃣1️⃣ Add a Remote Repository

git remote add origin <repository-url>

Links your local repo to a remote repository.

1️⃣2️⃣ View Remote Repositories

git remote -v

Lists remote repositories associated with the project.

1️⃣3️⃣ Fetch Changes from Remote

git fetch

Downloads new changes without merging them.

1️⃣4️⃣ Pull Changes from Remote

git pull

Fetches changes and merges them into your local branch.

1️⃣5️⃣ Push Changes to Remote

git push origin <branch-name>

Uploads local commits to a remote repository.

🔹 Undoing & Fixing Mistakes

1️⃣6️⃣ Undo the Last Commit (Keep Changes)

git reset --soft HEAD~1

Moves the last commit back to the staging area.

1️⃣7️⃣ Undo the Last Commit (Discard Changes)

git reset --hard HEAD~1

Completely removes the last commit and changes.

1️⃣8️⃣ Unstage a File

git reset <file>

Removes a file from the staging area without deleting it.

1️⃣9️⃣ Revert a Commit

git revert <commit-hash>

Creates a new commit that undoes a specific commit.

2️⃣0️⃣ Stash Changes (Save Without Committing)

git stash

Temporarily saves changes without committing them.

2️⃣1️⃣ Apply Stashed Changes

git stash pop

Restores the last stashed changes and removes them from the stash list.

2️⃣2️⃣ Drop Stashed Changes

git stash drop

Deletes the last stashed changes without applying them.

🔹 Viewing History & Comparing Changes

2️⃣3️⃣ View Commit History

git log

Shows a list of commits with details.

2️⃣4️⃣ View a File’s Change History

git log -- <file>

Displays all commits that modified a specific file.

2️⃣5️⃣ Show Differences Between Commits

git diff

Compares changes between the working directory and the last commit.

2️⃣6️⃣ Show Changes in a Specific File

git diff <file>

Displays changes made to a specific file.

2️⃣7️⃣ Compare Two Branches

git diff <branch-1>..<branch-2>

Shows the differences between two branches.

🔹 Collaboration & Advanced Commands

2️⃣8️⃣ Rebase a Branch

git rebase <branch-name>

Moves commits from one branch on top of another for a cleaner history.

2️⃣9️⃣ Cherry-Pick a Commit

git cherry-pick <commit-hash>

Applies a specific commit to the current branch.

3️⃣0️⃣ Squash Commits Before Merging

git rebase -i HEAD~<number>

Combines multiple commits into one before merging.

🎯 Final Thoughts

These 30 Git commands will help you manage your workflow, collaborate effectively, and fix mistakes with confidence. Whether you're working on personal projects or contributing to a team, mastering Git will save you time and frustration.

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

Building an Image to Text Converter with Next.js and Tesseract.js 🚀

Mohamed Ibrahim — Sun, 16 Mar 2025 18:45:01 +0000

Introduction

As developers, we often encounter challenges that inspire us to build solutions. One common problem I noticed was the need to extract text from images quickly and efficiently. Whether it’s scanning printed documents, extracting text from screenshots, or working with multi-language content, I needed a simple and effective solution. That's when I decided to create an Image to Text Converter using Next.js and Tesseract.js.

🧐 The Problem

OCR (Optical Character Recognition) technology is widely available, but many existing solutions are either too complex, require paid services, or don’t support multiple languages effectively. I wanted to create a tool that:

Is free and open-source
Supports multiple languages
Provides an easy-to-use UI
Allows exporting text in various formats
Works entirely in the browser without requiring backend processing

💡 The Solution

I built a Next.js application that integrates Tesseract.js, a powerful JavaScript OCR engine. The app allows users to upload images and extract text instantly, supporting multiple languages and various export options.

✨ Features

🌍 Multi-language Support

Extract text in multiple languages like English, Arabic, Spanish, French, and more.

📤 Export Options

Users can export the extracted text in .txt, .pdf, or .md formats.

🖼️ Image Upload

Supports file selection and drag-and-drop image uploads.

🔄 Image Preprocessing (Upcoming)

Enhances OCR accuracy with grayscale conversion and cropping.

🕶️ Dark Mode

A seamless light and dark theme experience.

📱 Responsive Design

Optimized for both mobile and desktop devices.

🛠️ Tech Stack

Frontend: Next.js, Tailwind CSS
OCR Engine: Tesseract.js
File Export: jsPDF

⚙️ How I Built It

Setting Up Next.js
- Installed and configured Next.js and Tailwind CSS.
Integrating Tesseract.js
- Used Tesseract.js to process images and extract text on the client-side.
Building the UI
- Created a user-friendly interface with drag-and-drop support.
Adding Export Options
- Implemented text, PDF, and Markdown export using jsPDF.
Enhancing with Preprocessing (Upcoming)
- Working on grayscale conversion and cropping for better OCR accuracy.

📦 How to Use

1️⃣ Clone the Repository

git clone https://github.com/Mo-Ibra/imagetxt-to-txt
cd imagetxt-to-txt

2️⃣ Install Dependencies

npm install

3️⃣ Run the Development Server

npm run dev

Visit http://localhost:3000 to view the app.

🔗 Try It Out!

The project is available on GitHub, and I’d love your feedback and contributions!
👉 GitHub Repo

And you can check the demo from 👉 here

🏁 Conclusion

This project has been a great learning experience in working with OCR, file handling, and UI/UX improvements. If you're looking to build a similar tool or enhance your Next.js skills, give it a try! 🚀

💬 Let me know what you think in the comments, and feel free to contribute! 😃

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