DEV Community: shinjith

Git Good: Automating Commit Message Standards with Husky and Commitlint

shinjith — Mon, 15 Dec 2025 17:37:50 +0000

The most difficult part of agreeing to follow best practices and standards is getting into situations where you just want to get things done and standards are no longer a concern.

I'm sure the best of us have been in situations where we needed to solve a problem instantly in a magical way; that's when we removed the "Ideal developer" mask and went full ninja mode.

“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live” ― John Woods

Another example is while working in a team and everyone just wants the task completed (as if they're not the one to modify it the next day). A better approach is to implement certain rules in our project to ensure that we do not simply ignore the standards.

This is a guide on how to setup Husky and Commitlint to enforce the commit message practices. A continuation of my last blog Git Good: Best Practices for Branch Naming and Commit Messages.

Husky Setup

Husky is a modern way of implementing Git Hooks. Or like the readme says:

Modern native Git hooks made easy. Husky improves your commits and more 🐶 woof!

Husky is extremely lightweight and fast! Linting commit messages (enforcing message format) is merely one of its many uses. Husky can be used to "Automatically lint your commit messages, code, and run tests upon committing or pushing".

Install and Initialize Husky using following commands, for other package managers check here.

npm install --save-dev husky
npx husky init

The husky init command will create a file with a default script:

 npm test

You can safely delete this file.

Install and Configure Commitlint

Commitlint is a tool that exists just to ensure that you write your commit messages properly. Install @commitlint/cli and @commitlint/config-conventional as dev dependencies.

npm install -D @commitlint/cli @commitlint/config-conventional

We use @commitlint/config-conventional as our base configuration because we developed our best practices with Conventional Commits as the foundation.

Configuration

I created a configuration that applied all of the commit message standards outlined in the last blog post. You can add, update, or remove any ruleset; the @commitlint/config-conventional is enough for a normal use case.

// commitlint.config.mjs

const config = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    // 1. Format: <type>([optional scope]): <description> - enforced by most rules below.
    // Enforce that the type is not empty.
    'type-empty': [2, 'never'],

    // Enforce specific commit types. Add/remove types based on the project.
    'type-enum': [
      2, 
      'always', 
      ['feat', 'fix', 'build', 'chore', 'ci', 'style', 'refactor']
    ],

    // Subject/Description Rules:
    // 2. Short and Summarized: Try to fit the subject line inside 50 characters.
    'header-max-length': [2, 'always', 50],

    // 3. Capitalize the description: Start subject line with a capital letter.
    // Imperative Mood. Mostly useful for generating changelogs.
    'subject-case': [2, 'always', 'sentence-case'],

    // 4. Avoid trailing period.
    'subject-full-stop': [2, 'never', '.'],

    // Body Rules:
    // 5. Body is added by leaving a blank line after the subject line.
    'body-leading-blank': [2, 'always'],

    // 6. Wrap the body at 72 characters.
    'body-max-line-length': [2, 'always', 72],

    // Footer Rules:    
    // Ensure a blank line precedes the footer.
    'footer-leading-blank': [2, 'always'],

    // Rule for Optional Scope:
    // Enforce that if a scope is used, it is in lower-case.
    'scope-case': [2, 'always', 'lower-case'],
  } 
};

export default config;

Place this config file in your project root.

It is important that you extend Commitlint with any of your preferred configuration libraries (as seen in line 2 above) in order to perform linting. As previously mentioned, other options are entirely optional. Refer this for advanced configuration.

Add Hook

Add the following content to the commit-msg hook file in the Husky folder.

# .husky/commit-msg
 npx --no -- commitlint --edit $1  # $1 points to the commit message file that git created.

That's it. Now the Commitlint will lint your commit messages based on the added config.

Test Commitlint

To test your Commitlint configuration, make a git commit.

git add --all
git commit -m "chore: Add linting on commit message"

If the commit format does not follow the configured rules, an error will be thrown, preventing the commit action.

For example:

❯ git commit -m "foo: this will fail"
⧗   input: foo: this will fail
✖   subject must be sentence-case [subject-case]
✖   type must be one of [feat, fix, build, chore, ci, style, refactor] [type-enum]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg script failed (code 1)

All that being said, most of the simple projects we work on do not require such strict standards. Still, I keep this configuration in all new projects to develop this into a habit.

It is worth noting that Commitlint offers some other interesting features, such as the Prompt option.

Escape Hatch

Because we are forcing ourselves to follow these standards, there may be times when you just want to get around them. These are the methods to disable the hook, hence the Commitlint.

HUSKY=0 git ...  # Temporarily for single command

# For `multple` commands  
export HUSKY=0 # Disables all Git hooks
git ...
git ...
unset HUSKY # Re-enables hooks

For GUI users (same can be used to globally disable Husky):

# ~/.config/husky/init.sh
export HUSKY=0 # Husky won't install and won't run hooks on your machine

Husky's guide on Skipping Git Hooks.

Conclusion

This guide is a follow-up to my last blog, and as I indicated then, enforcing these standards may not be strictly necessary in this era of coding. This strategy is for those who desire to maintain the best quality in whatever they do.

Lint-staged is another tooling library that I would recommend since we used git hooks for this configuration. Lint-staged, when used with Husky, performs final touch-ups before committing, such as linting, formatting, and so on... It's really useful for maintaining code quality when working in a team.

Good day!

References

The Complete Company Landing Page - Holistic Webdev Challenge

shinjith — Fri, 25 Jul 2025 08:11:16 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

As an employee, I've often wondered if there was a single website solution where I could view everything at a glance to start the day. Despite the fact that there are planning, product development tools, and dashboards, all of the information is spread across multiple websites.

I was able to design a simple prototype of a company landing page that summarizes all data for a quick glance throughout the day. Please access the live URL and view the details.

Demo

Journey

As I previously stated, my intention was to put all necessary data on the home page. It was difficult to design such a page. After looking for inspiration and incorporating UI elements from existing established solutions, I was able to create a minimal solution, which still requires a lot of work.

This design is heavily reliant on Shadcn UI and blocks produced from it via various websites. Also the color theme is adapted from Catppuccin color palette.

Screenshots

Conclusion

The UI is currently immature, but the main goal is to consolidate all critical information on the home page. If you believe there is something missing, please leave a comment. Please show your support by liking this post. Many thanks.

Good day!

Create a Blogging Platform With No Backend (Zero Hosting Charge)

shinjith — Sun, 05 Jan 2025 00:35:32 +0000

I recently received a free tier limit alert from AWS, two months after hosting my personal note-taking app on an EC2 instance. So I did some research on how to host a blogging website for free (or the cheapest way). As my research focused down, my final query was, How to host this using github as my storage!

There were many ways for doing this (thanks to redditors!). One of the best was generating static website and utilizing a CMS that allows github syncing. I went for 11ty (Eleventy) + Decap CMS (formerly Netlify CMS) + Netlify Identity and I was able build something like this within couple of days:

notes.shinjith.dev

Probably I'm late to the party, but I'm sharing this hoping that someone could find this useful.

Why 11ty or Decap?

Obviously, there are a dozen choices for generating static websites (efficiently and quickly), from the classic Jekyll to the new Next.js. And you are good to go with any of them as long as your confident with it. I choose 11ty because:

My requirements were simple and required little customization.
From the users experience, 11ty was lightning fast (and it's TRUE)
11ty offers a wide variety of template languages, check here

You might have reasons to not use it. some of them being:

The resulting website is hard to customize (hard but possible)
The documentation is a type of DIY thing, some might find hard to do (One of the reason I chose this!)

As for Decap CMS, I concluded that it is the best way to do this. There were couple of alternatives like Keystatic, Contentlayer (Not a complete CMS), etc... Also the only restriction is that it compels you to host it on Netlify and utilize Netlify Identity (Possible with Cloudflare and/or Github OAuth but with a complex process).

I'll share a brief walk-through on how I did this; assuming that you have fundamental knowledge on web development or did similar things before.

1. Create a 11ty Project

Create a blank directory and initialize node project by creating a `package.json`

mkdir eleventy-decap && cd eleventy-decap
yarn init  # or npm init -y

Ideally, now you have a folder with only a package.json file in it.

For the rest of this blog I'll be using yarn. You can use npm by replacing with equivalent command if you prefer.

Install 11ty package to you project

yarn add @11ty/eleventy

Add some contents

create an index.html and add some content to it

<!-- /index.html -->

<!doctype html>
<title>First Page</title>

<p>
The world is moving so fast these days that the man who says it can't be done is generally interrupted by someone doing it. - Harry Emerson
</p>

Add script to run eleventy in `package.json`

{
  "name": "eleventy-decap",
  "version": "1.0.0",
  "main": "index.js",
  "author": "shinjith-dev",
  "license": "MIT",
  "scripts": {
    "dev": "eleventy --serve",
    "build": "eleventy"
  },
  "dependencies": {
    "@11ty/eleventy": "^3.0.0"
  }
}

Run the project

yarn dev

You can see the website running in the address http://localhost:8080 (if not, check the terminal). That was literally the fastest (or the simplest) framework setup I've done so far!

Checkout this Getting Started page of 11ty for detailed instruction

Adding Blogs

Create a folder named blogs and store some files on it. You can see in the terminal that the files you're updating are reflected to the website in realtime. For example, create a file /blogs/first.md an add some content to it.

# My First Blog in Eleventy + Decap

Etiam massa mauris, feugiat ut pharetra in, malesuada eu orci. Nullam aliquam elit sit amet urna posuere aliquet.

You can now open this content using url http://localhost:8080/blogs/first. As you might have noticed 11ty automatically generates page paths from path of the source file relative to the project root. You can also see the static web folder is generated under the folder name /_site.

Hosting

Now, please do this step on your own as I don't want this blog to be a long & boring. It's pretty simple, upload to github and host it on Netlify. Please refer these blogs if you're not sure on how to do it:

On the final project configuration step, you can select eleventy template of Netlify to let it handle things for you. Use yarn build as build script (we have already added this script in the initial steps).

2. Integrate Decap CMS

Decap is like a plug and play part in your project. It is easy to setup and has lightweight CMS interface. The only hard part is adding Netlify Identity for authentication, it can be easily done as the docs are easy to understand and follow.

Install Decap

Make a folder named admin in your project root (or use any other name if you're not welcoming intruders as it is an obvious path to look for admin interfaces).
Create an index.html and config.yml in it.

/admin/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Decap CMS -->
    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
  </body>
</html>

/admin/config.yml

backend:
  name: git-gateway
  branch: main
  commit_messages:
    create: create {{collection}}/{{slug}}
    update: update {{collection}}/{{slug}}
    delete: delete {{collection}}/{{slug}}
    uploadMedia: upload {{path}}
    deleteMedia: delete {{path}}
    openAuthoring: '{{message}}'


media_folder: "_site/assets/uploads"
public_folder: "/assets/uploads"


collections:
  - name: "blog"
    label: "Blog"
    folder: 'blogs'
    create: true
    slug: "{{slug}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - label: "Tags"
        name: 'tags'
        widget: 'list'
        default: ['web']
        allow_add: true
        collapsed: false
      - { label: "Date", name: "date", widget: "datetime" }
      - { label: "Body", name: "body", widget: "markdown" }


site_url: https://notes.shinjith.dev

This is a basic config for Decap, assuming that you hosted it on Netlify and use Netlify Identity for Authentication.
Set value of site_url to netlify url of your project.

Refer this for alternative installation options and
Check this to learn how to configure decap as per your need.

Decap and 11ty

.yml files are not parsed by 11ty by default, therefore it will not get created in the output folder (/_site/admin/). Also you don't need 11ty to parse or compile the whole /admin folder as it is irrelevant to the content generation part. To complete the Decap installation, you need to convey eleventy about this, to achieve this create a eleventy.config.mjs file and add the following lines.

/eleventy.config.mjs

export default function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("admin");
};

Now restart the project. To know more about the eleventy.config.mjs file, refer 11ty docs. You can find more about addPassthroughCopy function here.

Add Netlify Identity

Netlify has a service called Identity that lets you add authentication to this project, including external auth providers like Google.

Enable Netlify Identity

Open your hosted project in Netlify Dashboard and follow below steps:

Identity > Netlify Identity - Enable, click Enable Identity
Go to Configuration and usage, under Registration, select Open or Invite only, Invite Only is enough for basic needs
Add external providers for your auth under External providers
Scroll down to Services > Git Gateway, and click Enable Git Gateway

Add the Auth handler widget

Add the netlify Identity widget to the admin landing page and preferably to the main landing page.

script tag:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

Landing page files after adding the script,

/index.html

<!doctype html>


<html>
<head>
  <title>First Page</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>


<body>
  <p>The world is moving so fast these days that the man who says it can't be done is generally interrupted by someone doing it. - Harry Emerson</p>
</body>
</html>

/admin/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Content Manager</title>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Decap CMS -->
    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
  </body>
</html>

Optionally you can redirect user to CMS after Netlify authenticates you by adding a script snippet, refer Decap documentation links below.

Now, you can push the changes to github. Wait a while for it to build, and go to /admin path of your hosted website to verify Decap setup.

After authentication you can easily manage your blogs here. Whenever you click Publish, the changes are committed to github right-away and after the build process, changes are reflected to the hosted website within about a minute.

I've already mentioned a Quick Start guide. For in-depth reasons and details, refer Decap CMS documention:

Final Glow Up

So far we've managed to create simple blog pages and integrate web based CMS into it. Now, nobody want to visit a website that is mere plain text without any layout or organizing.

Like I mentioned before, 11ty is little hard to customize according to your will, but on the contrary it is quite simple once you grasp the idea of eleventy (how templates work, managing of layouts, etc...).

Template Languages

11ty offers a dozen languages to use for template (to generate pages). As for layouts or landing pages where you might want to list the blogs you have, some sort of scripts are necessary. In the 11ty world, after little searching, I found that Liquid and Nunjucks are two simple (yet powerful) choices. While Liquid is better for basic needs Nunjucks seems to be better for bit more complex operations; it is capable of running some of the JavaScript functions also. I've only used Nunjucks for my layouts and template that includes script so far.

11ty - Template Languages

Layouts

You can create many layouts, and include them in your pages. Few points about layout worth noting are:

Layouts can be chained (or nested)
Layout can cascade data: Layouts can have a set of data attributes called Front Matter (or simply metadata). Upon using a layout in a page or in another layout this data is passed down and merged with the page (or layout).

Customizing

11ty is also capable of including CSS, JavaScript or Custom Fonts. You can also setup tailwindcss for styling.

Search

You can use pagefind to index your pages and implement simple search feature. If you need a demo on how it looks, the 11ty search is the best example!

I tried to keep the blog simple and short as possible. If you find any step missing or not mentioned properly drop a comment.

Checkout the source code of my website if you need reference, https://github.com/shinjith-dev/notes-v2

Good day!

Git Good: Best Practices for Branch Naming and Commit Messages

shinjith — Sat, 03 Feb 2024 10:08:40 +0000

Hello devs, I'm going to share a few best practices for using Git more effectively. git? Yes, the git you're already familiar with. The code buddy, your guardian angel that ensures your coding adventure runs smoothly, allows developers to collaborate effortlessly on projects.

Are you the one who creates branches and then forgets why they exist? The one always have to look for file changes to comprehend a commit? Here are some tips for you.

Why should I follow the standards?

Clarity and Understanding
Collaboration and Teamwork
Ease of Navigation and Maintenance
Documentation and Knowledge Transfer
Project Quality
Automated Changelogs
Optimizing CI/CD

Before You Read

Each seb-section under Branch Naming Conventions and Commit Message Conventions are ordered as basic, intermediate and advanced rules respectively.
You can follow upto any level of rules based on use case and relevance, anyways following conventions upto intermediate rules level is recommended.
Following contents are adapted and organised from resources provided in the reference section.

Branch Naming Conventions

Basics

Descriptive Names: A well-named branch gives immediate context for its purpose. Instead of generic names, choose clarity.
For example: feature/login, bugfix/navbar-overflow
Use Hyphens: Use hyphens to seperate words (or kebab case) in branch name, this ensures readability.
For instance, bugfix/fix-login-issue is more readable than bugfix/fixLoginIssue or bugfix/fix_login_issue.
Alphanumeric Lowercase Characters: Use only alphanumeric lowercase characters (a-z, 0–9) and hyphens. Avoid punctuation, spaces, underscores, or any special characters whenever possible.
Avoid Unneccessary Hyphens: Avoid unneccessary hyphens, like subsequent or trailing hyphens.
For instance, feat/new--login- is a bad practice.
Short and Effective: Keep branch names simple. While descriptive, they should also be concise enough to convey the goal at a glance.

Prefix or Type

Prefixing branches helps to organize them according to their purpose. This not only improves clarity, but also helps to automate workflows.
Some of the common branch type prefixes and their usage cases include:
- feature/: For developing new features,
- bugfix/: To fix bugs in the code. Often created associated to an issue.
- hotfix/: To fix critical bugs in the production.
- release/: To prepare a new release, typically used to do tasks such as last touches and revisions.
- docs/: Used to write, modify or correct documentation.
For example, feature/new-feature or release/version-1.0.0.

Including Ticket Numbers

If your project employs an issue tracking system such as Jira, or if it revises based on github issues or another comparable tool. Including the token for the issue in the branch name would make it simple to track. Example: feature/PROJ-123-footer-links

Commit Message Conventions

Final format for a commit message:

  <type>([optional scope]): <description>  # subject

  [optional body]

  [optional footer(s)]

Message Subject

Imperative Mood: Create commit messages in the imperative mood. Start with a verb to indicate what the commit does.
For example: Use fix: Fix bug #67 than fix: Fixed bug #67
Short and Summarized: Try to fit the subject line inside 50 characters to ensure that messages are readable in various Git tools, such as when using git log --oneline. Avoid trailing period and unneccessary words/symbols.
Capitalize the description: This is as easy as it sounds. Start subject line with a capital letter.

Type and Message Body

A type preifx in the subject line can be used to represent type of the changes included in the commit. Some of the commonly used types are:
- feat:: To summarize a new feature in the codebase.
- fix:: To address a fix to the codebase.
- build:, chore:, ci:, style:, refactor: are some other examples.
A scope can be added to a commit's type to offer additional contextual information, and it is enclosed in parenthesis, for example, feat(parser): Add the ability to parse arrays
A body can be added to the message to include detailed explanations in the commit.
Body is added by leaving a blank line after the subject line.
Wrap the body at 72 characters, ie. Use multple lines of body, where each line does not exceed 72 characters.

Footer and Extended Message Body

A footer is use to convey addiotional information regarding the commit, such as reviewed by, approved by, etc. Example:
- Signed-off-by: Alice <alice@example.com>
Breaking Change: A BREAKING CHANGE refers to rather important major changes in the codebase. It can represented by adding a ! after type/scope and/or by adding it with body or as footer

  chore!: drop support for Node 6

  BREAKING CHANGE: use JavaScript features not available in Node 6.

Multi-paragraph Body: In some circumstances, numerous paragraphs help to explain the goal of the commit in greater detail. Example: To describe what, why, and how, about a commit changes.

Examples

Various use case examples of commit messages may be found here.

Conclusion

Adhering to Git conventions is similar to speaking a common language. However, it is obvious that these standards or conventions are not enforced by any system; hence, the adaptation and extension of use of these standards is entirely up to us.

Embracing these habits will surely improve your Git experience and encourage a collaborative coding environment. Even though we can't follow these in a single blow, gradually adapting to them will undoubtedly make a difference.

I'm planning to write about Implementing Git Conventions with Husky, show your support with reactions and comments. Happy coding!

References

Thumbnail Photo by Yancy Min on Unsplash

Authentication & User Management in Nextjs App Router + TypeScript, 2023

shinjith — Thu, 28 Sep 2023 05:02:44 +0000

Setting up authentication on a react project with typescript is a difficult task. With the new Nextjs app router version, it is much more difficult to manage storage and cookies because it has gotten more complex and server-centric.

I'm here to share some code snippets for basic authentication and user management in Nextjs (>13) + typescript.

Prerequisite

Basic understanding of javascript and typescript
Basic knowledge of Nextjs/React

Steps involved

Setting up a nextjs project
Adding basic login page
Access and modify cookie using custom hook
Creating AuthContext.tsx to persist user
Including custom hooks for managing and modifying user
Implementation inside components

Setting up a nextjs project

We will be using the app router version of nextjs, which was recently released. Have a look on this page. It includes neccessary details and some FAQs.

Enter this command and answer the promt question to setup next project:

npx create-next-app@latest

Note: While answering, try to use recommended/default options.

Check this page for customized manual installations.

Install required packages

cd next13-auth  # Use your project-name instead
rm package-lock.json
yarn
yarn add axios formik next-client-cookies

I prefer using yarn over npm cli. However, you don't have to remove package.json if you are using npm commands.

Start server by running

yarn dev

Clean up the code that was generated by nextjs
Our final project structure looks like this:

Note: Refer docs for better undertanding of recommended nextjs project structure.

Adding basic login page

Add required type declaration for authentication

// /utils/types/auth.d.ts

export type TUser = {
  email: string;
  firstName: string;
  lastName: string;
};

export type AuthUser = {
  token: string;
  user: TUser;
};

export type TLogin = {
  email: string;
  password: string;
};

export type AuthResponse = {
  message: string;
  data?: AuthUser;
  success?: boolean;
};

Note: You might have to add/remove and structure types according to your needs and response format from backend!

Add login page to your app directory.

// /app/login/page.tsx

"use client";
import { TLogin } from "@/utils/types/auth";
import { Field, Form, Formik, FormikHelpers } from "formik";
import React from "react";

const Login = () => {
  const handleSubmit = (values: TLogin) => {
    console.log(values);
  };

  return (
    <div className="max-w-[100vw] p-5">
      <h3 className="mb-5 text-4xl font-medium">Login</h3>

      <Formik
        initialValues={{
          email: "",
          password: "",
        }}
        onSubmit={(
          values: TLogin,
          { setSubmitting }: FormikHelpers<TLogin>
        ) => {
          setTimeout(() => {
            handleSubmit(values);
            setSubmitting(false);
          }, 500);
        }}
      >
        <Form className="grid w-96 grid-cols-2 gap-3">
          <label htmlFor="email">Email</label>
          <Field
            id="email"
            name="email"
            placeholder="Enter email"
            type="email"
          />

          <label htmlFor="password">Password</label>
          <Field
            id="password"
            name="password"
            type="password"
            placeholder="Enter password"
          />

          <button
            type="submit"
            className="w-fit border border-black/75 px-4 py-1"
          >
            Submit
          </button>
        </Form>
      </Formik>
    </div>
  );
};

export default Login;

Note: I will only walk you through creating a login page; you should create/use a backend that can handle basic authentication requests. Also, populate your database with a user to test login action.

Access and modify cookie using custom hook

Create a custom hook useCookie.ts to modify cookie values

// /hooks/useCookie.ts

import { useCookies } from "next-client-cookies";

const useCookie = () => {
  const cookies = useCookies();

  const getCookie = (key: string) => cookies.get(key);

  const setCookie = (key: string, value: string) =>
    cookies.set(key, value, {
      expires: 2,
      sameSite: "None",
      secure: true,
    });

  const removeCookie = (key: string) => cookies.remove(key);

  return { setCookie, getCookie, removeCookie };
};

export default useCookie;

Create cookies.tsx and providers.tsx inside app directory

// /app/cookies.tsx

"use client";

import { CookiesProvider } from "next-client-cookies";

export const ClientCookiesProvider: typeof CookiesProvider = (props) => (
  <CookiesProvider {...props} />
);

// /app/providers.tsx

import { ClientCookiesProvider } from "./cookies";
import { cookies } from "next/headers";

export function Providers({ children }: React.PropsWithChildren) {
  return (
    <ClientCookiesProvider value={cookies().getAll()}>
      {children}
    </ClientCookiesProvider>
  );
}

Add provider.tsx as a wrapper inside layout

// /app/layout.tsx

<body className={`${outfit.className} relative min-h-screen w-screen`}>
  <Providers>
    <main className="w-screen">{children}</main>
  </Providers>
</body>

Refer this readme for detailed explaination.

Creating `AuthContext.tsx` to persist user

Create AuthContext.tsx

// /contexts/AuthContext.tsx

"use client";
import { ReactNode, createContext, useEffect, useState } from "react";
import { AuthUser } from "@/utils/types/auth";
import useCookie from "@/hooks/useCookie";

interface TAuthContext {
  user: AuthUser | null;
  setUser: (user: AuthUser | null) => void;
}

export const AuthContext = createContext<TAuthContext>({
  user: null,
  setUser: () => {},
});

interface Props {
  children: ReactNode;
}

export const AuthProvider = ({ children }: Props) => {
  const [user, setUser] = useState<AuthUser | null>(null);
  const { getCookie } = useCookie();

  useEffect(() => {
    if (!user) {
      let existingUser = null;
      const getFromCookie = async () => (existingUser = getCookie("user"));
      getFromCookie();

      if (existingUser) {
        try {
          setUser(JSON.parse(existingUser));
        } catch (e) {
          console.log(e);
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

Add AuthProvider in providers.tsx

// /app/provider.tsx

<ClientCookiesProvider value={cookies().getAll()}>
  <AuthProvider>{children}</AuthProvider>
</ClientCookiesProvider>

Including custom hooks for managing and modifying user

This custom hooks are basically an extension that makes accessing and modifying user in authentication and other components easier without using cookies methods directly.

Add useAuth.ts to manage auth API requests and their response

// /hooks/useAuth.ts

import { useUser } from "./useUser";
import config from "@/utils/config";
import axios from "axios";
import { AuthResponse, TLogin, TRegister } from "@/utils/types/auth";
import useCookie from "./useCookie";

const API_URL = config.BACKEND_URL;

export const useAuth = () => {
  const { user, addUser, removeUser } = useUser();

  const { getCookie } = useCookie();

  const refresh = () => {
    let existingUser = null;
    const getFromCookie = async () => (existingUser = getCookie("user"));
    getFromCookie();

    if (existingUser) {
      try {
        addUser(JSON.parse(existingUser));
      } catch (e) {
        console.log(e);
      }
    }
  };

  const register = async (creds: TRegister) => {
    return await axios
      .post(`${API_URL}auth/register`, creds)
      .then((res) => {
        if (res.data?.data && res.data.data?.token) addUser(res.data.data);
        return res.data as AuthResponse;
      })
      .catch((err) => {
        if (err && err?.response && err.response?.data)
          return { ...err.response.data, success: false } as AuthResponse;
        else return err as AuthResponse;
      });
  };

  const login = async (creds: TLogin) => {
    return await axios
      .post(`${API_URL}auth/login`, creds)
      .then((res) => {
        if (res.data?.data && res.data.data?.token) addUser(res.data.data);
        return res.data as AuthResponse;
      })
      .catch((err) => {
        if (err && err?.response && err.response?.data)
          return { ...err.response.data, success: false } as AuthResponse;
        else return err as AuthResponse;
      });
  };

  const logout = () => {
    removeUser();
  };

  return { user, login, register, logout, refresh };
};

Update authentication requests and response handling according to you backend.

Add useUser.ts to export functions to add/remove user

// /hooks/useUser.ts

import { useContext } from "react";
import { AuthContext } from "../contexts/AuthContext";
import { AuthUser } from "@/utils/types/auth";
import useCookie from "./useCookie";

export const useUser = () => {
  const { user, setUser } = useContext(AuthContext);
  const { setCookie, removeCookie } = useCookie();

  const addUser = (user: AuthUser) => {    
    setUser(user);
    setCookie("user", JSON.stringify(user));
  };

  const removeUser = () => {
    setUser(null);
    removeCookie("user");
  };

  return { user, addUser, removeUser };
};

Implementation inside components

Update your login submit handler function with login auth function

// /app/login/page.tsx

const handleSubmit = (values: TLogin) => {
  console.log(values);

  login(values)
    .then((data) => {
      if (data?.success) {
        // add your code for post successful login here
        setTimeout(() => {
          router.push("/");
        }, 1000);
      } else console.log(data.message);
    })
    .catch((err) => {
      console.log(err);
    });
};

Finally, use this value across your components

example:

// /app/page.tsx

"use client";
import { useUser } from "@/hooks/useUser";
import Link from "next/link";

export default function Home() {
  const { user } = useUser();

  return (
    <div className="p-5">
      <h2 className="text-3xl font-medium">Hello Nextjs</h2>

      <p className="my-5 text-sm font-mono">
        Cookie-user: <pre>{JSON.stringify(user, undefined, 4)}</pre>
      </p>

      <Link
        href={"/login"}
        className="py-1 px-4 border border-black/75"
      >
        Login
      </Link>
    </div>
  );
}

Source code: nextjs-auth

Conclusion

I tried to make it as broad as possible. Changes and upgrades should be made based on your use cases.
I couldn't find any helpful blogs on this topic, so I'm hoping this can help someone who is looking for something similar. Please feel free to make any recommendations. Thank you for your time!

TCP Connections in C: A Socket Programming Guide

shinjith — Thu, 10 Aug 2023 18:58:23 +0000

We are all aware that programming languages and frameworks are growing at a breakneck pace. It may appear irrelevant to learn C programs to build network connections. But wait, why don't we delve into the golden age of programming and build some simple programs to pique our interest in the underhood workings of our well-built tech setup?

My idea is simple; I just want to present a short code snippet that shows how to establish up a tcp or udp connection and transport data over it in C.

Setup server
Setup client
Run server and client executables
Additional setups

1. Setup server

Declare client and server structures variables and other neccessary variables:

struct sockaddr_in client, server;
int lfd, n, confd;
char r_buff[100] = "", s_buff[100] = "";

Create a tcp socket using socket() and assign values to server structure:
```
lfd = socket(AF_INET, SOCK_STREAM, 0);
server.sin_family = AF_INET;
server.sin_port = 2000;
server.sin_addr.s_addr = inet_addr("127.0.0.1");
```
Here AF_INET is the address family, SOCK_STREAM is the type and 0 is for the default protocol.
Bind the socket with address and server structure using bind() and listen for connection using listen():
```
bind(lfd, (struct sockaddr *)&server, sizeof server);
listen(lfd, 1);
```

Accept the connection from client using accept():

n = sizeof client;
confd = accept(lfd, (struct sockaddr *)&client, &n);

Receive message from client using recv():

recv(confd, r_buff, sizeof r_buff, 0);
printf("\n[client] %s", r_buff);

send message back to client using send()

printf("\nserver: ");
gets(s_buff);
send(confd, s_buff, sizeof s_buff, 0);

Stop socket and end connection using close()
```
close(confd);
close(lfd);
```

Final code for server.c

#include <arpa/inet.h>
#include <netinet/in.h>
#include <stdio.h>
#include <string.h>
#include <sys/socket.h>
#include <sys/stat.h>
#include <sys/types.h>

int main() {
    struct sockaddr_in client, server;
    int lfd, n, confd;
    char r_buff[100] = "", s_buff[100] = "";

    lfd = socket(AF_INET, SOCK_STREAM, 0);
    server.sin_family = AF_INET;
    server.sin_port = 2000;
    server.sin_addr.s_addr = inet_addr("127.0.0.1");

    bind(lfd, (struct sockaddr *)&server, sizeof server);
    listen(lfd, 1);

    n = sizeof client;
    confd = accept(lfd, (struct sockaddr *)&client, &n);

    while (1) {
        recv(confd, r_buff, sizeof r_buff, 0);
        printf("\n[client] %s", r_buff);
        if (strcmp(r_buff, "exit") == 0)
            break;

        printf("\nserver: ");
        gets(s_buff);
        send(confd, s_buff, sizeof s_buff, 0);
        if (strcmp(s_buff, "exit") == 0)
            break;
        printf("\n");
    }

    close(confd);
    close(lfd);

    return 0;
}

2. Setup client

Declare server structure variable and neccessary variables:

struct sockaddr_in server;
int lfd;
char r_buff[100] = "", s_buff[100] = "";

Create a tcp socket using socket() and assign values to server structure:

lfd = socket(AF_INET, SOCK_STREAM, 0);
server.sin_family = AF_INET;
server.sin_port = 2000;
server.sin_addr.s_addr = inet_addr("127.0.0.1");

Connect to server using connect():

connect(lfd, (struct sockaddr *)&server, sizeof server);

Send message to server using send():

printf("\nclient: ");
gets(s_buff);
send(lfd, s_buff, sizeof s_buff, 0);

Receive back message from server using recv():

recv(lfd, r_buff, sizeof r_buff, 0);
printf("[server] %s", r_buff);

Stop socket and end connection using close()
```
close(lfd);
```

Final code for client.c

#include <arpa/inet.h>
#include <netinet/in.h>
#include <stdio.h>
#include <string.h>
#include <sys/socket.h>
#include <sys/stat.h>
#include <sys/types.h>

int main() {
struct sockaddr_in server;
int lfd;
char r_buff[100] = "", s_buff[100] = "";

lfd = socket(AF_INET, SOCK_STREAM, 0);
server.sin_family = AF_INET;
server.sin_port = 2000;
server.sin_addr.s_addr = inet_addr("127.0.0.1");

connect(lfd, (struct sockaddr *)&server, sizeof server);

while (1) {
    printf("\nclient: ");
    gets(s_buff);
    send(lfd, s_buff, sizeof s_buff, 0);
    if (strcmp(s_buff, "end") == 0)
    break;

    recv(lfd, r_buff, sizeof r_buff, 0);
    printf("[server] %s", r_buff);
    if (strcmp(r_buff, "end") == 0)
    break;

    printf("\n");
}

close(lfd);

return 0;
}

Note: The system calls socket(), bind(), listen(), connect(), accept(), send(), and recv() in the above programs are imported from libraries that may only operate in linux distributions (os); obviously, these programs cannot be executed in other operating systems such as Windows.

3. Run server and client executables

Compile server and client code

gcc server.c -o server.out
gcc client.c -o client.out

Execute server and client (in the respective order)

# in terminal-1 or system-1
./server.out

# in terminal-2 or system-2
./client.out

Make sure to execute them in different terminals
(or different systems if you are assigned a public IP address)

If everything is fine, you can expect something like this.
- client
- server

4. Additional setups

logging requests into a file
- Edit server.c and add,
```
FILE *fp;
fp = fopen("log.txt", "a");

fputs(r_buff, fp);
fputs("\t", fp);
fputs(s_buff, fp);
fputs("\n", fp);
fclose(fp);
```
  Make sure not to use only fputs() inside loops; in that case, you may need to use fopen() and fclose() within the loop body at the beginning and end, respectively.
You can try adding functions like prime number checker, palindrome checker, etc to make this program more useful

Movie Loft - A Movie DB API Client

shinjith — Fri, 28 Oct 2022 12:18:44 +0000

Hello DEVs,
Check out this react app I made as a begginer. To put it simply, this app is a client of TMDB's API.

It displays a list of Popular, Now playing, and Top Rated movies/tv_shows on the homepage, as well as a search bar.

It obviously has a search result page that displays the entire search result array from the API response.

And a separate page rendered for each movie/tv_show when the resulting card from the search result or homepage list is clicked.

Have a look on this live site: Movie Loft

If this project intrigues you, you can find the source code here: Github

If you're unfamiliar with APIs, here's how I set one up,

Setup API

Sign up on TMDB website
On mainpage, go to top right avatar icon>settings>API or follow this link
Request for API_KEY
Once you've obtained your key, assign it as the default Authorization header of axios requests,
```
axios.defaults.headers.common["Authorization"] = 
    `Bearer ${<API_KEY>}`;
```
(Axios is a Javascript library used to make HTTP requests)
Now, follow the Developer docs to start making requests.

In addition, to save time on UI development, I've used Material UI.

Thank you for your time. Have a wonderful day <3

Drum Kit - JavaScript project for begginers

shinjith — Sat, 17 Sep 2022 13:04:56 +0000

Hey folks, the process of learning javascript is often fun-filled.

Check this straightforward project to learn about keybinding, sound response, configuring dom listners, etc..

If you want to watch the preview on the live website:
Open Website

Show code on github

JavaScript Calculator

shinjith — Sun, 13 Feb 2022 09:52:16 +0000

Here is my second project,

It's a simple JavaScript Calculator with an awesome classic UI..
It is made using pure JavaScript.

Supported

-Simple arithmetic calculations: addition, subtraction, multiplication and division,

-Floating points.

Not Supported

-Complex calculations (like a scientific calculator),

-Negative values,

-Exponential values.

Don't forget to give a ⭐ on github❤️.

First Project - ChatApp

shinjith — Thu, 27 Jan 2022 03:37:05 +0000

Hey, hope you guys are doing well. I'm new here and also to the community :p.
Here is something I coded as a beginner project.

Simple Front-end for Chat system. Made using HTML, CSS, JavaScript.

I know the code is not that great. Also I'm not good at back-end languages, someone please explain the best language I can use for this project. Thanks in advance.

First Project :)

shinjith — Wed, 26 Jan 2022 09:35:05 +0000

Hey, hope you guys are doing well. I'm new here and also to the community :p.
Here is something I coded as a beginner project.

See the Pen
ChatApp by WhiteWolfDot (@whitewolfdot)
on CodePen.

I know the code is not that great. Also I'm not good at back-end languages, someone please explain the best language I can use for this project. Thanks in advance.

DEV Community: shinjith

Git Good: Automating Commit Message Standards with Husky and Commitlint

Husky Setup

Install and Configure Commitlint

Configuration

Add Hook

Test Commitlint

Escape Hatch

Conclusion

References

The Complete Company Landing Page - Holistic Webdev Challenge

What I Built

Demo

Journey

Screenshots

Conclusion

Create a Blogging Platform With No Backend (Zero Hosting Charge)

Why 11ty or Decap?

1. Create a 11ty Project

Create a blank directory and initialize node project by creating a package.json

Install 11ty package to you project

Add some contents

Add script to run eleventy in package.json

Run the project

Adding Blogs

Hosting

2. Integrate Decap CMS

Install Decap

Add Netlify Identity

Final Glow Up

Template Languages

Layouts

Customizing

Search

Git Good: Best Practices for Branch Naming and Commit Messages

Why should I follow the standards?

Before You Read

Branch Naming Conventions

Basics

Prefix or Type

Including Ticket Numbers

Commit Message Conventions

Message Subject

Type and Message Body

Footer and Extended Message Body

Examples

Conclusion

References

Authentication & User Management in Nextjs App Router + TypeScript, 2023

Prerequisite

Steps involved

Setting up a nextjs project

Adding basic login page

Access and modify cookie using custom hook

Creating AuthContext.tsx to persist user

Including custom hooks for managing and modifying user

Implementation inside components

Conclusion

TCP Connections in C: A Socket Programming Guide

contents

1. Setup server

2. Setup client

3. Run server and client executables

4. Additional setups

Movie Loft - A Movie DB API Client

Setup API

Drum Kit - JavaScript project for begginers

JavaScript Calculator

Supported

Not Supported

First Project - ChatApp

First Project :)

Create a blank directory and initialize node project by creating a `package.json`

Add script to run eleventy in `package.json`

Creating `AuthContext.tsx` to persist user