DEV Community: Easy Tuts

OnCompile

Easy Tuts — Sun, 24 Aug 2025 07:07:50 +0000

OnCompile: Online Code Compiler & Editor

Hey devs!
I’m super excited to share my latest project OnCompile, a modern online code compiler and editor that supports 10+ programming languages, real-time execution, user authentication, and more — all packed inside a sleek monorepo setup.

🔗 Live Demo: on-compile.vercel.app

⭐ GitHub Repo: github.com/nitesh2920/onCompile (Don’t forget to drop a ⭐ if you like it!)

✨ Why OnCompile?

I wanted to create a web-based coding playground that feels as close as possible to using a real IDE. Most online compilers out there are either limited in features, slow in execution, or don’t give users the flexibility to manage their own code snippets.

for now (mine takes time but in future updates it will be faster)
OnCompile fixes that with:

🔧 Multi-language support
💻 Advanced Monaco-based editor
⚡ Real-time execution with Judge0 API
🔐 Secure user authentication (powered by Clerk)
💾 Personal code management (save, load, edit, delete, share)

🔧 Features

1. Multi-Language Support

Supports JavaScript, Python, C++, Java, TypeScript, Rust, Go, C, R, Swift
Language-specific default templates for quick start
Smart file extension detection when downloading

2. Advanced Code Editor

Powered by Monaco Editor (the same editor behind VS Code)
Syntax highlighting, IntelliSense, auto-completion
Light/Dark mode toggle

3. Real-Time Code Execution

Judge0 API integration for accurate & fast remote code execution
Asynchronous execution with real-time polling for results

4. User Authentication

Integrated with Clerk
Secure login, session persistence
Protected routes for save/edit/delete/share

5. Code Management

Save and load your snippets (for authenticated users)
Edit, delete, and re-run saved code anytime
Download files with smart extensions
Generate shareable links to send your code to anyone

🔍 Coming Soon

Smart Input Detection (support for input() in Python, scanf() in C, etc.)

🛠 Tech Stack

Frontend

React 18 + TypeScript
Vite
React Router v6
Monaco Editor
Tailwind CSS + Shadcn/ui
React Resizable Panels

Backend

Node.js + Express (TypeScript)
Prisma ORM (PostgreSQL or any supported DB)
Clerk (authentication)
Judge0 API (code execution engine)

Dev Tools

ESLint + Prettier
Yarn / npm
TypeScript Compiler (TSC)

🌍 Try It Out

🔗 Live: on-compile.vercel.app

⭐ GitHub: github.com/nitesh2920/onCompile

If you like the project, please consider giving it a star on GitHub. It really motivates me to keep building and adding more awesome features! 💙

SnapToPDF

Easy Tuts — Fri, 10 Jan 2025 17:48:46 +0000

Snap To PDF

Just made a simple website to convert your images to pdf easily try once and comment do you like it or not or any suggestion.

Tech stack used

React js
Typescript
jspdf (library)
Tailwind css
ract-beautiful-dnd

website link

Quiz App Generator

Easy Tuts — Fri, 01 Nov 2024 05:31:28 +0000

Introduction

I want to share my journey of building a quiz generator app using React.js, Shadcn UI, and Copilot Kit.

What Does the App Do?

The quiz generator app allows users to: 1. Generate Quotes: The app features a built-in quote generator that allows users to fetch random quotes. 2. Share Quotes: Users can share their favorite quotes directly from the app. 3. CopilotKit Features: With the help of CopilotKit, users can add new quotes to their list or delete existing ones, enhancing the user experience.

Link: Quote Generator App

Tech Stack

1. React.js: The core library for building user interfaces, enabling me to create a dynamic and responsive app.
2. Shadcn UI: This component library provided me with beautiful, accessible UI components that speeded up the development process and ensured a polished look.
3. Copilot Kit: This tool has been invaluable for code suggestions, allowing me to focus on building features without getting bogged down in syntax.

Screenshots:

Link: Quote Generator App

Coding, Collaborating, and Contributing: My Hacktoberfest Journey

Easy Tuts — Wed, 30 Oct 2024 12:38:46 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

Experience

This year’s Hacktoberfest was an amazing experience that helped me discover the power of open source. I enjoyed learning, collaborating, and making meaningful contributions to projects that matched my interests in UI/UX design and interactive features.

My main goal was to improve my skills while working on a variety of projects. During the month, I picked up new coding techniques and learned how to work better with others in a team. This journey not only sharpened my technical skills but also connected me more with the open-source community.

Let’s take a look at the projects that made my Hacktoberfest special and the important lessons I learned along the way!

My Open Source Contribution

1. WebCrumbs

Contributions: Made a design template.
Link: WebCrumbs

2. Manifest

Contributions: Removing duplication from the SCSS files. By identifying and eliminating redundant code, I improved the overall efficiency and maintainability of the stylesheets.
Link: Manifest

3. CopilotKit

Contributions: I developed a Quote Generator App. This app allows users to generate quotes using CopilotKit and share their favorite quotes with others. Users can also add new quotes to their collection and easily delete quotes they no longer want. This project not only improved my skills in application development but also showcased the capabilities of CopilotKit in creating user-friendly interfaces.
Link: Quote Generator Live
Link: CopilotKit

4. freeCodeCamp

Contributions: I developed a quiz on security topics using TypeScript. This interactive quiz includes multiple-choice questions designed to educate users on key security concepts and best practices. Creating this project enhanced my TypeScript skills while promoting awareness in the field of security.
Link: freeCodeCamp

My Twitter Link

Follow Me Here

Basic Docker Terminologies

Easy Tuts — Sun, 06 Oct 2024 16:18:55 +0000

1. Container

A container is like a box that holds your application and everything it needs to run, such as libraries and settings. Containers are lightweight and can run anywhere without issues.

Points to remember:-

containers are isolated (independent of other containers).
Portable: You can move containers from one computer to another easily.

2. Image

An image is a template used to create containers. It includes the app code and everything needed to run it.

Think Image like an Operating System in which multiple container can run.

Points to remember:-

Read-Only: Once created, you can't change an image.
Layered: Images are built in layers, making them efficient and easy to update.

3. Dockerfile

A Dockerfile is a simple text file with instructions on how to build an image. It tells Docker what to include in the image.

Points to remember:-

Dockerfile does't have any extension and the file name should be written as "Dockerfile".

4. Docker Compose

Docker Compose is a tool that helps you manage multiple containers at once. You can set everything up in one file, making it easier to run complex apps.

Points to remember:-

Multi-Container Setup: You can define several containers that work together.
User-Friendly: It makes running and managing apps simpler.

5. Volume

A volume is a way to store data outside of a container. This means that even if you delete a container, the data stays safe.

Points to remember:-

Persistent Storage: Keeps your data even if the container stops or is removed.
Shareable: You can use the same volume in different containers.

6. Network

A network allows containers to talk to each other and to other systems. It helps everything connect smoothly.

Points to remember:-

Communication: Containers can send messages to each other.
Isolation: You can create separate networks for different apps.

🌟 Did you know ? 🌟

Easy Tuts — Tue, 01 Oct 2024 18:48:29 +0000

While Java is known for int, String, and other explicit data types... 💡 You can actually use var in Java! 🤯

Yes, Java introduced var in Java 10, and it's a game-changer for developers who love clean, readable code! 🚀

I know, we all think of Java as the language where you have to spell everything out... String this, ArrayList that. But since Java 10, we've had this awesome little shortcut.
Let me show you what I mean:

// without using var
ArrayList<String> names = new ArrayList<>();
LinkedHashMap<Integer, String> userMap = new LinkedHashMap<>();

// with var
var names = new ArrayList<String>();
var userMap = new LinkedHashMap<Integer, String>();

Now before you ask - nope, this isn't making Java dynamically typed like JavaScript. It's just syntactic sugar. Java is still doing all its strict type checking behind the scenes. You're just saving yourself some typing and making your code a bit cleaner to read.

A few quick things to keep in mind:

You can only use var for local variables
You have to initialize the variable right away
It won't work with null values (the compiler needs to know the type!)

What do you all think? Are you already using var in your Java code? Let me know in the comments!

Concurrency vs Parallelism

Easy Tuts — Mon, 30 Sep 2024 20:44:19 +0000

Concurrency:

Think of concurrency like juggling different tasks, but you're only actually handling one at a time. It's all about managing multiple things efficiently.

Example:
Imagine a student doing homework. They have math, science, and English assignments. Instead of finishing one completely before starting the next, they might:

Work on math for 10 minutes,
Take a break and switch to science for 10 minutes,
Then switch to English for 10 minutes.

You're making progress on all three subjects, but you're not literally doing them at the exact same moment. It's like you're bouncing between tasks, keeping them all moving forward.

Parallelism:

Now, parallelism is when you're actually doing multiple things at the exact same time. This usually needs multiple people or machines to pull off.

Example:
Imagine you and your friends are working on a group project:

You're writing the intro
Your buddy's designing a cool poster
Another friend is putting together a presentation
And someone else is digging up research

In this case, you're all working on different parts of the project at the same exact moment. That's parallelism in action – multiple tasks happening simultaneously.

Guess the output

Easy Tuts — Wed, 04 Sep 2024 18:23:57 +0000