DEV Community: Rohitash Singh

Resume Builder SaaS — Mux Developer Challenge Submission

Rohitash Singh — Mon, 05 Jan 2026 06:34:47 +0000

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

Have you ever finished a resume and still felt something was missing?
Code Chisel Resume was built to turn skills into resumes that actually make sense.

My Pitch Video

What I Built

I built Code Chisel, a Resume Builder SaaS designed to make
resume creation simple, structured, and stress-free.

The platform helps users create professional, ATS-friendly resumes
using a clean interface and a real-time preview.
Instead of worrying about formatting, spacing, or layout,
users can focus on writing good content while the system handles the design.

Code Chisel is built for both freshers and working professionals
who want a fast and reliable way to build resumes
without using complicated tools or outdated templates.

The resume updates instantly as users enter their details,
which makes it easy to understand how the final resume will look.
This reduces trial-and-error and saves a lot of time.

— OR —

Demo

Live Application: https://codechisel-resume.vercel.app

Login credentials:

User Credentials:
Username:test@gmail.com
Password:123456
Admin Credentials:
Username: testadmin@gmail.com
Password: 123456

The Story Behind It

Many job seekers struggle with resume formatting, structure,
and presenting their skills effectively.

I built this Resume Builder SaaS to provide a guided,
easy-to-use experience that focuses on content clarity
rather than design complexity.

Technical Highlights

Frontend built with modern React-based architecture
Real-time resume preview while editing
Clean and responsive UI for all devices
Scalable SaaS-style structure

Use of Mux

I used Mux to handle video uploading, encoding,
and adaptive streaming for my product demo and onboarding video.

Mux also provides audio normalization and auto-generated captions,
which improved playback quality and accessibility.

Using Mux allowed me to focus on building the product
without worrying about video infrastructure.

🔑 Key Features of Code Chisel

A scalable, JSON-driven Resume Builder SaaS with real-time preview, controlled downloads, and admin-friendly architecture.

JSON-Driven Resume Templates – Fully configurable templates without hard-coded layouts

Live Resume Preview – Real-time updates as users edit their data

Pixel-Perfect PDF Export – Print-ready PDFs generated from the same template config

Multiple Resume Management – Create, edit, and manage multiple resumes from one dashboard

Download Limits & Tracking – Usage-based download control per user plan

Flexible Subscription Plans – Custom pricing, limits, and validity managed by admins

Super Admin Dashboard – Centralized control for users, templates, plans, and system settings

Detailed Usage Logs – Track resume downloads with user-level history

Theme & UI Customization – Control colors, layout styles, and overall UI

Scalable SaaS Architecture – Easily extend with new templates and features

🆚 Code Chisel vs Traditional Resume Builders

Code Chisel replaces rigid, hard-coded resume builders with a flexible, JSON-driven, scalable SaaS architecture.

Feature	Traditional Resume Builders	Code Chisel (Your SaaS)
Template Architecture	🔴 Hard-coded layouts	🟢 Fully JSON-driven templates
Live Resume Preview	🔴 Limited / delayed refresh	🟢 Real-time dynamic preview
PDF Generation	🔴 Separate PDF logic	🟢 Same config → pixel-perfect PDF
Multiple Resume Support	🔴 Mostly single resume	🟢 Manage multiple resumes
Download Control	🔴 No tracking or limits	🟢 Plan-based limits & tracking
Subscription Flexibility	🔴 Fixed or manual plans	🟢 Custom plans & pricing
Admin Control	🔴 Basic admin access	🟢 Powerful super admin dashboard
Usage & Download Logs	🔴 Not available	🟢 Detailed user-level logs
Theme & UI Control	🔴 Fixed UI	🟢 Theme & layout customization
Scalability	🔴 Hard to extend	🟢 SaaS-ready & scalable architecture

Closing Thoughts

Building this Resume Builder SaaS was a hands-on learning experience
in designing user-focused software and scalable systems.

Using Mux made it easy to present the product clearly through video
without dealing with encoding or playback issues.

I’m excited to iterate further, improve onboarding,
and continue building developer-friendly solutions like this.

Building a Clean Rich Text Editor with Tiptap in Next.js (Real Project Setup)

Rohitash Singh — Thu, 01 Jan 2026 04:42:53 +0000

When you build a dashboard or a SaaS app, at some point you need a real text editor — not a textarea, not a fake markdown box.

You need:

headings
lists
formatting
clean HTML output
full control over UI

That’s where Tiptap fits perfectly.

This blog shows how I’m using Tiptap Editor in a Next.js + React dashboard, with a custom toolbar, Tailwind styling, and HTML output ready to save in a database.

This is not a demo.
This is real dashboard code.

The Page Where Editor Is Used

This is a Next.js client component inside a dashboard layout.
The editor is used for building resume-like structured content.

"use client";

import DashboardLayout from "@/components/(user-dashboard)/layout/DashboardLayout";
import DiagonalDivider from "@/components/(user-dashboard)/components/DiagonalDivider";
import { useState } from "react";
import TipTapEditorMinimal from "@/components/(editors)/RichTextEditor/TipTapEditorMinimal";
import PrimaryButton from "@/components/Common/ui/PrimaryButton";
import { FaFile } from "react-icons/fa";
import { FileChartColumn } from "lucide-react";

export default function ResumesPage() {
  const [resumeHtml, setResumeHtml] = useState("");
  const [resumeJson, setResumeJson] = useState(null);

  const handleResumeChange = (html: string, json: any) => {
    setResumeHtml(html);
    setResumeJson(json);
    // Save to your Database via API route
  };

  const [post, setPost] = useState("");

  const onChange = (content: string) => {
    setPost(content);
  };

  const initialTemplate = `
    <h2>Professional Summary</h2>
    <p>Full-stack developer with expertise in MERN stack, Next.js, and Tailwind CSS.</p>

    <h2>Experience</h2>
    <ul>
      <li>Software Engineer at XYZ Corp (2023-Present)</li>
    </ul>
  `;

  return (
    <>
      <DashboardLayout>
        <div className="mx-auto max-w-6xl">
          <div className="rounded-xl border border-gray-300 backdrop-blur-sm dark:border-gray-800">
            <div className="relative rounded-xl bg-white p-6 dark:bg-gray-900">
              <div className="bg-primary absolute top-8 left-0 h-10 w-[4px] -translate-x-1/2 rounded-full" />
              <div className="flex items-center gap-4">
                <FileChartColumn className="text-primary h-10 w-10" />
                <div>
                  <h1 className="text-3xl font-bold">Resumes</h1>
                  <p className="text-gray-600">
                    Track all your resume download activities
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mx-auto mt-10 mb-10 max-w-6xl">
          <div className="rounded-xl border border-gray-300 backdrop-blur-sm dark:border-gray-800">
            <div className="relative rounded-xl bg-white p-6 dark:bg-gray-900">
              <h1 className="mb-6 text-3xl font-bold">
                Resume Builder
              </h1>

              <TipTapEditorMinimal content={post} onChange={onChange} />

              <div className="mt-6 rounded-lg border p-4">
                <p>{resumeHtml.length} characters</p>

                <PrimaryButton
                  className="mt-4"
                  onClick={() => {
                    console.log("Save resume:", {
                      html: resumeHtml,
                      json: resumeJson,
                    });
                  }}
                >
                  Save Resume
                </PrimaryButton>
              </div>
            </div>
          </div>
        </div>
      </DashboardLayout>
    </>
  );
}

Minimal Tiptap Editor Component

This component handles:

editor setup
extensions
HTML output
Tailwind styling

"use client";

import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import React from "react";
import TextAlign from "@tiptap/extension-text-align";
import Highlight from "@tiptap/extension-highlight";
import MenuBar from "./MenuBar";

interface RichTextEditorProps {
  content: string;
  onChange: (content: string) => void;
}

export default function TipTapEditorMinimal({
  content,
  onChange,
}: RichTextEditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        bulletList: {
          HTMLAttributes: {
            class: "list-disc ml-4 my-2",
          },
        },
        orderedList: {
          HTMLAttributes: {
            class: "list-decimal ml-4 my-2",
          },
        },
      }),
      TextAlign.configure({
        types: ["heading", "paragraph"],
      }),
      Highlight,
    ],
    content: content,
    editorProps: {
      attributes: {
        class:
          "h-[230px] overflow-y-auto p-4 border rounded-b-md outline-none prose",
      },
    },
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
    immediatelyRender: false,
  });

  return (
    <div>
      {editor && <MenuBar editor={editor} />}
      {editor && <EditorContent editor={editor} />}
    </div>
  );
}

Custom Toolbar (MenuBar)

This toolbar is fully custom — no default Tiptap UI.

It supports:

headings
bold / italic / strike
alignment
lists
highlight

import React, { useEffect, useState } from "react";
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Heading1,
  Heading2,
  Heading3,
  Highlighter,
  Italic,
  List,
  ListOrdered,
  Strikethrough,
} from "lucide-react";
import { Editor } from "@tiptap/react";
import { Toggle } from "../../Common/ui/Toggle";

export default function MenuBar({ editor }: { editor: Editor | null }) {
  const [, forceUpdate] = useState({});

  useEffect(() => {
    if (!editor) return;
    const updateHandler = () => forceUpdate({});
    editor.on("selectionUpdate", updateHandler);
    editor.on("transaction", updateHandler);
    return () => {
      editor.off("selectionUpdate", updateHandler);
      editor.off("transaction", updateHandler);
    };
  }, [editor]);

  if (!editor) return null;

  return (
    <div className="flex flex-wrap gap-1 border rounded-t-md p-2">
      <Toggle onPressedChange={() => editor.chain().focus().toggleBold().run()}>
        <Bold />
      </Toggle>

      <Toggle onPressedChange={() => editor.chain().focus().toggleItalic().run()}>
        <Italic />
      </Toggle>

      <Toggle onPressedChange={() => editor.chain().focus().toggleStrike().run()}>
        <Strikethrough />
      </Toggle>

      <Toggle onPressedChange={() => editor.chain().focus().toggleBulletList().run()}>
        <List />
      </Toggle>

      <Toggle onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}>
        <ListOrdered />
      </Toggle>

      <Toggle onPressedChange={() => editor.chain().focus().toggleHighlight().run()}>
        <Highlighter />
      </Toggle>
    </div>
  );
}

Toggle Component (Radix + Tailwind)

"use client";

import * as React from "react";
import * as TogglePrimitive from "@radix-ui/react-toggle";
import { cva } from "class-variance-authority";
import { cn } from "@/utils/editorUtils";

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md transition",
  {
    variants: {
      size: {
        default: "h-9 w-9",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
);

function Toggle({ className, ...props }: React.ComponentProps<typeof TogglePrimitive.Root>) {
  return (
    <TogglePrimitive.Root
      className={cn(toggleVariants(), className)}
      {...props}
    />
  );
}

export { Toggle };

Utility Function

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: any[]) {
  return twMerge(clsx(inputs));
}

Final Thoughts

Tiptap gives you freedom.

No forced UI.
No opinionated styles.
No hacks.

You control:

markup
toolbar
output
performance

If you’re building:

a dashboard
a SaaS editor
a content builder

This setup works cleanly and reliably in real projects.

No magic.
Just solid React code.

I Built a Testimonial Carousel That Actually Feels Alive (Next.js + Tailwind CSS)

Rohitash Singh — Wed, 31 Dec 2025 12:41:38 +0000

When I was building my landing page, I didn’t want a boring slider.
I wanted something that moves smoothly, feels real, and works on every device.

This blog is about that exact carousel.
No fake demo. No shortcut code.
This is production-ready, fully working, and used in a real project.

What This Carousel Does (In Simple Words)

Shows real testimonials
Works on mobile, tablet, desktop
Supports swipe (touch + mouse)
Smooth Framer Motion animation
Built using Next.js + React + Tailwind CSS

And most important —
👉 Every line of code below is actually used

How I Use the Component

<SectionSliderTestimonials testimonials={TESTIMONIALS} />

Testimonial Data

const TESTIMONIALS = [
  {
    id: "1",
    name: "Aman Sharma",
    role: "Software Engineer",
    quote:
      "I rebuilt my resume in 10 minutes and started getting interview calls within a week.",
    rating: 5,
  },
  {
    id: "2",
    name: "Neha Verma",
    role: "Fresher",
    quote:
      "The ATS-friendly templates made a huge difference. Much better than Word or Canva.",
    rating: 5,
  },
  {
    id: "3",
    name: "Rohit Singh",
    role: "Product Manager",
    quote:
      "Clean design, easy editing, and perfect formatting. Exactly what recruiters expect.",
    rating: 4,
  },
  {
    id: "4",
    name: "Priyanka Rawat",
    role: "Product Manager",
    quote:
      "Clean design, easy editing, and perfect formatting. Exactly what recruiters expect.",
    rating: 4,
  },
];

Main Slider Component (Heart of the Carousel)

"use client";

import React, { FC, useEffect, useState } from "react";
import Heading from "../shared/Heading";
import { AnimatePresence, motion, MotionConfig } from "framer-motion";
import { useSwipeable } from "react-swipeable";
import PrevBtn from "../shared/PrevBtn";
import NextBtn from "../shared/NextBtn";
import { useWindowSize } from "react-use";
import { variants } from "@/utils/animationVariants";
import { TestimonialType } from "@/types/slider";
import TestimonialCard from "../CardsCategory/TestimonialCard";

interface Props {
  heading?: string;
  subHeading?: string;
  testimonials: TestimonialType[];
  itemPerRow?: 1 | 2 | 3;
}

const SectionSliderTestimonials: FC<Props> = ({
  heading = "Loved by job seekers",
  subHeading = "Real stories from professionals who landed interviews",
  testimonials,
  itemPerRow = 3,
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [direction, setDirection] = useState(0);
  const [items, setItems] = useState(1);

  const width = useWindowSize().width;

  useEffect(() => {
    if (width < 640) return setItems(1);
    if (width < 1024) return setItems(2);
    setItems(itemPerRow);
  }, [width, itemPerRow]);

  const changeIndex = (val: number) => {
    setDirection(val > currentIndex ? 1 : -1);
    setCurrentIndex(val);
  };

  const handlers = useSwipeable({
    onSwipedLeft: () =>
      currentIndex < testimonials.length - 1 &&
      changeIndex(currentIndex + 1),
    onSwipedRight: () =>
      currentIndex > 0 && changeIndex(currentIndex - 1),
    trackMouse: true,
  });

  if (!items) return null;

  return (
    <section className="relative py-24 container mx-auto px-4 py-10 sm:px-0">
      <Heading desc={subHeading} isCenter>
        {heading}
      </Heading>

      <MotionConfig
        transition={{
          x: { type: "spring", stiffness: 300, damping: 30 },
          opacity: { duration: 0.2 },
        }}
      >
        <div className="relative mt-14" {...handlers}>
          <div className="overflow-hidden">
            <motion.ul className="whitespace-nowrap -mx-2 xl:-mx-4">
              <AnimatePresence initial={false} custom={direction}>
                {testimonials.map((item, index) => (
                  <motion.li
                    key={item.id}
                    className="inline-block px-2 xl:px-4"
                    custom={direction}
                    initial={{ x: `${(currentIndex - 1) * -100}%` }}
                    animate={{ x: `${currentIndex * -100}%` }}
                    variants={variants(200, 1)}
                    style={{
                      width: `calc(100% / ${items})`,
                    }}
                  >
                    <TestimonialCard testimonial={item} />
                  </motion.li>
                ))}
              </AnimatePresence>
            </motion.ul>
          </div>

          {currentIndex > 0 && (
            <PrevBtn
              onClick={() => changeIndex(currentIndex - 1)}
              className="w-9 h-9 xl:w-12 xl:h-12 absolute -left-3 xl:-left-6 top-1/2 -translate-y-1/2"
            />
          )}

          {testimonials.length > currentIndex + items && (
            <NextBtn
              onClick={() => changeIndex(currentIndex + 1)}
              className="w-9 h-9 xl:w-12 xl:h-12 absolute -right-3 xl:-right-6 top-1/2 -translate-y-1/2"
            />
          )}
        </div>
      </MotionConfig>
    </section>
  );
};

export default SectionSliderTestimonials;

Animation Logic (Simple but Powerful) [animationVariants.ts]

export const variants = (x = 1000, opacity = 0) => ({
  enter: (direction: number) => ({
    x: direction > 0 ? x : -x,
    opacity,
  }),
  center: {
    x: 0,
    opacity: 1,
  },
  exit: (direction: number) => ({
    x: direction < 0 ? x : -x,
    opacity,
  }),
});

👉 Slide feels natural, not robotic.

Testimonial Card (Clean & Honest UI)

import { FC } from "react";
import { Star } from "lucide-react";
import { TestimonialType } from "@/types/slider";

interface Props {
  testimonial: TestimonialType;
}

const TestimonialCard: FC<Props> = ({ testimonial }) => {
  return (
    <div className="flex h-full flex-col justify-between rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:bg-white/5">
      <div>
        <div className="flex gap-1">
          {Array.from({ length: testimonial.rating }).map((_, i) => (
            <Star
              key={i}
              className="h-4 w-4 fill-yellow-400 text-yellow-400"
            />
          ))}
        </div>

        <p className="mt-4 text-sm text-zinc-700 dark:text-white/80">
          “{testimonial.quote}”
        </p>
      </div>

      <div className="mt-6 border-t pt-4">
        <p className="text-sm font-medium">{testimonial.name}</p>
        <p className="text-xs text-zinc-500">{testimonial.role}</p>
      </div>
    </div>
  );
};

export default TestimonialCard;

Heading Section (Clean & Honest UI)

import React, { HTMLAttributes, ReactNode } from "react";

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  fontClass?: string;
  desc?: ReactNode;
  isCenter?: boolean;
}

const Heading: React.FC<HeadingProps> = ({
  children,
  desc = "Discover the most outstanding articles in all topics of life. ",
  className = "mb-10 text-neutral-900 dark:text-neutral-50",
  isCenter = false,
  ...args
}) => {
  return (
    <div className={`nc-Section-Heading relative ${className}`}>
      <div
        className={
          isCenter ? "text-center w-full max-w-2xl mx-auto mb-4" : "max-w-2xl"
        }
      >
        <h2 className={`text-3xl md:text-4xl font-semibold`} {...args}>
          {children || `Section Heading`}
        </h2>
        {desc && (
          <span className="block mt-2 md:mt-3 font-normal text-base sm:text-lg text-neutral-500 dark:text-neutral-400">
            {desc}
          </span>
        )}
      </div>
    </div>
  );
};

export default Heading;

Previous Button

import twFocusClass from "@/utils/twFocusClass";
import React, { ButtonHTMLAttributes, FC } from "react";
import { ChevronLeft } from "lucide-react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}

const PrevBtn: FC<Props> = ({ className = "w-10 h-10", disabled, ...args }) => {
  return (
    <button
      disabled={disabled}
      className={`PrevBtn ${className}
        bg-white dark:bg-neutral-900
        border border-neutral-200 dark:border-neutral-700
        rounded-full inline-flex items-center justify-center
        text-neutral-700 dark:text-neutral-200
        hover:bg-neutral-50 dark:hover:bg-neutral-800
        hover:text-neutral-900 dark:hover:text-white
        disabled:opacity-40 disabled:cursor-not-allowed
        transition-colors
        ${twFocusClass()}
      `}
      {...args}
    >
      <ChevronLeft className="w-5 h-5" />
    </button>
  );
};

export default PrevBtn;

Next Button

import twFocusClass from "@/utils/twFocusClass";
import React, { ButtonHTMLAttributes, FC } from "react";
import { ChevronLeft } from "lucide-react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}

const PrevBtn: FC<Props> = ({ className = "w-10 h-10", disabled, ...args }) => {
  return (
    <button
      disabled={disabled}
      className={`PrevBtn ${className}
        bg-white dark:bg-neutral-900
        border border-neutral-200 dark:border-neutral-700
        rounded-full inline-flex items-center justify-center
        text-neutral-700 dark:text-neutral-200
        hover:bg-neutral-50 dark:hover:bg-neutral-800
        hover:text-neutral-900 dark:hover:text-white
        disabled:opacity-40 disabled:cursor-not-allowed
        transition-colors
        ${twFocusClass()}
      `}
      {...args}
    >
      <ChevronLeft className="w-5 h-5" />
    </button>
  );
};

export default PrevBtn;

Utils (twFocusClass)

export default function twFocusClass(hasRing = false) {
  if (!hasRing) {
    return "focus:outline-none";
  }
  return "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-6000 dark:focus:ring-offset-0";
}

Final Thoughts (From One Developer to Another)

I didn’t build this carousel to show off animation.
I built it so users can feel trust when they read testimonials.

If you’re building:

a SaaS landing page
a portfolio
or a product website

This testimonial carousel is part of a separate SaaS application I’m working on.

I’m also building ZenithX (zenithx.in), where I experiment with the same principles — clean UI, smooth motion, and performance-first components.

Everything shared here comes from real usage, not theory.

This carousel just works — no hacks, no magic.

The Frontend Challenge

Rohitash Singh — Sat, 30 Mar 2024 13:29:45 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I designed the given HTML layout with appropriate design colors, backgrounds, and SVG backgrounds. This form facilitates camp activity inquiries. Upon submission, it triggers a modal popup displaying the selected activity, any food allergies, and additional information provided by the user.
I always care about the user experience.

Demo

Journey

Throughout this process, I figured out the importance of user experience, which can greatly enhance the overall design. Creating a form that not only looks appealing but also functions effectively has been a rewarding experience, leaving me feeling accomplished.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.

Happy coding 🚀

A Beginner's Guide to Running a MERN Stack Application Locally

Rohitash Singh — Sun, 17 Mar 2024 09:27:45 +0000

Running a MERN (MongoDB, Express.js, React.js, Node.js) stack application locally is a crucial step in the development process. This guide aims to walk beginners through the steps required to set up and run a MERN application on their local machine. By following these steps, you'll have a fully functional MERN application running locally, ready for development or testing.

1. Install Required Software:
Before getting started, ensure that you have the following software installed on your machine:

Node.js: Visit the official Node.js website (https://nodejs.org) and download the latest version for your operating system. Follow the installation instructions provided.
Note: In this tutorial, I am using a MongoDB online URI.

2. Set Up MongoDB Atlas:

MongoDB Atlas is a cloud-based database service that allows you to set up, manage, and scale MongoDB databases easily.
Sign up for a free account on the MongoDB Atlas website (https://www.mongodb.com/cloud/atlas).
Create a new cluster, choosing the free tier option.
Once your cluster is created, click on the "Connect" button and choose "Connect Your Application".
Copy the connection string provided, which includes your MongoDB username, password, and cluster address.

Paste the connection string into .env file with following name MONGODB_CONNECT_STRING.

**3. Create a New React Project:

Open a terminal window and navigate to the directory where you want to create your MERN project.
Run the following command to create a new React App using Create React App:

npx create-react-app my-react-app

Once the project is created, navigate into the project directory:

cd my-react-app

4. Set Up Express.js Backend:

In your project directory, create a new directory named server to hold your Express.js backend code:

mkdir server

Navigate into the server directory:

cd server

Initialize a new Node.js project by running:

npm init -y

Install Express.js and Mongoose (MongoDB object modeling tool) as dependencies:

npm install express mongoose

Create a new file named server.js and write your index.js backend code in this file. Use the MongoDB Atlas connection string to connect to your database.

5. Connect React Frontend with Express Backend:

In the client directory of your React project, update the package.json file to include a proxy to your Express backend. Add the following line:

"proxy": "http://localhost:5000"

This configuration allows your React frontend to communicate with the Express backend.

**6. Start the Development Servers:"

Open two terminal windows, one for the client and one for the server.
In the first terminal, navigate to the client directory of your React project and start the React development server:

cd my-react-app/client
npm start

In the second terminal, navigate to the server directory and start the Express.js server:

cd my-react-app/server
node index.js

7. Test Your Application:

Open a web browser and navigate to http://localhost:3000 to view your React frontend.
Test the functionality of your application to ensure that the frontend and backend are communicating correctly.

Congratulations! You've successfully set up and run a MERN stack application locally on your machine, utilizing MongoDB Atlas as the cloud-based database solution. This guide has provided you with the essential steps to get started with MERN development. From here, you can further customize and expand your application based on your project requirements.

Happy coding! 🚀

Enhance Your Next.js or React.js Application with Froala Editor

Rohitash Singh — Sun, 03 Mar 2024 09:01:32 +0000

In modern web development, rich text editors play a crucial role in providing users with a versatile and intuitive interface for content creation. Froala Editor is a powerful and feature-rich WYSIWYG editor that can be seamlessly integrated into Next.js or React.js applications, offering a comprehensive solution for editing text and media content. In this blog post, we will explore the steps to integrate Froala Editor into your Next.js or React.js application, along with some tips for customization and optimization.

1. Getting Started:
Before we begin integrating Froala Editor into our application, let's ensure that our Next.js or React.js project is set up and running. If you haven't already created a project, you can use tools like Create React App for React.js or create-next-app for Next.js to bootstrap your application.

2. Installing Froala Editor:
To install Froala Editor in your project, you can use npm or yarn. Run the following command in your terminal:

npm install react-froala-wysiwyg --save

yarn add react-froala-wysiwyg froala-editor

This will install both the Froala Editor package and its React wrapper (react-froala-wysiwyg) in your project.

3. Install font-awesome

npm install font-awesome --save

4. Integrating Froala Editor:

import React, { useState } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

function MyEditor() {
  const [content, setContent] = useState('');

  return (
    <div>
      <FroalaEditor
        tag='textarea' 
        model={content} 
        onModelChange={setContent} 
      />
    </div>
  );
}

export default MyEditor;

5. Customization:
Froala Editor provides a wide range of configuration options that allow you to customize its behavior, appearance, and functionality according to your requirements. You can pass a config object to the FroalaEditor component to specify these options.

<FroalaEditor 
  tag='textarea' 
  model={content} 
  onModelChange={setContent} 
  config={{
      toolbarInline: true,
      toolbarSticky: true,
      charCounterCount: false,
      placeholderText: 'Unveil your story...', 
      codeMirror: true,
      theme: 'dark',
  }}
/>

full version of the code or component.

"use client";

import React, { useState, useEffect } from 'react';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/js/plugins.pkgd.min.js';
import '@fortawesome/fontawesome-free/css/all.min.css';
import FroalaEditor from 'react-froala-wysiwyg';
import { Navbar } from '@/components';

export default function EditorComponent() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  useEffect(() => {
  }, []);

  return (
    <>
      <Navbar />
      <div className="editor-container pt-5 mx-auto max-w-4xl">
        <div className="editor-title-input">
          <FroalaEditor 
            tag='textarea' 
            model={title} 
            onModelChange={setTitle} 
            config={{
              toolbarInline: true,
              toolbarSticky: true,
              charCounterCount: false,
              placeholderText: 'Title', 
              theme: 'dark',
              classes: "display-3 text-2xl bg-black",
            }}
          />
        </div>
        <div className="editor-content-input pt-2">
          <FroalaEditor 
            tag='textarea' 
            model={content} 
            onModelChange={setContent} 
            config={{
              toolbarInline: true,
              toolbarSticky: true,
              charCounterCount: false,
              placeholderText: 'Unveil your story...', 
              codeMirror: true,
              theme: 'dark',
            }}
          />
        </div>
      </div>
    </>
  );
}

Integrating Froala Editor into your Next.js or React.js application can greatly enhance the content creation experience for your users. By following the steps outlined in this blog post, you can quickly and effectively integrate Froala Editor into your project, customize it to meet your specific requirements, and take advantage of its advanced features to create compelling and engaging content.

Happy Coding 🚀

Implementing an E-Commerce "Add to Cart" Feature in React: A Step-by-Step Guide

Rohitash Singh — Mon, 22 Jan 2024 13:07:46 +0000

Introduction
The world of e-commerce has witnessed a tremendous surge in recent years, and building a seamless shopping experience is crucial for the success of any online store. One of the fundamental features in any e-commerce application is the "Add to Cart" functionality, allowing users to easily select and store items they wish to purchase. In this blog, we will explore how to implement the "Add to Cart" feature using React, a popular JavaScript library for building user interfaces.

Prerequisites
Before diving into the implementation, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can create a new React application using Create React App:

npx create-react-app ecommerce-cart
cd ecommerce-cart
npm start

Now, let's start implementing the "Add to Cart" functionality.

Step 1: Set Up the Project Structure
Organize your project by creating a dedicated folder structure. For simplicity, let's create a 'components' folder to store our React components.

src
|-- components
|   |-- AddToBasketList.js
|   |-- Basket.js
|   |-- BasketItem.js
|   |-- BasketCard.js
|   |-- TotalPrice.js
|-- context
|   |-- CartContext.js

Step 2: Create Product and Cart Components
In Basket.js, create a list of products that users can add to their shopping cart:

import React from 'react';
import basketData from '../data.js/basketData';
import BankCard from './BankCard';
import BasketCard from './BasketCard';
import SlideCarousel from './Carousel';
import CategoryList from './CategoryList';
import DailyStapleCard from './DailyStapleCard';
import GroceryText from './GroceryText';

function Basket() {
    return (
        <>
            <div className='container custom-container'>
                <div className='row'>
                    <div className='header-category d-flex w-100'>
                        <CategoryList />
                    </div>

                    <div className='col-lg-12 my-4 discounted-img'>
                        <img src="https://source.unsplash.com/300x200/?grapes" className='img-fluid w-100' alt="discount show" style={{height: "250px", borderRadius: "20px"}} />
                        <span className='text-on-discounted-img text-center'>
                            <p className='m-0 p-0'>Upto</p>
                            <p className='m-0 p-0'>20%</p>
                        </span>
                    </div>

                    <h1>My Smart Basket</h1>

                    {basketData.slice(0,8).map((item) => (
                        <BasketCard item={item} key={item.id} />
                    ))}



                </div>
            </div>
        </>
    )
}

export default Basket;

assume you have a list of basketData like

const basketData = [
    {
        id: 1,
        imgSrc: "https://source.unsplash.com/300x200/?banana",
        category: "Fresh",
        name: "Banana",
        amount: "1kg",
        discounted_price: "59.13",
        actual_price: "81",
        sale: "Get it for just ₹56.17!",
        off_on_product: "27",
        count: 1,
    },
];
export default basketData;

AddToBasketList.js

import React, { useEffect, useState } from 'react';
import { useCart } from '../context/CartContext';
import BasketItem from './BasketItem';
import TotalPrice from './TotalPrice';

function AddToBasketList() {
  const { cartItems, removeFromCart,totalPrice } = useCart();

  const handleDeleteItem = (deletedItem, deletedPrice) => {
    removeFromCart(deletedItem, deletedPrice);
  };  

  return (
    <>
      <div className="container custom-container mb-5">
        <p className='mt-3'>My Basket</p>

        {cartItems.map((item, index) => (
          <BasketItem 
          index={index} 
          key={index} 
          item={item} 
          onDelete={(deletedItem, deletedPrice) => handleDeleteItem(deletedItem, deletedPrice)}  />
        ))}        

        <TotalPrice />
      </div>
    </>
  )
}

export default AddToBasketList;

BasketCard.js

import React from 'react';
import { Link } from 'react-router-dom';
import { useCart } from '../context/CartContext';

function BasketCard({ item }) {
  const { addToCart } = useCart();

  const handleAddToCartClick = (item) => {
    addToCart(item, item.discounted_price);
  };

  return (
    <>
      <div className="col-lg-3 item-card" key={item.id}>
        <div className='shadow'>
          <div className="card mb-4 p-2">
            <Link to={`/details/${item.id}`}>
            <img src={item.imgSrc} className="card-img-top" alt="bigbasket item" />
            </Link>
            <span className='off_on_product bg-success p-2'>{item.off_on_product}% OFF</span>
            <div className="card-body">
              <p className="text-sm">{item.category}</p>
              <h5 className="card-title">{item.name}</h5>
              <div className="mb-3">
                <label htmlFor="exampleSelect" className="form-label">Select an option:</label>
                <select className="form-select" id="exampleSelect">
                  <option value="" >{item.amount}</option>
                  <option value="option1">Option 1</option>
                  <option value="option2">Option 2</option>
                  <option value="option3">Option 3</option>
                </select>
              </div>
              <h5 className="card-title">₹{item.discounted_price} <span className='text-decoration-line-through'>₹{item.actual_price}</span></h5>

              <div className="mb-3">
                <label htmlFor="exampleSelect" className="form-label">Select an option:</label>
                <select className="form-select" id="exampleSelect">
                  <option value="">{item.sale}</option>
                  <option value="option1">Option 1</option>
                  <option value="option2">Option 2</option>
                  <option value="option3">Option 3</option>
                </select>
              </div>

              <div className="d-flex">
                <span className='p-1 px-2 border me-2' title='Add to Fav'>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-bookmark" viewBox="0 0 16 16">
                    <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z" />
                  </svg>
                </span>
                <span className='w-100'>
                  <button className='btn btn-outline-danger w-100' onClick={() => handleAddToCartClick(item)}>Add</button>
                </span>
              </div>

            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default BasketCard;

BasketItem.js

import React, { useEffect } from 'react';
import { useState } from 'react';
import { useCart } from '../context/CartContext';

function BasketItem({ onDelete, item, index, getCount, updateTotalPrice }) {
  let previousCount = JSON.parse(localStorage.getItem(`cartCount_${index}`)) || 1;
  let [count, setCount] = useState(previousCount);
  let { setTotalPrice } = useCart();


  useEffect(() => {
    localStorage.setItem(`cartCount_${index}`, JSON.stringify(count));
  }, [count, index]);


  let discountedPrice = (item.discounted_price * count).toFixed(2);
  let actualPrice = (item.actual_price * count).toFixed(2);
  let savePrice = (actualPrice - discountedPrice).toFixed(2);

  if (count < 1) {
    alert("You can't select 0 Item")
    count = 1
    discountedPrice = (item.discounted_price * count).toFixed(2);
    savePrice = (item.actual_price - item.discounted_price).toFixed(2);
  }

  const handleDelete = () => {
    onDelete(item, discountedPrice);
  };

  const handleIcrCount = (index) => {
    setCount(() => {
      const updatedCounts = count + 1
      setTotalPrice((prevTotalPrice) => prevTotalPrice + (item.discounted_price * 1));
      localStorage.setItem(`cartCount_${index}`, JSON.stringify(updatedCounts));
      return updatedCounts;
    });
  };

  const handleDcrCount = (index) => {
    setCount(() => {
      const updatedCounts = count - 1
      setTotalPrice((prevTotalPrice) => prevTotalPrice - (item.discounted_price * 1));
      localStorage.setItem(`cartCount_${index}`, JSON.stringify(updatedCounts[index]));
      return updatedCounts;
    });
  };

  return (
    <>
      <div className="add-to-card card mb-1">
        <div className="card-body d-flex">
          <div className="card-img d-flex justify-content-between align-items-center">
            <div className='border'>
              <img src={item.imgSrc} alt="card image" className='img-fluid' style={{ maxWidth: '100px' }} />

            </div>
            <div className='title'>
              <p className='text-muted'>{item.category} {index}</p>
              <p className='name'>{item.name} 1 kg</p>
              <p className='text-muted'>1 x 80.00</p>
            </div>
            <div className='d-flex amount'>
              <span onClick={handleDcrCount}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-dash border rounded-circle" viewBox="0 0 16 16">
                  <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" />
                </svg>
              </span>
              <p className='mx-2 count'>{count}</p>
              <span onClick={handleIcrCount}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-plus border rounded-circle" viewBox="0 0 16 16">
                  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
                </svg>
              </span>
            </div>
            <div className='price'>
              <p>Rs. {discountedPrice}</p>
              <p className='text-success'>Save Rs. {savePrice}</p>
            </div>
            <div className='cross' onClick={handleDelete}>
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" className="bi bi-file-x" viewBox="0 0 16 16">
                <path fillRule="evenodd" d="M6.146 6.146a.5.5 0 0 1 .708 0L8 7.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 8l1.147 1.146a.5.5 0 0 1-.708.708L8 8.707 6.854 9.854a.5.5 0 0 1-.708-.708L7.293 8 6.146 6.854a.5.5 0 0 1 0-.708" />
              </svg>

            </div>

          </div>
        </div>
      </div>
    </>
  )
}

export default BasketItem;

TotalPrice.js

import React from 'react';
import { useCart } from '../context/CartContext';

function TotalPrice() {
  const { totalPrice } = useCart();

  return (
    <>
        <div className='d-flex justify-content-end text-align-center align-items-center my-auto'>
        <div>
          <div className='d-flex justify-content-between mt-3'>
            <p>Total</p>
            <p>:</p>
            <p>{`Rs. ${totalPrice.toFixed(2)}`}</p>
          </div>
          <p className='line'></p>
          <div className='d-flex justify-content-end'>
            <button className='btn btn-dark'>Pay Now</button>
          </div>

        </div>
        </div>
    </>
  )
}

export default TotalPrice;

context file CartContext.js

import React, { createContext, useContext, useEffect, useState } from 'react';

const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const storedCartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
  const storedPrice = JSON.parse(localStorage.getItem('cartItems_price'));
  const [cartItems, setCartItems] = useState(storedCartItems);
  let [totalPrice, setTotalPrice] = useState(storedPrice);

  const addToCart = (item, discounted_price) => {
    setCartItems((prevItems) => [...prevItems, item]);
    setTotalPrice(totalPrice + parseFloat(discounted_price));
  };

  const removeFromCart = (item, price) => {
    const updatedCartItems = cartItems.filter((cartItem) => cartItem.id !== item.id);
    setCartItems(updatedCartItems);

    setTotalPrice(totalPrice - price);
  };


  useEffect(() => {
    localStorage.setItem('cartItems', JSON.stringify(cartItems));
  }, [cartItems]);

  useEffect(() => {
    localStorage.setItem('cartItems_price', JSON.stringify(totalPrice));
  }, [totalPrice]);

  console.log('storedPrice', storedPrice)
  return (
    <CartContext.Provider value={{ cartItems, addToCart, removeFromCart,totalPrice, setTotalPrice }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart must be used within a CartProvider');
  }
  return context;
};

That's it.
Congratulations! You've successfully implemented the "Add to Cart" functionality in a React application.

Happy coding!🚀

Understanding React JSX: A Comprehensive Guide

Rohitash Singh — Mon, 15 Jan 2024 07:33:27 +0000

React, developed by Facebook, has revolutionized the way developers build user interfaces. One of its key features is JSX, a syntax extension that allows you to write HTML elements and components in a JavaScript file. JSX enhances the readability and maintainability of React code, providing a more declarative and expressive syntax. In this blog post, we'll delve into the world of React JSX, exploring its benefits, syntax, and best practices.

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript recommended by React for building user interfaces. JSX allows you to write HTML-like code within JavaScript files, making it easier to visualize and construct UI components.

Here's a simple example of JSX:

const element = <h1>Hello, JSX!</h1>;

In the code above, the JSX syntax is used to create a React element that represents an <h1> heading. This JSX code is transformed into regular JavaScript using a process called transpilation, typically performed by tools like Babel.

Benefits of JSX

1. Readability

JSX makes React code more readable and expressive. It closely resembles HTML, which is familiar to most web developers. This similarity helps developers quickly understand the structure of the UI without having to switch between different syntaxes.

2. Maintainability

The declarative nature of JSX contributes to better code organization and maintainability. Since JSX represents the desired UI state, developers can easily identify and understand the structure of the user interface.

3. Integration with JavaScript Expressions

JSX allows embedding JavaScript expressions within curly braces {}. This feature enables dynamic content and expressions to be seamlessly integrated into the UI.

const name = "John";
const element = <p>Hello, {name}!</p>;

4. Tooling Support

JSX has robust tooling support, including syntax highlighting, linting, and auto-completion. Popular code editors like Visual Studio Code provide excellent support for JSX, enhancing the developer experience.

JSX Syntax

1. Elements

In JSX, elements represent the building blocks of the user interface. Elements can be HTML tags, React components, or custom components.

const heading = <h1>Hello, JSX!</h1>;
const app = <App />;

2. Attributes

JSX supports HTML-like attributes for elements. These attributes are written using camelCase instead of traditional HTML attribute naming.

const link = <a href="https://www.example.com">Visit Example</a>;

3. Embedding JavaScript Expressions

To include dynamic content or execute JavaScript expressions within JSX, use curly braces {}.

const user = {
  firstName: "John",
  lastName: "Doe"
};

const greeting = <p>Hello, {user.firstName} {user.lastName}!</p>;

4. JSX Fragments

JSX requires a single parent element. To group multiple elements without introducing an additional wrapper, use a JSX fragment.

const fragment = (
  <>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </>
);

Best Practices

1. Use JSX for UI

While JSX is not mandatory for using React, it significantly improves the readability and maintainability of your code. Whenever possible, opt for JSX to define your UI components.

2. Keep Components Small and Focused

Break down your UI into small, reusable components. This not only adheres to good software design principles but also makes your JSX code more manageable.

3. Use Descriptive Variable Names

Choose meaningful names for your variables and components. This makes your JSX code self-documenting and helps other developers understand your intentions.

4. Embrace JSX Syntax Extensions

Explore JSX syntax extensions like fragments (<>...</>) and conditional rendering to write more concise and expressive code.

Conclusion

React JSX is a powerful and expressive syntax extension that simplifies the process of building user interfaces in React applications. Its familiarity with HTML, readability, and seamless integration with JavaScript make it a preferred choice for many developers. By following best practices and embracing JSX, you can enhance your React development experience and create more maintainable and scalable applications.

Happy Coding!🚀

Getting Started with React: An Introduction and Setup Guide

Rohitash Singh — Fri, 12 Jan 2024 06:03:10 +0000

Welcome to the exciting world of React! If you're looking to build modern, dynamic web applications, you're in the right place. In this blog post, we'll take you through the basics of React, helping you set up your development environment and create your first React application. So, let's dive in!

What is React?

React is a JavaScript library for building user interfaces. Developed by Facebook, it allows developers to create reusable UI components that update in real-time as the state of an application changes. One of React's key features is its use of a virtual DOM, which optimizes the rendering process for better performance.

Prerequisites

Before we start, ensure you have a basic understanding of HTML, CSS, and JavaScript. If you're comfortable with these technologies, you're ready to embark on your React journey!

Setting Up Your Development Environment

To make the setup process easy, we'll use create-react-app, a tool that sets up a new React project with a single command. Open your terminal and run the following:

npx create-react-app my-first-react-app

Replace "my-first-react-app" with the desired name for your project.

Creating Your First React App

Once the installation is complete, navigate to your project's directory:

cd my-first-react-app

Now, start the development server:

npm start

This will open your React app in a new browser window. Congratulations, you've just created your first React application!

Understanding Components

In React, UIs are broken down into components or we can say react is all about components, everything is a component in react even a single button. Components are reusable, self-contained modules that can be combined to build complex interfaces. There are two main types of components: functional and class components. Here's a simple example of a functional component:

// src/components/Welcome.js
import React from 'react';

const Welcome = () => {
  return <h1>Hello, Welcome to React Tutorial!</h1>;
};

export default Welcome;

JSX (JavaScript XML)

React uses JSX, a syntax extension that looks similar to XML or HTML but stricter than normal html, to describe what the UI should look like. JSX makes it easier to write and understand React components. Let's modify our functional component to use JSX:

// src/components/Welcome.js
import React from 'react';

const Welcome = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Welcome;

Rendering Components

To see your component in action, import and render it in the src/App.js file:

// src/App.js
import React from 'react';
import Welcome from './components/Welcome';

function App() {
  return (
    <div className="App">
      <Welcome />
      // <Welcome name="React" />
    </div>
  );
}

export default App;

Preview and Test

Save your files, and you should see the updated text in your browser. Experiment by modifying the content of the Welcome component to see changes instantly reflected in your app.

Next Steps

Congratulations on creating your first React app! In the upcoming blog posts, we'll explore more advanced topics such as state management, handling user input, and working with external data. Stay tuned, and happy coding!

Additional Resources

Feel free to leave a comment if you have any questions or need further clarification. Happy coding!🚀

Demystifying HTML: A Comprehensive Guide for Beginners

Rohitash Singh — Thu, 21 Dec 2023 12:36:26 +0000

HTML, acronym of HyperText Markup Language, is the backbone of the World Wide Web. It serves as the standard markup language used to create and structure content on the internet. Understanding HTML is essential for anyone looking to venture into web development, whether as a hobbyist or a professional. In this blog post, we will take a detailed look at HTML, its fundamentals, structure, and some advanced features.

Note: HTML- A Markup Language, Not a Programming Language:

A markup language is used to annotate text to provide additional information about its structure. HTML, which stands for HyperText Markup Language, fits perfectly into this category. Its primary purpose is to structure content on the web by utilizing a system of tags that surround pieces of text to indicate their purpose.

What is HTML?

HTML is a markup language that defines the structure of a web page. It consists of a series of elements, each represented by tags, which are used to enclose or wrap different parts of content. These elements can include headings, paragraphs, links, images, and more.

Basic Structure of an HTML Document:

An HTML document typically consists of the following basic structure:

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
    <h1> Hello World!!</h1>
</body>
</html>

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used (in this case, HTML5).
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document, such as the title (displayed in the browser's title bar or tab).
<title>: Sets the title of the HTML document.
<body>: The content visible in the browser window is defined within the <body> tag. It Contains the content of the HTML document, such as text, images, links, and more.

HTML Elements:

HTML elements are the building blocks of a web page. Each element is represented by a pair of tags, an opening tag, and a closing tag. Some elements are self-closing and don't require a closing tag. Here are a few common HTML elements:

Headings:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

h1 is highest section level and h6 is lowest section level.

Paragraphs:
```
<p>This is a paragraph of text.</p>
```

Links:

<a href="https://www.google.com">Visit Google</a>

Images:

<img src="image.jpg" alt="Description of the image">

Attributes:

HTML elements can have attributes that provide additional information about them. Attributes are always included in the opening tag and are written as name/value pairs.

<a href="https://www.google.com" target="_blank">Visit Google</a>

href: Specifies the URL of the linked resource.
target="_blank": Opens the link in a new browser tab or window.

List

Ordered List

Ordered list has a specific order.

<ol>
    <li>Mango</li>
    <li>Apple</li>
    <li>Guava</li>
</ol>

UnOrdered List

It has no specific order.

<ul>
    <li>Code</li>
    <li>Execute</li>
    <li>Run</li>
</ul>

Anchor Element

Used to add link to our pages.
Google

Br Tag

Used to add next line or line breaks to our text.

<br>

Bold, Italic & Underline tags

Used to highlight text in page.

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>

Comments in HTML

This is a part of code that should not be parsed.

    <!-- This is comments -->

Case Sensitive

HTML is not Case Sensitive.

<html> = <HTML> = <hTML>
<p> = <P>
<head> = <HEAD>
<body> = <BODY>

Inline V/S Block

Block Elements

start from new line and take full with of the window.

<div>Hello </div>
<div>World </div>

Inline Elements

Takes up only necessary width.
Don't start from new line.

<span>Hello World!!</span>

div Element

Div is a container used to hold other HTML elements or group elements together.
It is a block Element.

<div>This is a div Container </div>

Span Element

Span is also a generic element used to hold other HTML elements or group elements together.
It is an inline Element.

<span>This is span tag</span>

Hr Tag

Horizontal Rule Element
It is used to draw horizontal line.

<hr>

Sub & Sup Tag

a2 = b2 + c2 -> SuperScript

a<sup>2</sup> = b<sup>2</sup> = c<sup>2<sup>

H20 -> SubScript

H<sub>2</sub>O

HTML Forms:

Forms are used to collect user input. HTML provides various form elements such as text fields, checkboxes, radio buttons, and more.

<form action="/submit_form" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <input type="submit" value="Submit">
</form>

action: Specifies the URL to which the form data will be submitted.
method: Specifies the HTTP method (e.g., GET or POST) used when sending form data.

Advanced HTML:

HTML has evolved, and HTML5 introduces several new elements and attributes. Some of these include:

Semantic Elements:

<article>, <section>, <header>, <footer>, <nav>, <aside>, <figure>, <figcaption>

Audio and Video:

<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>

Canvas:

<canvas width="200" height="100"></canvas>

Geolocation:

<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Get Location</button>

Conclusion:

HTML is the cornerstone of web development. This guide provides a solid foundation for beginners to start creating web pages. As you continue your journey, explore CSS for styling and JavaScript for interactivity to take your web development skills to the next level. With HTML as your starting point, you are well on your way to becoming a proficient web developer.
Know More
Follow me for more like this.

Happy coding!

How can you qualify for a web developer job?

Rohitash Singh — Tue, 05 Dec 2023 05:47:27 +0000

Learn the basics
Choose a specialization
Build a portfolio
Update your resume
Network and apply
Here’s what else to consider

1.Learn the basics
The first step is to learn the basic languages and concepts of web development. You should be familiar with HTML, CSS, and JavaScript, which are the core elements of any web page. HTML defines the structure and content of the page, CSS controls the appearance and layout, and JavaScript adds interactivity and functionality. You should also understand how the web works, such as how browsers, servers, domains, and protocols communicate and deliver web content.

2.Choose a specialization
The next step is to choose a specialization or a focus area for your web development career. Web development can be divided into two main categories: front-end and back-end. Front-end developers work on the user interface and user experience of the web page, using languages and frameworks such as React, Angular, Vue, Bootstrap, and jQuery. Back-end developers work on the server-side logic and data management of the web application, using languages and frameworks such as PHP, Python, Ruby, Node.js, Laravel, Django, and Rails. You can also choose to be a full-stack developer, which means you can handle both front-end as well as back-end stuff.

3.Build a portfolio
The third step is to build a portfolio of web projects that showcase your skills and abilities. A portfolio is a collection of web pages or applications that you have created or contributed to, either for personal, academic, or professional purposes. A portfolio can help you demonstrate your creativity, problem-solving, and technical proficiency to potential employers and clients. You can use platforms such as GitHub pages, CodePen, netlify, vercel, or Glitch to host and share your portfolio online.

4.Update your resume
The fourth step is to update your resume with your web development skills, experience, and achievements. A resume is a document that summarizes your education, work history, and qualifications for a job. A resume should highlight your relevant skills and projects, using keywords and phrases that match the job description and requirements. You should also include links to your portfolio, social media profiles, or online certifications that can showcase your web development credentials.

5.Network and apply
The final step is to network and apply for web developer jobs that interest you. Networking is the process of connecting with other people in your field or industry, such as peers, mentors, employers, or clients. Networking can help you learn from others, find opportunities, and get referrals or recommendations. You can network online or offline, using platforms such as LinkedIn, Twitter, Meetup, or Hackathons. Applying is the process of sending your resume and cover letter to potential employers or clients, expressing your interest and suitability for the job. You should tailor your application to each job, highlighting your specific skills and value proposition.

6.Here’s what else to consider
This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Building a Dynamic Community: Implementing Comments in Your Django Blog

Rohitash Singh — Thu, 23 Nov 2023 11:11:09 +0000

Creating a blog is a fantastic way to share your thoughts and ideas with the world. However, a truly engaging blog goes beyond just the articles – it involves building a community around your content. One key feature for fostering this sense of community is the ability for readers to leave comments on your blog posts. In this tutorial, we'll explore how to implement a commenting system in a Django blog.

Prerequisites

Basic knowledge of Django.
Django installed on your system.
A Django project with a blog app.

Step 1: Set Up Your Django Models
First, let's define the models needed for handling comments. In your models.py file, add the following:

from django.db import models
from django.contrib.auth.models import User
from ckeditor.fields import RichTextField
from django.utils.timezone import now

STATUS = (
    (0,"Draft"),
    (1,"Publish")
)

class Post(models.Model):
    title = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(max_length=200, unique=True)
    author = models.ForeignKey(User, on_delete= models.CASCADE,related_name='blog_posts')
    updated_on = models.DateTimeField(auto_now= True)
    content = RichTextField(blank=True, null=True)
    created_on = models.DateTimeField(auto_now_add=True)
    status = models.IntegerField(choices=STATUS, default=0)

    class Meta:
        ordering = ['-created_on']

    def __str__(self):
        return self.title


class PostComment(models.Model):
    sno = models.AutoField(primary_key=True)
    comment = models.TextField()
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    post = models.ForeignKey(Post, on_delete=models.CASCADE)
    parent_comment = models.ForeignKey('self', on_delete=models.CASCADE, null=True)
    created_at = models.DateTimeField(default=now)

Make sure to run python manage.py makemigrations and python manage.py migrate to apply these changes to your database.

Step 2: Update Your Blog Views
In your views.py file, you'll need to update the post detail view to handle comments. Add the following imports:

from django.shortcuts import get_object_or_404, redirect
from django.views import generic
from .models import Post, PostComment
from django.views.generic.base import TemplateView
from django.contrib import messages

class PostList(generic.ListView):
    queryset = Post.objects.all()
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['recent_posts'] = Post.objects.filter(status=1).order_by('-created_on')[:3]
        return context

class PostDetail(generic.DetailView):
    model = Post
    template_name = 'post_detail.html'

    def get_context_data(self, **kwargs):
            context = super().get_context_data(**kwargs)
            context['recent_posts'] = Post.objects.filter(status=1).order_by('-created_on')[:3]
            return context

class ContactView(TemplateView):
    template_name = 'contact.html' 

class AboutView(TemplateView):
    template_name = 'about.html' 

class AddComment(generic.DetailView):
    def post(self, request, *args, **kwargs):
        comment = request.POST.get('comment')
        user = request.user
        post_id = request.POST.get('post_id')
        post = get_object_or_404(Post, id=post_id)

        comment_instance = PostComment(comment=comment, user=user, post=post)
        comment_instance.save()
        messages.success(request, "Comment Added Successfully!!")

        return redirect('blog:blog-details', slug=post.slug)

    def get(self, request, *args, **kwargs):
        messages.error(request, "An error occurred while adding a comment!")
        return redirect('blog:home')

for function based views you can use this


def AddComment(request):
    if request.method == 'POST':
        comment = request.POST.get('comment')
        user = request.user
        post_id = request.POST.get('post_id')
        post = BlogPost.objects.get(id=post_id)

        comment_instance = PostComment(comment=comment, user=user, post=post)
        comment_instance.save()
        messages.success(request, "Comment Added Successfully!!")
    else:
        messages.error(request, "An error while adding comment!")

    return redirect(f'/blog/blog-details/{post.slug}')

Step 3: Update Your Post Detail Template

base.html

<!DOCTYPE html>
<html>

<head>
    <title>RS Blog</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

</head>

<body>
    <style>
        body {
            font-family: "Roboto", sans-serif;
            font-size: 17px;
            background-color: #fdfdfd;
        }

        .shadow {
            box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
        }

        .btn-danger {
            color: #fff;
            background-color: #f00000;
            border-color: #dc281e;
        }

        .hero {
            background: black;
            height: auto;
            padding-bottom: 15px;
            box-shadow: 0 16px 48px #E3E7EB;
            padding-top: 10px;
        }
        .position-sticky {
            position: sticky;
            top: 0px;
            z-index: 1000;
        }
    </style>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow p-3 position-sticky" id="mainNav">
        <div class="container-fluid">
            <a class="navbar-brand" href="{% url 'home' %}">RS Blog</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item text-black">
                        <a class="nav-link text-black font-weight-bold" href="{% url 'home' %}">Home</a>
                    </li>
                    <li class="nav-item text-black">
                        <a class="nav-link text-black font-weight-bold" href="{% url 'about' %}">About</a>
                    </li>
                    <li class="nav-item text-black">
                        <a class="nav-link text-black font-weight-bold" href="{% url 'contact' %}">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    {% block content %}
    <!-- Content Goes here -->
    {% endblock content %}
    <!-- Footer -->
    <footer class="py-3 bg-secondary">
        <p class="m-0 text-light text-center ">Copyright &copy; RS Blog | <a href="https:rohitashsingh.vercel.app" target="_blank"> Rohitash Singh</a></p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
        integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
        crossorigin="anonymous"></script>

</body>

</html>

index.html

{% extends "base.html" %}
{% block content %}
<style>
    body {
        font-family: "Roboto", sans-serif;
        font-size: 18px;
        background-color: #fdfdfd;
    }

    .head_text {
        color: white;
    }

    .card {
        box-shadow: 0 16px 48px #E3E7EB;
    }
</style>

<header class="hero">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-12 mx-auto w-100">
                <div class="site-heading text-center">
                    <h3 class=" site-heading my-5 text-white"> Welcome to my awesome Blog </h3>
                    </p>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="container" style="min-height: 61vh;">
    <div class="row">
        <!-- Blog Entries Column -->
        <div class="col-md-8 mt-3 left">
            {% for post in post_list %}
            <div class="card shadow mb-4">
                <div class="card-body">
                    <h2 class="card-title">{{ post.title }}</h2>
                    <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>
                    <p class="card-text">{{post.content|safe|slice:":200" }}...</p>
                    <a href="{% url 'post_detail' post.slug  %}" class="btn btn-dark">Read More &rarr;</a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
    </div>
</div>
{%endblock%}

sidebar.html

{% block sidebar %}

<style>
    .card {
        box-shadow: 0 16px 48px #E3E7EB;
    }

    a {
        text-decoration: none;
    }
    .position-stic {
        position: sticky;
        top: 100px;
    }
</style>

<div class="col-md-4 float-right">
    <div class="card my-4 position-stic">
        <h5 class="card-header">Recent Posts</h5>
        <div class="card-body">
            <ul class="list-unstyled">
                {% for post in recent_posts %}
                <div class="mb-4">
                    <a href="{% url 'post_detail' post.slug  %}" class="outline-none">
                        <p class="card-title">{{ post.title }}</p>
                    </a>
                    <hr>
                </div>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

{% endblock sidebar %}

post detail template

{% extends 'base.html' %} {% block content %}


<header class="hero">
  <div class="overlay"></div>
  <div class="container">
      <div class="row">
          <div class="col-md-8 col-md-12 mx-auto w-100">
              <div class="site-heading text-center">
                  <h3 class=" site-heading my-5 text-white"> {{ post.title }} </h3>
                  </p>
              </div>
          </div>
      </div>
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="col-md-8 card mb-4  mt-3 left  top" style="min-height: 80vh;">
      <div class="card-body">
        <h1>{% block title %} {{ object.title }} {% endblock title %}</h1>
        <p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
        <p class="card-text ">{{ object.content | safe }}</p>
        <hr>
                <h2 class="my-4">Comments</h2>
                <div class="py-2">
                {% for comment in comments %}
                <div class="card shadow p-2">
                    <div class="row">
                        <div class="col-md-2">{{ comment.user }}</div>
                        <div class="col-md-10">{{ comment.comment }}</div>
                    </div>
                </div>
                {% endfor %}
                </div>

                <form action="{% url 'AddComment' %}" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="post_id" value="{{ post.id }}">
                    <textarea name="comment" class="form-control" id="comment" rows="5" cols="15"></textarea>
                    <button type="submit" class="btn btn-primary">Add Comment</button>
                </form>
      </div>
    </div>

    {% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
  </div>
</div>

{% endblock content %}

Congratulations! You've just added a commenting system to your Django blog. This feature opens the door for meaningful discussions and interactions within your blog community. Feel free to customize the styling and functionality to suit your blog's unique style and requirements.

Happy coding!