DEV Community: Shubham Verma

Building Dynamic Seat Layout Rendering in React from Sparse JSON (BookMyShow/District-style)

Shubham Verma — Fri, 19 Dec 2025 09:15:15 +0000

Seat-selection UIs (BookMyShow, District, Ticketmaster, etc.) look straightforward: show rows, show seats, let me click one.

But theatre layouts in the real world are messy:

Seats are missing because there are aisles / stairs / empty spaces
Some rows are shorter, some are split into blocks
Different sections have different prices (“areas”)
And the backend doesn’t hand you a clean 2D matrix - it’s usually sparse data

This post is basically a walkthrough of how I took a District API seat-layout response and turned it into a UI that can render any layout dynamically (without hardcoding positions).

This blog focuses on data structure + layout strategy. For curious ones, here's the demo link

1) What the backend JSON looks like (District API response)

The JSON I used came from a District API response. The file is an array of layout objects, and each object contains a seatLayout.

The important nested path is:

seatLayout.colAreas.objArea[] → pricing sections (“areas”)
objArea.objRow[] → rows
objRow.objSeat[] → seats

Here’s a minimal representative snippet (one layout → one area → one row → two seats):

[
  {
    "seatLayout": {
      "name": "PVR",
      "colAreas": {
        "objArea": [
          {
            "AreaNum": 1,
            "AreaDesc": "Recliners",
            "AreaCode": "RE",
            "HasCurrentOrder": true,
            "AreaPrice": 385,
            "objRow": [
              {
                "GridRowId": 1,
                "PhyRowId": "P",
                "objSeat": [
                  {
                    "GridSeatNum": 4,
                    "SeatStatus": "1",
                    "seatNumber": 1,
                    "displaySeatNumber": "1"
                  },
                  {
                    "GridSeatNum": 12,
                    "SeatStatus": "0",
                    "seatNumber": 5,
                    "displaySeatNumber": "5"
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  }
]

The detail that matters most for layout: GridSeatNum can jump (4 → 12). That jump is literally your aisle/gap. The backend doesn’t send “empty seats” for 5..11 - it just doesn’t include them.

What each field means for UI

AreaDesc / AreaPrice: what you show above a section (like “Recliners ₹385”)
PhyRowId: the row label you show on the left (“A”, “B”, “P”, “N”…)
GridRowId: row position (vertical placement)
GridSeatNum: seat position within the row (horizontal placement)
SeatStatus:
- "0" → available
- "1" → occupied/unavailable
- everything else (for this dataset) → treat as gap

2) The core problem: sparse lists don’t render like a theatre

If you render seats like this:

row.objSeat.map(seat => <Seat />)

you’ll get something that technically shows seats… but it won’t look like the theatre map.

Because the UI needs to reflect things like:

empty space between seat blocks
aisles
rows that are split in the middle
missing rows (walking space)

A plain .map() compresses everything. The gaps disappear.

So the problem becomes:

How do you keep the “holes” in the data so the UI preserves spacing?

3) The strategy: indexed placement into pre-sized arrays

This is the entire trick.

Instead of rendering the sparse list directly, I convert it into something that behaves like a grid:

Create an array of length X filled with undefined
For every real item, place it at the index that represents its position

Then when you render the array, the missing indices stay missing - and that’s how you get gaps.

Why this works

Missing indices stay undefined → that becomes a gap
Rendering is stable because index == coordinate
A “gap cell” can be rendered as an invisible placeholder with the same size as a seat

4) Building a “grid” for the UI

There are two places where this idea shows up:

4.1 Row-level grid (vertical positioning)

Rows come as a list, but the GridRowId gives you a placement order/position. Sometimes there are intentional skips.

So you can build an array of rows where:

rows[rowIndex] = row
missing row indices remain undefined

Later, when rendering:

undefined row → render a spacer row (or just keep the vertical gap)

That’s how you get gaps between rows without writing a bunch of layout-specific CSS.

4.2 Seat-level grid (horizontal positioning)

Same idea inside a row.

Seats come as a list, but each seat has GridSeatNum (think “column index”).

So you build:

seats[colIndex] = seat
missing indices remain undefined → aisle/gap

When you render the seats array:

real seat → render a button
missing seat → render a placeholder cell

5) Rendering becomes trivial after grid alignment

Once the data is “grid-aligned”, rendering is boring (which is what you want):

render areas (pricing sections)
for each area, render rows (including empty slots)
for each row, render seats (including empty slots)

The only important UI rule is:

A gap must still occupy space.

So even if a seat slot is missing, the placeholder should have the same width/height as a real seat cell. That keeps everything aligned.

6) Flexibility: any seat at any 2D point

At this point every seat effectively has a coordinate:

row index → Y
column index → X

And because the backend is giving you these indices (GridRowId, GridSeatNum), you’re not guessing. You’re just placing items where the backend intended.

One quick note because the word “normalization” is overloaded:

Note: This is not Redux-style normalization (entities-by-id like seatsById, rowsById, etc.).
This is a grid alignment step for correct rendering geometry (gaps/aisles/spacing).

Redux normalization is great for state updates and selectors - but it doesn’t solve layout geometry on its own.

7) Handling multiple layouts in one JSON dump

In my project, the JSON can contain multiple layouts (it’s an array at the top level).

So instead of returning a single Area[], the builder returns:

Area[][]
- outer array = layouts
- inner array = that layout’s areas

Then the UI can render them in a responsive grid:

small screens: one below the other
wide screens: two columns (layout1 layout2, then layout3 layout4, ...)

8) Practical notes / lessons learned

8.1 Stable sizing matters

If a seat cell is size-9, then your “gap cell” also needs to be size-9. Otherwise alignment breaks.

8.2 Don’t let layout collapse

If you rely purely on flex without placeholders, the browser will naturally collapse empty space. The whole point of the indexed placement is to preserve those empty slots.

8.3 Keys and rerenders

If you generate random keys on every render, React can’t reconcile properly and you’ll get unnecessary rerenders.

For production, prefer stable keys like:

area.id
row.id
seat.id
plus layoutIndex if you’re rendering multiple layouts

9) Summary

If I had to summarize the whole approach:

The API gives you sparse lists + placement indices (GridRowId, GridSeatNum)
Convert sparse lists into index-addressable arrays
Render those arrays, and treat missing slots as real “gap cells”

That’s it. No magic. Just respecting the indices and making sure “missing” still takes up space.

If you’re reading this alongside the code:

one step converts the District response into internal Area/Row/Seat objects
another step grid-aligns rows and seats into index-based arrays
the UI renders those arrays, and missing indices become visible spacing

Optional future improvement:

If seat selection/state management grows complex, add Redux-style normalization (entities-by-id + selectors). That optimizes updates/lookups - it’s separate from the grid geometry problem.

References

NOTE: LLM was used for grammatically fixes.

The easiest way to write Markdown in NextJS!!

Shubham Verma — Tue, 29 Jun 2021 12:14:50 +0000

In this short blog, I'll show you how you can write Markdown in NextJS using MDX.

Installation

Before getting starting, I assume you have already initialized a NextJS project.

  yarn add @next/mdx @mdx-js/loader

npm install --save @next/mdx @mdx-js/loader

Configuration

In our next.config.js, add the following

const withMDX = require("@next/mdx")({
  extension: /\.mdx$/,
});

module.exports = withMDX({
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
});

Usage

Now we can create an index.mdx file in our src/pages

 <!-- src/pages/index.mdx -->

# This is a Markdown Syntax

## React starts from here

import { useState } from "react";

export const Home = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Count {count} </h1>
      <button onClick={() => setCount((prev) => prev + 1)}> Increment </button>
    </div>
  );
};

<Home />

## React ends here

## I can continue to write Markdown here

Output

References

Socials

If you like my content then do follow me on Twitter Shubham Verma

Technical Aspects of Bytes

Shubham Verma — Fri, 25 Jun 2021 07:03:07 +0000

⚠️⚠️ Project is no longer maintained or hosted. The code is available on Github

If you are unaware of Bytes then check out this blog that I wrote:
Bytes - A Platform to share bite-sized learnings!

In this blog, I'll talk about the decision to choosing the tech stack, the database modeling of Bytes

Tech Stack
- NextJS
- HarperDB
- TailwindCSS
- Firebase ( Storage and Authentication )
Database Modelling
- Schemas
  - User Schema
  - Post Schema
  - Tag Schema
  - Post_Tag Schema
- Relationships
  - User <-> Post
  - Post <-> Tags
Protecting Routes
Socials

Tech Stack

NextJS
HarperDB
TailwindCSS
Firebase

NextJS

I chose to go with NextJS because it provides SSR support and Pages support out of the box.

HarperDB

Since Bytes is made as a part of the HashNode-HarperDB hackathon, HarperDB acts as the Database for Bytes.
The ability to queries in SQL way or NoSQL ways make it so easy to work with it.

TailwindCSS

I always praise Tailwind in my blogs, It's easier to write CSS with all the utilites classes
It also has Dark/Light theme support.

Firebase ( Storage and Authentication )

Images for Bytes are handled by Firebase storage.
All the URLs of the uploaded image are then stored in Harper
Authentication is implemented using Firebase authentication as it handles also the user sessions gracefully.

Database Modelling

This is the fun part of working with databases for me. In this section, I'll share the schemas of the tables and their relationships.
I have tried to keep the models and their relationships normalized.

Schemas

User Schema

export type UserSchema = {
  uid: string;
  email: string;
  name: string;
  username: string;
  verified: boolean;
  __createdtime__?: string;
  __updatedtime__?: string;
};

Post Schema

export type PostSchema = {
  pid: string;
  images: Array<string>;
  slug: string;
  title: string;
  uid: string;
  reactions: number;
  __createdtime__?: string;
  __updatedtime__?: string;
};

Tag Schema

export type TagType = {
  tid: string;
  name: string;
  color: string;
  image?: string;
  slug?: string;
  __createdtime__?: string;
  __updatedtime__?: string;
};

Post_Tag Schema

export type Post_Tag_Type = {
  pid: string;
  ptid: string;
  tid: string;
  __createdtime__?: string;
  __updatedtime__?: string;
};

Relationships

User <-> Post

This relationship would be one-to-many
So the Post Schema would have a foreign key i.e User's uuid as uid
To get a user posts, I would just inner join User and Post on this uid

-- Gets all the Posts of a User
SELECT p.*,u.name,u.username FROM bytes.post AS p INNER JOIN bytes.user AS u ON u.uid=p.uid WHERE u.username='${username}'

Post <-> Tags

The relationships b/w Post and Tags would be many-to-many.
One post can have many tags and One tag can have posts
I found this amazing article that shows various ways on implementing N:M relationships
- Tags: Database schemas
Based on it, I made separate table called Post_Tag that would contain a post id as pid and tag id as tid
So now to get a post with all it's tags, I would write this SQL query

-- Gets all Tags for a Post
SELECT t.* FROM bytes.post_tag AS pt INNER JOIN bytes.tag AS t ON pt.tid=t.tid WHERE pt.pid='${post.pid}'

-- Get all Posts of a Tag
SELECT p.*,u.name,u.username FROM bytes.post_tag AS pt INNER JOIN bytes.post AS p ON pt.pid=p.pid INNER JOIN bytes.user AS u ON p.uid = u.uid WHERE pt.tid='${tag.tid}'

Protecting Routes

At the moment, Bytes has the following routes:
- /
- /upload
- /login
- /profile/:id/
- /byte/:id/
- /tag/:id/

Out of this routes, the /upload route is protected, It can be only accessed if the user is logged in.

So to do so, I made a custom hook that would check for user.
If user is logged in, it allows the user else redirect to "/login"

// useRequireLogin.tsx
const router = useRouter();

const { user, setUser } = useContext(UserContext);
const [loading, setLoading] = useState(false);

useEffect(() => {
  setLoading(true);
  firebase.auth().onAuthStateChanged(async (user) => {
    if (user) {
      const authUser = await getAuthUserFromHarper(user.uid);
      setUser({ ...authUser, isLoggedIn: true });
      setLoading(false);
      router.push(to);
    } else {
      setUser({});
      setLoading(false);
      router.push("/login");
    }
  });
}, []);

return { user, loading };

// ------------------------
// Using in the Upload Page
// /pages/upload.tsx
// ------------------------

const { user, loading } = useRequireLogin({ to: "/upload" });

if (loading || !user.isLoggedIn) return null;

Hope you liked this blog and learned something from it.
There are still some improvements and features that I am adding to Bytes.

Socials

You can follow me on my Twitter - @Shubham_Verma18

Introducing Bytes - A platform to share bite-sized learnings!

Shubham Verma — Sat, 19 Jun 2021 03:34:20 +0000

⚠️⚠️ Project is no longer maintained or hosted. The code is available on Github

Introducing Bytes! 🎉 - Bite-Sized Learning

Introducing Bytes! 🎉 - Bite-Sized Learning
- What is Bytes?
- What inspired me to create Bytes?
- Source Code
- Project Link
- The Tech Stack of Bytes
- Usage of Bytes!
- If you are a user on Bytes, you can:
- If you are a creator and you'd like to upload on Bytes.
- Features of Bytes
- Boring Avatars!
- Reactions
- Future Additions
- Socials

What is Bytes?

Bytes is a platform to share bite-sized learnings of any tech topics.

What inspired me to create Bytes?

There are so many content creators out there that post such good content on various social media platforms.
Due to that, the knowledge gets lost between their posts and the social media itself.
So why not have a single platform where they could post their knowledgeable content.
This idea helped in the creation of Bytes!

Source Code

https://github.com/ShubhamVerma1811/Bytes

Project Link

https://bytes.vercel.app

The Tech Stack of Bytes

NextJS - SEO and SSR support
HarperDB - As a Database!
Firebase - Authentication and Storage
TailwindCSS - For design and styling

Usage of Bytes!

If you are a user on Bytes, you can:

View and share any Bytes of the creator
React to bytes as many times as you like!

If you are a creator and you'd like to upload on Bytes.

You can Sign Up on Bytes
Go over to the Upload page
Add your byte title, tags, and images of your byte.
That's it. It's that simple to upload content on Bytes! -Share your bytes on other platforms. -------- ## Features of Bytes
- The user can Filter bytes by tags

They can share the bytes of their favorite creators on social platforms.

Boring Avatars!

All the user avatars in Bytes are unique to the User's Name.
They look cute too!

Reactions

As the name of the website is Bytes, the reactions to the posts are considered bites!
So, if a post had 1024 🔥 reactions, it would display it as 1KB 🔥.
Get it? 1024 Bytes = 1KB. Cool right!

Future Additions

The HashNode - HarperDB hackathon was a great opportunity to make something like Bytes
Until the hackathon, Bytes would run in demo mode, meaning it'll only allow "4" images per post to reduce spam.
If people find Bytes useful, in the future, Bytes could be an invite-only website where genuine content creators could post their learnings!
And it's Open source so, anyone is open to contributing/fork this project!

- I will be writing a separate blog explaining the technical parts of Bytes!

Socials

Twitter - Shubham Verma

DuckDuckGo - The Search Engine for the Developers

Shubham Verma — Thu, 17 Jun 2021 11:35:21 +0000

DuckDuckGo - The Search Engine for the Developers

You might have heard about DDG or even use it every day like me.
But there are many hidden tricks in it that no other search engine can perform,
Today I'll be showing you some of those tricks

DuckDuckGo - The Search Engine for the Developers
- Shorten your URL in one search
- UUID Generator
- Play 2048
- CheatSheets
- Mixed Colors
- Is Website Down
- Generate QR Codes
- ASCII Table
- ASCII to Binary | Hex to Bin |
- Crypto & Currency convertor
- Convertor
- View StackOverflow answers without visiting It
- And Many More

Shorten your URL in one search

Type "shorten " and you would get an instant shortened link to share anywhere.

UUID Generator

Type "UUID" to generate an instant Random UUID for your testing purposes.

Play 2048

2048 is a popular mobile game, you can play it in the browser too.
Type "2048" and you got the game

CheatSheets

You can find cheatsheets for most of the things in one search
Type " cheatsheet"
Ex - "JS Cheatsheet", "VSCode cheatsheet", "React cheatsheet", "AWS Cheatsheet"

Mixed Colors

Want to know what cyan and magenta gives?
Type "mix cyan and magenta" and look for yourself

Is Website Down

Type "is down"

Generate QR Codes

Type "QR " to generate one

ASCII Table

Type "ASCII Table"

ASCII to Binary | Hex to Bin |

Type "ascii to binary"

Crypto & Currency convertor

Type " TO "

Convertor

It provides multiple converters
Type "convertor"

View StackOverflow answers without visiting It

Type "" and a StackOverflow answer would appear on right

And Many More

### There are thousands of them that are available. Checkout DDG Instant Answers
It's Open Source so you can contribute or create your own IAs

Hope you found this blog useful.

My Twitter - Shubham Verma

Let's Polyfill - map(), filter() and reduce()

Shubham Verma — Tue, 18 May 2021 01:40:36 +0000

Map
Filter
Reduce

Map

map is an Array method that takes in a callback and returns
an array of items that were returned from the callback

Example:

const arr = [1, 2, 3, 4];
const res = arr.map((el) => el * 2);

console.log(res); // returns [2,4,6,8]

Let's create our own map method called myMap

myMap() takes in a parameter which a callback/function.
It has a results array that gets returned by the myMap function.
The returned values from our cb are pushed in the results array.
The this here would be the array that we will use this myMap function on.
The traditional map() callback can take 3 args. element, index and the source arr. We have done the same.

function myMap(cb) {
  // rseults results array that gets returned at the end
  const results = [];

  for (let i = 0; i < this.length; i++) {
    // returned values of our cb are pushed in the reults[]
    // 'this' referes to the passed array
    results.push(cb(this[i], i, this));
  }

  return results;
}

// Doing this will allow us to use arr.myMap() syntax
Array.prototype.myMap = myMap;

const arr = [1, 2, 3, 4, 5, 6];
const myMapResult = arr.myMap((el, _idx, _arr) => {
  return el * 2;
});

console.log(myMapResult); //[2, 4, 6, 8, 10, 12];

Filter

filter() is an Array method that takes in a callback and returns
an array of items that satisfy the condition provided in our callback

Example:

const arr = [1, 2, 3, 4];
const res = arr.filter((el) => el % 2); // only return even numbers

console.log(res); // [2,4]

Let's create our own filter method called myFilter

myFilter() takes in a parameter which a callback/function.
It has a results array that gets returned at the end.
The returned values from our cb are pushed in the results array.
The this here would be the array that we will use this myFilter function on.
The traditional filter() callback can take 3 args. element, index and the source arr. We have done the same.

function myFilter(cb) {
  const results = [];

  for (let i = 0; i < this.length; i++) {
    const cbResult = cb(this[i], i, this);
    // the returned value of callback is true only then push it to the results
    if (cbResult) results.push(this[i]);
  }

  return results;
}

// Doing this will allow us to use arr.myFilter() syntax
Array.prototype.myFilter = myFilter;

const arr = [1, 2, 3, 4, 5, 6];

const foo = [
  { name: "S", age: 2 },
  { name: "V", age: 3 },
];

const myFilterResult = foo.myFilter((el, _idx, _arr) => {
  return el.name !== "S";
});

console.log(myFilterResult); // [{ name: "V", age: 3 }]

Reduce

Here the MDN definition of it.

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

It takes in two important parameters.
accumulater and currentValue

Example:

const arr = [1, 2, 3, 4];
const res = arr.reduce((acc, curr) => {
  acc += curr;
  return acc;
}); // 10

console.log(res); // 10

Lets create our own reduce() method called myReduce()

myReduce() takes in a parameter which a callback/function.
It returns a single reduced value.
The returned values from our cb is assigned to the acc.
The this here would be the array that we will use this myReduced function on.
The traditional reduced() callback can take 4 args. accumulator, currentValue, index and the source arr. We have done the same.

function myReduce(cb, initialValue) {
  let acc;
  let curr;

  if (!this.length && !initialValue)
    throw new Error("Can't reduce on empty array, provide initial value");
  else {
    //  If initialValue is given then acc is that or acc = is the 0th index of this
    acc = initialValue ? initialValue : this[0];
    for (let i = 1; i < this.length; i++) {
      // current value of the array
      curr = this[i];
      // the retuned cb value is assigned to acc
      acc = cb(acc, curr, i, this);
    }
  }
  return acc;
}

// Doing this will allow us to use arr.myReduce() syntax
Array.prototype.myReduce = myReduce;

const myReduceResult = arr.myReduce((acc, curr, _idx, _arr) => {
  acc += curr;
  return acc;
});

console.log(myReduceResult); // 21

If you find any errors or edge cases in the above code then please let me know. I am happy to learn about them and add them here.

In the next blog in this series, I'll try and write our own debounce function from the loadash library

Also, if you guys want to see polyfills of your libs then let me know in the comments.

Hope this blog was helpful to you.

Implement Protected Routes in NextJS

Shubham Verma — Wed, 20 Jan 2021 04:16:00 +0000

Protecting Routes from unauthenticated users is a crucial part of any app.

In this blog, I'll show you exactly how to do that with your NextJS pages using Higher-Order Components. [1]

There can be several ways of authenticating a user like using cookies or JWT tokens.[2]

I'll be using JWT token as an example, where the accessToken is stored in the localStorage

Let's consider a page "/dashboard". This page should be only accessed by authenticated users

In our `Dashboard.jsx`

// pages/dashboard.jsx
import withAuth from "HOC/withAuth.js";
const Dashboard = ({ user }) => {
  return (
    <div>
      <h1>Dashboard</h1>
      <h2>{user.name}</h2>
    </div>
  );
};

export default withAuth(Dashboard);

Notice that we are importing withAuth.jsx and exporting the page by passing it as an argument. That is all we need to do for our pages.

In our `withAuth.jsx`

I'll show you two methods of implementations:

Method 1: We don't verify the token
Method 2: We verify the token

Method 1: (We don't verify the token)

// HOC/withAuth.jsx
import { useRouter } from "next/router";
const withAuth = (WrappedComponent) => {
  return (props) => {
    // checks whether we are on client / browser or server.
    if (typeof window !== "undefined") {
      const Router = useRouter();

      const accessToken = localStorage.getItem("accessToken");

      // If there is no access token we redirect to "/" page.
      if (!accessToken) {
        Router.replace("/");
        return null;
      }

      // If this is an accessToken we just render the component that was passed with all its props

      return <WrappedComponent {...props} />;
    }

    // If we are on server, return null
    return null;
  };
};

export default withAuth;

Method 2: We need to verify the token.

// HOC/withAuth.jsx
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
// the below function could be any of your custom implementation for verifying the token. I've added it as means of explanantion
import verifyToken from "services/verifyToken";

const withAuth = (WrappedComponent) => {
  return (props) => {
    const Router = useRouter();
    const [verified, setVerified] = useState(false);

    useEffect(async () => {
      const accessToken = localStorage.getItem("accessToken");
      // if no accessToken was found,then we redirect to "/" page.
      if (!accessToken) {
        Router.replace("/");
      } else {
        // we call the api that verifies the token.
        const data = await verifyToken(accessToken);
        // if token was verified we set the state.
        if (data.verified) {
          setVerified(data.verified);
        } else {
          // If the token was fraud we first remove it from localStorage and then redirect to "/"
          localStorage.removeItem("accessToken");
          Router.replace("/");
        }
      }
    }, []);

    if (verified) {
      return <WrappedComponent {...props} />;
    } else {
      return null;
    }
  };
};

export default withAuth;

Footer

Wasn't that easy!

I hope this blog helped you. If you got any queries or feedback then let me know 😀

Tweeter - A Twitter clone made using React + Firebase

Shubham Verma — Wed, 06 Jan 2021 12:17:01 +0000

For the curious ones:

Live Demo : https://tweeter-eight.vercel.app

GitHub Repo : https://github.com/ShubhamVerma1811/Tweeter

Table of Content

Table of Content
Tech Stack
Reason for choosing this Tech Stack
- NextJS
- TailwindCSS
- Firebase
Problems with this Tech Stack
- TailwindCSS
- Firestore
Features of this website.
- Authentication
- Tweets
- Users
- Firebase Storage Bucket

Tech Stack

The Tech stack that I used for this project is:

NextJS for the frontend framework
TailwindCSS for the CSS framework
Firebase as the Database.

That's it!

Here's the look at the dependencies in the package.json file

{
  "dependencies": {
    "@material-ui/core": "^4.11.1",
    "@material-ui/icons": "^4.9.1",
    "firebase": "^8.1.1",
    "next": "10.0.2",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "shortid": "^2.2.16"
  }
}

Reason for choosing this Tech Stack

NextJS

I chose NextJS because it has SSR capabilities, built-in Routes support.

TailwindCSS

I chose TailwindCSS because it's the best! I didn't have to care about class names. Even though Tailwind has its limits.

Firebase

The big one, Firestore. Now Twitter is highly SQL based and Firestore is a NoSQL DB. The reason I chose Firestore because I wanted to learn it.

Problems with this Tech Stack

TailwindCSS

The problem with Tailwind is that it has its limits. Not every CSS styles are supported, you need to extend it if you need to use it.
This is a great feature, but for a person like me who never worked with the tailwind.config.js file, it was an issue and I had to use inline style to achieve certain looks.

Firestore

Firestore is a NoSQL DB and Tweeter uses SQL relationships.
So to solve this, I created SQL-like relations in Firestore.
But due to the nature of Firestore which is NoSQL and me writing SQL-like relationships, the query takes a long time to execute.
This is the thing I realized that why Firebase was a bad choice. -The major feature of Twitter would be "retweets", but I had to skip that implement' in FIrestore because the query would take even more time to execute.
- Use of Firestore made me realize how powerful SQL databases are.

For example:
A user table that looked like

userID	email	name	username	createdAt
JK12Ac	test@test.com	Rick Roll	rickroll68	1st Jan 13:00

And a tweets table that looks like

tweetID	authorID	tweet	parentTweet	createdAt
JL150	JK12Ac	Hello	null	2nd Jan 2:30

Features of this website.

Authentication

The authentication was implemented using Firebase Authentication. It used the "Email/Password" method to authenticate.
To use the service, a user needs to sign up.

Tweets

A User can post tweets, add a single image to tweets, comment on other tweets.
User can also Like tweets and Save them as Bookmarks.
Deletion of a tweet can also be done.

Users

Users can follow other users.
Followed user tweets are visible on the Home Page.
The user can also delete their tweets and account.

Firebase Storage Bucket

The images present in a tweet are stored in the Firebase Storage Bucket.

If you liked this blog then do let me know. I am new to blogging and would love to know your thoughts.

Basic JavaScript: Data Types

Shubham Verma — Fri, 18 Sep 2020 05:54:15 +0000

Data Types are important concepts in any language. They define the type of data a variable can hold.

In JavaScript, we have various data types like:

Number
String
Boolean
Arrays
Object
null
undefined

The typeof() function can be used to see the data type of the variable.

Number

This data type can hold integers from -Infinity to +Infinity including floating-point numbers.

var a = 2;
console.log(typeof(a)); // "number"
var b = 3.56;
console.log(typeof(b)); // "number"

String

A String is a sequence of characters. String are denoted using " " or ' '

var name = "Developer";
console.log(typeof(name)); // string

var letter = "A";
console.log(typeof(letter)); // string

Boolean

A boolean is a true or false value.

var isRaining = true;
console.log(typeof(raining)); // boolean

var isLoggedIn = false;
console.log(typeof(isLoggedIn)); // boolean

Arrays

Arrays are a collection of similar data types. They are denoted using square brackets [ ]

var numbers = [1, 2, 3, 4, 5]; // array of numbers
var colors = ["red", "green", "blue"]; // array of strings

But, in JavaScript, an array can hold various data types too.

var numbersAndColors = [1, "blue", 2, "red", 3];

You can access the value of the array by its index.
Every array has an index that starts with 0.

console.log(colors[0]); //red
console.log(colors[1]); //green

console.log(numbers[0]); // 1
console.log(numbers[1]); // 2

Object

In JavaScript, an object is a collection of key: value pairs.
They are denoted using the {} brackets

var obj = {
  name: "Shubham",
  age: 20,
  role: "Frontend Developer",
  isStudent: true,
  hobbies:['coding","reading","eating"]
};

Each object's key: value pair must be separated by a comma.

The data of an object can be accessed by the following syntax.

Syntax:

ObjectName.keyName = if the key is a String.
ObjectName[keyName] = if the key is a Number

var obj = {
  name: "Shubham",
  age: 20,
  role: "Frontend Developer",
  100: "Hundred",
};

console.log(obj.name); // "Shubham"
console.log(obj.age); // 20
console.log(obj[100]); // "Hundred"

null

A null data type means that value doesn't exist in memory.

undefined

An undefined type means that value exists but is not yet defined.

var a;
console.log(a); // undefined

These are the basics data types present in JavaScript.

Next, we will learn about JavaScript Operators.

Basic JavaScript: Variables

Shubham Verma — Wed, 16 Sep 2020 03:21:39 +0000

Let's start with Variables.

A Variable is a container that can hold a certain value, like in Maths we have variable x=2 or x+y=2 where x and y are variables that can hold a number.

In JS, we define a variable using var keyword.

var a = 2; // here "a" holds the value 2

Here's an another example:

var b = 6;
var c = 4;
console.log(b+c); // Now b = 4 and c = 6, so output will b +c i.e 10

Variables can hold various Data Types, which we'll learn in futher lessons.

For example:

var greet = "Hey There!";  // greet holds a String data type.
var age = 21; // age holds an integer data type.

NOTE: If you declare a variable with var keyword initially and the re-assign a different value to it, the previous value gets overwritten.

var name = "Elon Musk"
console.log(name); // Elon Musk gets logged.

var name = "Tesla"
console.log(name); // name is now Tesla, not Elon Musk

Next, We'll learn about Data Types in JavaScript.

If you have any reviews about this series or my way of explaination, then please let me know 🙂.

Basic JavaScript : Intro

Shubham Verma — Tue, 15 Sep 2020 09:54:25 +0000

What is JavaScript?

JavaScript is a programming language designed for the web.

How is JavaScript used?

JavaScript is used to manipulate HTML and CSS.
It can also calculate, manipulate and validate data.

What is the difference between JavaScript and NodeJS?

JavaScript also called Vanilla JavaScript is a programming language for the web.
NodeJS is an environment to run javascript apart from running on the web.

Which one are we going to learn?

Since this is the basics of JavaScript, it wouldn't matter if it's Vanilla JS or NodeJS.

Environment Setup for learning?

The easy way of executing JS can be done right into your browser's console tab.
The second way, which is to go to NodeJS Website and download the "LTS" version of it.

Next, we will get started with JavaScript Variables.

Hello, Blog World!

Shubham Verma — Mon, 14 Sep 2020 06:50:33 +0000

Hey there! 👋

I am Shubham Verma, a Frontend Developer from India.
This is my first step into the world of blogging.

The reason I wanted to get into blogging is that I am studying Computer Science at my college.
And there are a lot of my friends who don't understand programming or they lack the basics of it.
So, in this blog, I would be posting blogs on the basics of those languages.

DEV Community: Shubham Verma

Building Dynamic Seat Layout Rendering in React from Sparse JSON (BookMyShow/District-style)

1) What the backend JSON looks like (District API response)

What each field means for UI

2) The core problem: sparse lists don’t render like a theatre

3) The strategy: indexed placement into pre-sized arrays

Why this works

4) Building a “grid” for the UI

4.1 Row-level grid (vertical positioning)

4.2 Seat-level grid (horizontal positioning)

5) Rendering becomes trivial after grid alignment

6) Flexibility: any seat at any 2D point

7) Handling multiple layouts in one JSON dump

8) Practical notes / lessons learned

8.1 Stable sizing matters

8.2 Don’t let layout collapse

8.3 Keys and rerenders

9) Summary

References

The easiest way to write Markdown in NextJS!!

Installation

Configuration

Usage

Output

References

Socials

If you like my content then do follow me on Twitter Shubham Verma

Technical Aspects of Bytes

⚠️⚠️ Project is no longer maintained or hosted. The code is available on Github

Table of Contents

Tech Stack

NextJS

HarperDB

TailwindCSS

Firebase ( Storage and Authentication )

Database Modelling

Schemas

User Schema

Post Schema

Tag Schema

Post_Tag Schema

Relationships

User <-> Post

Post <-> Tags

Protecting Routes

Socials

Introducing Bytes - A platform to share bite-sized learnings!

⚠️⚠️ Project is no longer maintained or hosted. The code is available on Github

Introducing Bytes! 🎉 - Bite-Sized Learning

What is Bytes?

What inspired me to create Bytes?

Source Code

Project Link

The Tech Stack of Bytes

Usage of Bytes!

If you are a user on Bytes, you can:

If you are a creator and you'd like to upload on Bytes.

Boring Avatars!

Reactions

Future Additions

- I will be writing a separate blog explaining the technical parts of Bytes!

Socials

DuckDuckGo - The Search Engine for the Developers

DuckDuckGo - The Search Engine for the Developers

Shorten your URL in one search

UUID Generator

Play 2048

CheatSheets

Mixed Colors

Is Website Down

Generate QR Codes

ASCII Table

ASCII to Binary | Hex to Bin |

Crypto & Currency convertor

Convertor

View StackOverflow answers without visiting It

And Many More

Hope you found this blog useful.

My Twitter - Shubham Verma

Let's Polyfill - map(), filter() and reduce()

In our `Dashboard.jsx`

In our `withAuth.jsx`

The `typeof()` function can be used to see the data type of the variable.