GitHub Actions for Beginners: Automate Everything

Utkarsh Singh — Fri, 11 Apr 2025 11:17:40 +0000

GitHub Actions makes automation easy for developers. Whether you want to lint code, run tests, deploy apps, or just automate boring tasks — GitHub Actions has your back.

In this guide, we'll walk through:

What GitHub Actions are

How workflows work

Real-world automation examples

How to create your first Action

What is GitHub Actions?
GitHub Actions is a CI/CD platform built right into GitHub. It lets you create workflows that run automatically based on events — like pushing code, opening pull requests, or on a schedule.

Anatomy of a Workflow
A typical GitHub Actions workflow lives in your repo at .github/workflows/. Here's what a minimal example looks like:

name: Say Hello

on: [push]

jobs:
greet:
runs-on: ubuntu-latest
steps:
- name: Print Hello
run: echo "Hello, GitHub Actions!"

Key Parts:
on: Triggers (e.g., push, pull_request, schedule)

jobs: Independent units of work

steps: Commands or actions run inside a job

Example 1: Run Tests on Every Push

name: Run Tests

on: [push, pull_request]

jobs:
test:
runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v3
  - name: Set up Node
    uses: actions/setup-node@v4
    with:
      node-version: '18'
  - run: npm install
  - run: npm test

This will automatically run your tests for every commit and PR.

Example 2: Auto Deploy to
Vercel/Netlify/Firebase
Using a custom deploy Action or CLI tool, you can deploy on push to main:

on:
push:
branches: [main]

jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npx vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

Example 3: Auto-format Code with Prettier

on: [push]

jobs:
format:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci
- run: npx prettier --write .

Add a commit step and you can even push formatting fixes automatically.

Using Secrets
Keep tokens and credentials safe:

Go to your repo > Settings > Secrets and Variables

Add secrets like VERCEL_TOKEN, GH_TOKEN, etc.

Access them in workflows like: ${{ secrets.YOUR_SECRET_NAME }}

Bonus: Use Marketplace Actions
The GitHub Marketplace has thousands of reusable actions. Example:

uses: JamesIves/github-pages-deploy-action@v4 with: branch: gh-pages folder: build

Wrapping Up
GitHub Actions is powerful, flexible, and beginner-friendly. Start with:

Running tests

Formatting code

Deploying apps

Then explore advanced workflows: matrix builds, reusable workflows, and self-hosted runners.

Written by Utkarsh Singh, Full Stack Developer

Understanding the MERN Stack: A Beginner’s Guide

Utkarsh Singh — Fri, 11 Apr 2025 10:57:57 +0000

The MERN stack is one of the most popular tech stacks for modern web development. If you're a budding developer or just curious about how full stack apps are built, this guide will walk you through the essentials of MERN.

What is the MERN Stack?
MERN is an acronym for four key technologies:

MongoDB – NoSQL database used to store application data as documents in JSON-like format.

Express.js – A lightweight web framework for Node.js to build APIs and handle backend logic.

React.js – A JavaScript library for building fast and interactive user interfaces.

Node.js – A JavaScript runtime for executing server-side code.

Together, they create a full stack environment entirely based on JavaScript — from client to server to database.

Why Choose MERN?
Single Language Stack: JavaScript is used throughout, which makes development faster and easier to debug.

Full Flexibility: You can build anything from small apps to enterprise-level platforms.

Active Community: Tons of resources, packages, and support from other developers.

How the Pieces Fit Together
Frontend (React)

Users interact with a UI built in React.

Components manage state and trigger events.

Backend (Express + Node)

React sends HTTP requests to the Express server.

Express handles routing, logic, and interacts with the database.

Database (MongoDB)

Data is stored in collections and documents.

Mongoose (an ODM) often connects MongoDB with the Express app.

Project Example: Simple To-Do App

Here’s how you’d use MERN to build a To-Do app:
React: A form to add tasks, a list to display them.
Express/Node: REST API endpoints like GET /tasks, POST /task.

MongoDB: Stores tasks in a collection with fields like title and status.

Getting Started
Basic tools you'll need:

Node.js and npm
MongoDB (or MongoDB Atlas for cloud)
A code editor like VS Code

Initialize your project:
npx create-react-app client
mkdir server && cd server
npm init -y
npm install express mongoose cors

Set up your backend server in server/index.js and frontend in the client folder. Connect them using Axios or Fetch API.

Final Thoughts
Learning the MERN stack is a great step toward becoming a full stack developer. It’s a practical and powerful toolset that is widely used in the industry. Start small, build projects, and grow from there.

Written by Utkarsh Singh
Full Stack Developer | CSE Enthusiast

Forem: Utkarsh Singh

GitHub Actions for Beginners: Automate Everything

Understanding the MERN Stack: A Beginner’s Guide