DEV Community: Masaud Ahmod

Submitting a Next.js Form to Google Sheets

Masaud Ahmod — Thu, 02 Oct 2025 20:30:21 +0000

Collecting user feedback or leads on a landing page is a must-have feature for modern applications. While setting up a full backend can be heavy for a simple landing page, you can use Google Sheets as a free and reliable database.

In this guide, we’ll build a Contact Form in Next.js (with TypeScript) that stores form submissions directly into a Google Sheet using Google Apps Script.

This method is:
✅ Free
✅ Serverless (no backend required)
✅ Scalable for MVPs & landing pages

🚀 Step 1: Set Up Google Sheet & Apps Script

Create a Google Sheet

Go to Google Sheets and create a new sheet.
Add headers in the first row: Name, Email, Message, Timestamp.

Open Script Editor

In Google Sheets, click: Extensions → App Script

Paste Script

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = JSON.parse(e.postData.contents);

  sheet.appendRow([
    data.name,
    data.email,
    data.message,
    new Date()
  ]);

  return ContentService
    .createTextOutput(JSON.stringify({ status: "success" }))
    .setMimeType(ContentService.MimeType.JSON);
}

Deploy as Web App

Click Deploy → New Deployment.
Select Web app.
Execute as: Me.
Who has access: Anyone.
Copy the generated Web App URL. (e.g., https://script.google.com/macros/s/.../exec)

⚛️ Step 2: Create Next.js Contact Form Component

Here’s the React component with loading state:

"use client";
import { useState } from "react";

export default function ContactForm() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [loading, setLoading] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const res = await fetch("YOUR_GOOGLE_SCRIPT_URL", {
        method: "POST",
        body: JSON.stringify(form),
      });

      const result = await res.json();
      if (result.status === "success") {
        alert("✅ Form submitted successfully!");
        setForm({ name: "", email: "", message: "" });
      } else {
        alert("❌ Something went wrong!");
      }
    } catch (error) {
      console.error(error);
      alert("⚠️ Error submitting form!");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto">
      <input
        type="text"
        name="name"
        placeholder="Your Name"
        value={form.name}
        onChange={handleChange}
        className="w-full border p-2 rounded"
        required
      />
      <input
        type="email"
        name="email"
        placeholder="Your Email"
        value={form.email}
        onChange={handleChange}
        className="w-full border p-2 rounded"
        required
      />
      <textarea
        name="message"
        placeholder="Your Message"
        value={form.message}
        onChange={handleChange}
        className="w-full border p-2 rounded"
      />
      <button
        type="submit"
        disabled={loading}
        className={`px-4 py-2 rounded text-white ${
          loading ? "bg-gray-400 cursor-not-allowed" : "bg-blue-600"
        }`}
      >
        {loading ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
}

📊 Step 3: Test the Integration

Deploy your Next.js project (npm run dev or vercel deploy).
Submit the form.
Check your Google Sheet → new row should appear with the form data. 🎉

🌟 Why Use This Approach?

Fast Setup: No backend required.
Cost-effective: 100% free with Google.
Easy migration: Later you can replace Google Sheets with a real backend (Node.js, Express, MongoDB).

Git A to Z: Local Setup to Advanced Workflow for Real-World Devs

Masaud Ahmod — Thu, 15 May 2025 07:33:08 +0000

Is it even possible to be a real-world developer without Git? Absolutely not.

In this post, I’ll guide you from zero to pro with Git — including installation, terminal usage, VS Code integration, and both basic & advanced commands.

🔧 ১. Git Installation & Local Setup

✅ Step 1: Install Git

Windows: https://git-scm.com/download/win
Mac: Use Homebrew brew install git
Linux: sudo apt install git

✅ Step 2: Git Global Config

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

✅ Step 3: Add SSH Key (for GitHub/GitLab)

ssh-keygen -t ed25519 -C "youremail@example.com"

Then copy your public SSH key and add it to your GitHub/GitLab SSH settings.

📁 ২. Initial Project Setup & First Commit

🔹 Git Init

git init

🔹 File Stage & Commit

git add .
git commit -m "Initial commit"

🔹 Remote Add & Push

git remote add origin https://github.com/yourname/your-repo.git
git push -u origin main

🧪 ৩. Daily Workflow with Git (Pull, Push, Branching)

🔹 Clone

git clone https://github.com/yourname/project.git

🔹 Pull

git pull origin main

🔹 Branch Create & Switch

git checkout -b feature-x

🔹 Merge

git checkout main
git merge feature-x

🧠 ৪. Advanced Git Commands

🔹 Stash & Pop

git stash
git stash pop

🔹 Rebase

git checkout feature
git rebase main

🔹 Cherry-pick

git cherry-pick <commit-id>

🔹 Reset to Previous Commit

git reset --hard HEAD~1

💣 ৫. Common Mistakes & Fixes

Merge Conflict? Don’t panic. Fix the conflict markers, commit, and continue.
Detached HEAD? Switch back to a branch:

git switch main

Pulled wrong changes? Use git reflog to recover lost commits.

🚀 Bonus Tools

🧾 Cheat Sheet

📎 Download PDF: Git Cheat Sheet PDF

🙌 Connect With Me

🔗 GitHub: @masaudahmod

💬 Leave a comment if you want a Git crash course in video format

🌟 Follow me for more content on Git, React, Firebase, and MERN stack development

🚀 Master JavaScript: The Complete JavaScript Tree 🌳

Masaud Ahmod — Sat, 22 Feb 2025 09:50:25 +0000

JavaScript is the backbone of modern web development, and mastering it can level up your coding skills like never before! 💡 Here's a structured roadmap that breaks down the core concepts of JavaScript in a tree format. If you're learning JS or revisiting its fundamentals, this is your ultimate guide! 👇

🔹 The JavaScript Tree

📌 Variables

var, let, const

📌 Data Types

String, Number, Boolean, Object, Array, Null, Undefined

📌 Operators

Arithmetic, Assignment, Comparison, Logical, Unary, Ternary

📌** Control Flow**

if, else, else if, switch, for, while, do-while

📌 Functions

Function declaration, Function expression, Arrow function, IIFE

📌 Scope

Global, Local, Block, Lexical

📌 Arrays

Methods: push(), pop(), shift(), unshift(), splice(), slice(), concat()
Iteration: forEach(), map(), filter(), reduce()

📌 Objects

Properties: Dot notation, Bracket notation
Methods: Object.keys(), Object.values(), Object.entries()

Destructuring

📌 Promises & Asynchronous JavaScript

Promise states: Pending, Fulfilled, Rejected
Methods: then(), catch(),finally(), Promise.all()
Callbacks, Promises, Async/Await

📌 Error Handling

try...catch, throw

📌 JSON & Modules

import, export

📌 DOM Manipulation

Selecting, Modifying, Creating elements

📌 Events

Event listeners, Propagation, Delegation

📌 AJAX & Fetch API

Making HTTP requests the modern way

📌 ES6+ Features

Template literals, Destructuring, Spread/rest, Classes, Modules, Promises

📌 Web APIs

Local Storage, Session Storage, Web Storage API

📌 Libraries & Frameworks

React, Angular, Vue.js

📌 Debugging

console.log(), Breakpoints, DevTools

📌 Others

Closures, Callbacks, Prototypes, this, Hoisting, Strict mode

🔥 Why is this Important?

Understanding these core JavaScript concepts will give you the confidence to build complex applications, optimize performance, and debug like a pro! 🚀 Whether you're a beginner or an experienced dev, revisiting the JS tree will keep your skills sharp!

💬 Which JavaScript concept do you find the most challenging? Let's discuss in the comments! ⬇️

JavaScript #WebDevelopment #Frontend #CodeNewbie #Programming #JS

🚀 Top 5 Free Resources to Learn JavaScript Like a Pro!

Masaud Ahmod — Wed, 19 Feb 2025 21:15:08 +0000

JavaScript is one of the most powerful and essential programming languages for web development. Whether you're a beginner or an experienced developer, learning JavaScript properly will level up your skills and open doors to better job opportunities!

Here are 5 free resources that will help you master JavaScript like a pro in 2025! 🌟

1️⃣ JavaScript.info – The Ultimate JS Guide 📚

🔹 Why? Covers everything from basics to advanced topics like closures, prototypes, and async programming.
🔹 Best for: Beginners to advanced learners
🔹 Link: https://javascript.info/

2️⃣ MDN Web Docs – The JavaScript Bible 📖

🔹 Why? Official documentation with in-depth explanations, examples, and real-world use cases.
🔹 Best for: Understanding JavaScript features deeply
🔹 Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript

4️⃣ Eloquent JavaScript – A Deep Dive into JS Concepts 🤯

🔹 Why? One of the best books for mastering JavaScript concepts in depth.
🔹 Best for: Developers who want to write clean, modern JS code
🔹 Link: https://eloquentjavascript.net/

5️⃣ The Odin Project – Full JS Course with Projects 🏗️

🔹 Why? A structured JavaScript learning path with real-world projects and hands-on practice.
🔹 Best for: Learning JavaScript in a project-based way
🔹 Link: https://www.theodinproject.com/paths/full-stack-javascript

🚀 Final Thoughts

**Mastering JavaScript requires consistent learning and practice. These free resources will take you from beginner to advanced level and help you write better, cleaner, and more efficient code.

🛠️ 2 Simple VS Code & Debugging Hacks Every Developer Should Use! 🚀

Masaud Ahmod — Wed, 19 Feb 2025 12:03:41 +0000

1️⃣ One VS Code Setting That Speeds Up Your Workflow ⚡

Many developers don’t realize how much time they waste on manual saving, mismatched brackets, and repetitive coding. Try these simple settings:

✅ Auto Save: Automatically saves your work after a short delay.

"files.autoSave": "afterDelay"

✅ Bracket Pair Colorization: Highlights matching brackets for better readability.

"editor.bracketPairColorization.enabled": true

✅ AI-Powered Code Suggestions: Install Tabnine AI or Codeium to boost coding speed with smart autocompletions.

2️⃣ Stop Using console.log() – Try These Instead! 🔍

console.log() is great, but there are better ways to debug your JavaScript code. Here are some game-changing alternatives:

🚀 Format data properly with console.table()

const users = [{ name: "John", age: 25 }, { name: "Jane", age: 30 }];
console.table(users);

🚀 Use debugger; to pause execution and inspect variables in Chrome DevTools

function fetchData() {
  debugger; // Opens DevTools and pauses execution here
  return fetch("https://api.example.com").then(res => res.json());
}

function fetchData() {
  debugger; // Opens DevTools and pauses execution here
  return fetch("https://api.example.com").then(res => res.json());
}

🚀 Measure execution time with console.time()

console.time("fetchData");
fetchData().then(() => console.timeEnd("fetchData"));

💡 Bonus Tip: If you’re not using these yet, start now and watch your debugging and workflow efficiency skyrocket! 🚀

👉 Which trick did you find most useful? Let me know in the comments! 🔥💬

🚀 Best VS Code Extensions for MERN Stack Developers in 2025

Masaud Ahmod — Tue, 18 Feb 2025 12:47:17 +0000

First of all, I'm Masaud. If you're a MERN stack developer, your VS Code setup can make or break your productivity. Choosing the right extensions can speed up your workflow, improve code quality, and boost your overall development experience.

Here’s a list of some of the must-have VS Code extensions in 2025 for MERN developers, including **AI-powered tools, themes, and debugging extensions!🔥

1️⃣ Codeium AI – AI-Powered Coding Assistant 🤖

🔹 Why? AI-powered auto-completion, intelligent suggestions, and context-aware code generation. A solid alternative to GitHub Copilot.

🔹 Install: Codeium

2️⃣ Prettier – Code Formatter 🎨

🔹 Why? Ensures a consistent code format across your project, reducing manual formatting work.

🔹 Best for: JavaScript, TypeScript, HTML, CSS

🔹 Install: Prettier - Code formatter

3️⃣ Tailwind CSS IntelliSense – Best for Styling ✨

🔹 Why? Adds autocompletion, syntax highlighting, and linting for Tailwind CSS classes.

🔹 Best for: MERN projects with Tailwind CSS

🔹 Install: Tailwind CSS IntelliSense

4️⃣ ES7+ React/Redux Snippets – Faster React Development ⚛️

🔹 Why? Provides handy shortcuts for React, Redux, Next.js components, hooks, and boilerplate code.

🔹 Best for: React, Next.js projects

🔹 Install: ES7+ React/Redux/React-Native Snippets

5️⃣ Material Theme & Icons – Best UI for VS Code 🎨

🔹 Why? Aesthetic developer-friendly themes that reduce eye strain and improve focus.

🔹 Popular Options:

✅ Material Theme – Install

✅ Dracula Official – Install

✅ One Dark Pro – Install

6️⃣ REST Client – Test APIs Without Postman 🌐

🔹 Why? Send API requests directly from VS Code, without opening Postman or other API tools.

🔹 Best for: Testing REST APIs, MongoDB queries, and backend debugging

🔹 Install: REST Client

7️⃣ GitLens – Supercharge Git in VS Code 🛠️

🔹 Why? Provides detailed commit history, blame annotations, and Git insights directly inside VS Code.

🔹 Best for: Tracking changes in large MERN projects

🔹 Install: GitLens

8️⃣ Path Intellisense – Auto-Suggest File Paths 📁

🔹 Why? No more manually typing file paths! This extension auto-suggests file and folder paths as you type.

🔹 Best for: Faster imports in React & Node.js

🔹 Install: Path Intellisense

9️⃣ Error Lens – Spot Errors Instantly 🚨

🔹 Why? Displays inline error messages directly in the editor, so you don’t have to check the terminal every time.

🔹 Best for: Debugging JavaScript, TypeScript, and Node.js errors

🔹 Install: Error Lens

🔟 JavaScript (ES6) Code Snippets – Speed Up JS Development ⚡

🔹 Why? Provides shortcut snippets for modern JavaScript, including ES6+ syntax, promises, destructuring, and more.

🔹 Best for: Writing clean & efficient JavaScript code

🔹 Install: JavaScript (ES6) Snippets

✨ Final Thoughts

These VS Code extensions will level up your productivity as a MERN developer in 2025. Whether you're working with React, Node.js, MongoDB, or Express.js, these tools will make your coding smoother, faster, and more efficient.

👉 Which VS Code extensions do you use daily? Drop your favorites in the comments below! 🚀🔥

🚀 Why Every Beginner (Especially Non-Tech Students) Should Learn Git

Masaud Ahmod — Mon, 17 Feb 2025 06:49:00 +0000

🚀 Why Should Beginner Programmers (Especially Non-Tech Students) Learn Git?
If you're new to programming and not from a tech background, you might wonder:
_"Why should I learn Git? Isn't it for advanced developers?"
_*Well, Git is not just for experienced programmers—it's a must-have tool for beginners too! Here’s why:
*
**🔹 What is Git?
**Git is a version control system that helps you track changes in your code, collaborate with others, and prevent accidental data loss. Think of it as Google Docs for your code, where you can:
✅ Save different versions of your project
✅ Undo mistakes easily
✅ Work on projects without fear of breaking something
✅ Collaborate with developers worldwide

🔹 How to Install Git Locally & Set Up a Global Git Account

Step 1: Install Git on Your System
🔹** Windows Users**
1️⃣ Download Git from Git’s official website
2️⃣ Run the downloaded .exe file and follow the installation process
3️⃣ Choose "Git Bash" during installation (this will help you run Git commands)

🔹** Mac Users**
1️⃣ Open Terminal and type:

brew install git

(If you don’t have Homebrew, install it first from brew.sh)

🔹** Linux Users**
1️⃣ Open Terminal and type:

sudo apt install git  # For Ubuntu/Debian  
sudo dnf install git  # For Fedora

Step 2: Verify Git Installation
After installation, open Command Prompt (Windows) / Terminal (Mac & Linux) and run:

git --version

_If it returns something like git version 2.x.x, your installation was successful. ✅
_
**Step 3: **Set Up Git Account Globally in Local Machine
Now, link Git with your personal identity (GitHub account).

1️⃣ Configure Your Name & Email (Globally)
Use your GitHub email and name:

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

Verify your setup by running:

git config --global --list

2️⃣ Generate SSH Key & Connect GitHub (Optional but Recommended)
This step lets you push code to GitHub without entering your password every time.

Generate an SSH key:

ssh-keygen -t rsa -b 4096 -C "your-email@example.com"

Press Enter multiple times (default options are fine). Then, copy the SSH key to GitHub:

cat ~/.ssh/id_rsa.pub

Copy the output and paste it into GitHub under:
👉 GitHub Settings → SSH and GPG keys → New SSH key

🔹 Why is Git Important for Beginners?

1️⃣ Mistakes are normal – Git helps you roll back to a previous working version if you mess up.
2️⃣ Backup for your projects – You won’t lose progress if your computer crashes.
3️⃣ Learn team collaboration – Most companies use Git for software development.
4️⃣ Showcase your work – Platforms like GitHub act as a portfolio for developers.

🔹 Basic Git Commands Every Beginner Should Know
💻 git init → Start a new Git project
💻 git add . → Add all changes to be tracked
💻 git commit -m "Your message" → Save changes with a message
💻 git push origin main → Upload your project to GitHub
💻 git clone [repo URL] → Download a project from GitHub
💻 git pull origin main → Get the latest updates from a project

🔹 Discussion: What Confuses You About Git?
What part of Git feels difficult or confusing? Drop your questions below & let’s discuss! 👇🔥