DEV Community: Sooraj (PS)

Moonlit Halloween: A CSS-Only Jack-o’-Lantern Under the Night Sky

Sooraj (PS) — Sat, 08 Nov 2025 23:57:37 +0000

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

I wanted to capture the cozy-but-spooky feeling of a Halloween night, a glowing jack-o’-lantern sitting under the moonlight.
My inspiration came from classic animated Halloween scenes where the light from the pumpkin flickers softly, giving life to the night around it.
Instead of relying on images or SVGs, I wanted to see how far I could push pure CSS gradients, pseudo-elements, and keyframe animations, to build something atmospheric and alive.

Demo

Journey

This started as a simple pumpkin, but once I nailed the shape and glow, I couldn’t stop adding details, a stem with gradient lighting, a pale moon with craters, a soft floor reflection.

A few highlights from the build:

The pumpkin is entirely layered using CSS ellipses and gradients (no images).
CSS variables helped me keep the color palette warm and cohesive.

Struggles

Some of the struggles I faced when trying to make the tiny details are as follows.

For the pumpkin tooth, I had to make sure that the transition between the tooth and different parts of the pumpkin. So I had to use a linear gradient at an angle to match the separations
Similarly for the smile, I was not able to make a crescent shape without using clip-path. I used the same principle of adding a mask using another element with an ellipse radial gradient to match the separation of the pumpkin
For the pumpkin stem I ended up using a clip-path with a similar radial gradient and another element to simulate the top of the stem

What I learned:

Layering gradients with opacity creates depth — even in flat, 2D art.
You can achieve a surprisingly cinematic vibe with just a few lines of well-placed CSS.

Next, I’d love to extend this into a looping CSS Halloween card, with fog drifting, bats swooping, and the candle glow subtly pulsing in sync with the scene’s atmosphere.

👻✨ Pure CSS can be magic when the lights go out!

Frontend challenge

Sooraj (PS) — Fri, 11 Jul 2025 14:14:56 +0000

✨ A Tribute to Juneteenth – A Scroll Through History

Sooraj (PS) — Fri, 13 Jun 2025 00:22:16 +0000

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

For the June Frontend Challenge, I created a dynamic landing page commemorating Juneteenth — the powerful celebration of freedom in the United States. Rather than a static site, I wanted to take users on a scrolling timeline journey, visualizing key milestones in Juneteenth’s history through a blend of historic artwork and modern UI animations.

The concept was simple: let the years roll by, and let the story unfold.

Demo

You can find the Github Repository here: https://github.com/SoorajSNBlaze333/juneteenth-2025-landing

Tech Stack used
• ⚡ Vite — for blazing fast dev server
• ⚛️ React — UI rendering
• 🎨 Tailwind CSS — utility-first styling
• 🌀 Framer Motion — animations and transitions

The Live version is deployed here: https://juneteenth-2025-landing.vercel.app/

Journey

This challenge was my playground for deep-diving into Framer Motion — its ability to animate layouts and transitions is truly next level.

I didn’t want just a “nice layout.” I wanted it to feel like history was scrolling past you — smooth, respectful, and elegant. So I layered in a few small but impactful touches:

Thoughtful Details:
• 🎞️ Rolling year digits that flip as you scroll — adding rhythm to the timeline.
• 🔲 Grid-aligned sections with matching borders for a continuous visual thread.
• 🎯 Snap-to-center scrolling so each historical moment gets its spotlight.
• 🎹 Keyboard navigation support for accessibility and a smoother UX.
• 📸 Image hover reveals for historical documents and figures.
• 📦 Scroll-triggered animations to keep the experience lively and flowing.

What's next

Although I’m proud of the final result, there’s always room to improve:
• 📈 Lighthouse Score: I’ve optimized most areas, but I’m aiming for a perfect 100.
• 📱 Mobile Responsiveness: With this much interactivity, a responsive mobile layout needs thoughtful re-architecture — I’m actively exploring this.

❤️ Final Thoughts

This project means more than just code. Juneteenth is a story of struggle and celebration, and I wanted to reflect that with carefully chosen visuals and deliberate design. It’s a tribute through UI, and I hope it both informs and inspires.

Let me know your thoughts — feedback is welcome! 🙌

I built a WhatsApp Web UI Clone - Chats section

Sooraj (PS) — Mon, 26 May 2025 18:13:15 +0000

🚀 Just Finished Building a WhatsApp UI Clone (Chats section) — Built with React & Dynamic Mock APIs!

Over the past few weeks, I’ve been working on a detailed frontend clone of WhatsApp Web — built entirely using React, Tailwind, and mocked API services. My goal was to recreate the real chat experience without storing any static UI data. Every message, contact, and interaction is dynamically fetched — making the app easily integratable with backends like Firebase, Supabase, or a custom Node API.

Here are some highlights I’m proud of:
✅ Dynamic routing and rendering of chat messages based on selected contact
✅ Simulated “typing” indicator & new message injection for live UI testing
✅ Reaction support with bounce + stagger animations (LTR or RTL depending on sender)
✅ Modular state management using React Contexts (Chats, Contacts, Tabs, Profiles, etc.)
✅ Fully responsive layout modeled after WhatsApp Web
✅ Future-ready: Planning to implement IntersectionObserver to enable lazy loading older messages when scrolling to the top

🔧 Built for scalability — the frontend is backend-agnostic and ready for real-time integrations

Would love your feedback or suggestions! 🙌
You can view the project source code here: https://github.com/SoorajSNBlaze333/whatsapp-react-clone
Live App: https://chat-react-clone.vercel.app

🎬 I Built a YouTube Clone

Sooraj (PS) — Tue, 13 May 2025 03:21:44 +0000

React. TypeScript. Next.js. Tailwind. Framer Motion.

Hey fellow devs! 👋

I recently embarked on a wild ride: building a YouTube clone from scratch for my portfolio. Why? Because watching YouTube wasn’t enough. I wanted to become YouTube (minus the billion-dollar budget and the legal team).

Here’s how I did it, what I learned, and how many times I yelled “why is this not working?!” into the void.

Github Repository - https://github.com/SoorajSNBlaze333/youtube-video-view

Live App - https://y-video-clone-two.vercel.app

🚀 Week 1 - The “Optimism” Phase

Ah, Week 1. Back when I thought this would be easy.

📝 Tech Stack I used:

React (because I’m not a monster)
TypeScript (because I love suffering with strict types)
Next.js (SSR, baby!)
Tailwind CSS (utility classes = sanity)
Framer Motion (because even my modals deserve personality)

💪🏻 What I tackled:

Creating a responsive layout.
Main video feed and the different sections.
Making it look vaguely like YouTube without getting sued.

🏆 Win of the week: Made my first video card component. It looked suspiciously good. I stared at it for 10 minutes like Michelangelo looking at David.

💩 Fail of the week: I used div soup everywhere. Refactored it all the next day. RIP productivity.

🎥 Week 2 – The “Feature Frenzy” Arc

This is the week when I stopped thinking, “Maybe I’ll finish early,” and started thinking, “What have I done?”

🧱 What I built:

A complete backend (psst I just used Next's api mocks to simulate a backend that sends me all the info I need. You name it video data, channel data, shorts data and even the current video as a stream).
The Shorts section – Yes, I cloned TikTok inside my YouTube clone. It scrolls vertically, it auto-plays, and it probably gives off Gen-Z energy.
The video list section – Think “related videos,” “recommended,” and “clickbait paradise.”
Video metadata display – Views, likes, channel name, upload date, and that dangerously addictive “Subscribe” button (which, spoiler alert, doesn’t do anything… yet).

🎯 Win of the week:

I used Framer Motion to add slick transitions between sections.

😵‍💫 Moment of pain:

“Why is this video taking up 100% of the screen on mobile?”

– Me, to no one, at 2AM

🧪 Week 3 – Polish, Deploy, and Full-On Control Freak

This week, things got serious. Not only was I chasing pixel-perfection like a caffeine-powered UI goblin, but I also dove deep into custom media control territory.

🎮 What I built:

A full custom video player UI – Sure, I used ReactPlayer to handle video playback (because reinventing H.264 is not on my bucket list), but every single control — play/pause, volume, full screen, the scrubber/slider, and even the time duration display — was built from scratch.
Yes, I coded the slider. Yes, it made me question my life choices. Yes, it looks amazing now.
Responsive polish – No matter what screen size you throw at it, the layout now behaves like a disciplined flex-box ninja.
Animations, again! – Subtle transitions for the player controls using Framer Motion. They fade in/out based on hover/focus. It’s like Netflix, but with more love and less licensing.

🧯 Panic moments:

“Why is my custom slider controlling the volume instead of the timeline?”

– Me, after 30 minutes of fighting state like it owed me money

🎉 Deployed to Vercel:

At the end of the week, I pushed everything to Vercel and just… stared at it. Not gonna lie, I hit play on my own video and watched it for 10 minutes like it was a Hollywood premiere.

🧠 What I Learned (besides the limits of my sanity)

Next.js + Tailwind = 💖: I would swipe right on this combo any day.
TypeScript saves you later, haunts you now. The autocomplete was amazing though.
Animations make a huge difference. A 300ms transition can make your app feel chef-level.
Mock data is your best friend. Until you replace it with real data and everything breaks.

🎯 What’s Next?

Maybe I’ll add:

Search functionality
Real backend integration (Firebase? Supabase? Skynet?)

Or maybe I’ll just watch actual YouTube for a bit and chill.

“Ever built a YouTube clone or something wildly overambitious just for fun? Tell me about it 👇”

Personal Dev Portfolio

Sooraj (PS) — Tue, 25 Mar 2025 14:24:49 +0000

Face it! Every one of us has started a portfolio or a side project and setup everything just to not touch it for the next couple of months.

And then one day out of the blue, you remember that you had started this and get the fire in you started again to finish the project. And then you take a look at what you wrote and go

Well, I am no different, I started this project a year ago and completely forgot about it. My old portfolio was too outdated and contained broken links. So I decided that I was gonna change that. And as usual, I stopped after 3 days 😂. But I did not give this up, kept going at it again and again.

And I finally made it!. I updated my dev portfolio 😂😂😂.

This is the link to it https://www.soorajsivadasannair.dev. You guys can take a look at it and constructive feedback is more than appreciated.

This is a post of all the developers who have started a project and have stopped it for personal reasons or just forgot about it. Keep going at it. One day you will finish it!

CSS Art: June (The peaceful days)

Sooraj (PS) — Mon, 10 Jun 2024 01:22:13 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

Today I am posting a figment of my imagination in the form of the June CSS Challenge. Where I live, June means it's sunny, cloudy and raining at the same time. And where I live is green and full of trees and also has deer nearby. So I put them all together. Whenever I open my patio windows, I see something like this. This is what I tried to put in my CSS art. This is my inspiration.

Demo (Please re-run the pen for the best results)

Here is the codepen link for the project.

Journey

Step 1: Where to start

Figuring out what kind of a scene I was gonna create. This is one of the most hardest parts of the challenge, as if I choose something that would be too hard, I would lose interest and would give up. It had to be something that I see every day and I love seeing so that I would finish it no matter what. That is why I chose this.

Step 2: What are all the main parts

Now let's figure out what all will make up the scene. Like I mentioned it's hot, its cloudy, so we need the Sun and some clouds. Next I mentioned it's green and full of trees, so we also need green meadows and a few trees. Next I mentioned deer, since I cannot add a whole bunch of deer, I represent all of them together as one single deer.

Step 3: Putting all the parts together

Now that we have all the parts, we start off creating each part separately, I started off with the sky, with the Sun in the middle of the sky and some static clouds. Wait! clouds move don't they, so I added some keyframes for the clouds to move like they do in the sky.
Next up would be some green meadows. I took some inspiration off of google by searching for some low poly images for a summer scene and I remembered the windows wallpaper we all used to see.

So after I added those cute little meadows, let's add some trees on each of them. Now let's add the main character, our deer.

The deer was the part that took the most time to create as it has a lot of elements on it. The body, neck, head, ears, tail, front legs, hind thighs, legs, antlers aaaah!, so many parts. Let's start from the body. I created the deer based off a few google results like "low poly deer"

After the deer was painstakingly created, I couldn't just leave it static. I had to give it some life, so I animated the deer bending its neck to eat some grass, its tail and ears twitching also.

Finally it was to put everything together as I had envisioned in my mind. When I open my patio window I see this image, so I made an opening window out of the screen.

This is my first css challenge not following some of the conventional UI design and development techniques. I thank dev.to for providing this opportunity to explore and showcase my creativity.

Queuing Rest Apis using JavaScript

Sooraj (PS) — Mon, 10 Apr 2023 16:46:24 +0000

Many of us web developers, frontend developers, fullstack developers have been using REST apis for ages. I am also one of these developers who constantly uses rest apis for my web apps. But whenever I used them, I would often wish that the library I choose would have an inbuilt Queue in them to handle requests, keep them stored in case of a network issue or something else, resume the handling of the request once the internet is running again all while handling 1 request at a time to avoid any inconsistencies with data.

Just to make things clear, I am not the most perfect developer so I do make mistakes quite often. That is where I would need you guys' help. I have come up with a small wrapper Class and function around the http library that I often use (axios) to implement a queuing system. It is not the best solution yet, but with some changes and good optimization it could be.

As you can see above, I have made things fairly simple by creating an API class that handles the request in a generic format and then I have created a function called queuedAPI that will expose the api methods of the API Class and queue them into the queue. Once it is added to queue, the requests are dequeued in the order in which they were added to the queue. I am also making sure to see if the client has a navigator object and if we are connected to internet before dequeuing the promise. If we are not connected to the internet, we will keep looking until the browser gets a connection to the internet. I know this is performance intensive, but I am trying to write an observer or find different ways to limit the number of retries. One way could be to use a limit variable like RETRY_LIMIT = 5 or something like that.

Another idea that I have is to store the queue in the local storage of the browser. This is because if the internet is lost and the user refreshes the page, then the queue would become empty. If I were to store the queue in the local storage then I would be able to access it on the page load and dequeue the existing queue requests that was done before the page refresh. But that would also mean that I would have to find a way to not store any sensitive information that would be passed in the api such as password info or payment info. So I would have to avoid those apis and provide an option in the api if the developer would like that api to be stored in a temp storage or not.

Lastly I would like to add a priority to each queue item, so that the queue is dequeued with priority in mind.

App.jsx

import { useEffect, useState } from "react";
import Button from "./components/Button";
import api from "./libs/api";

const App = () => {
  const [counter, setCounter] = useState(0);
  const [apiData, setApiData] = useState(null);
  const [online, setOnline] = useState(navigator.onLine??false);

  const handleClick = (method = 'get') => {
    setCounter(api.currentQueue.length + 1);
    let request = api.get;
    if (method === 'post') request = api.post;

    return request('https://62baf8ff573ca8f8328ff37d.mockapi.io/api/v1/users')
      .then((data) => setApiData(JSON.stringify(data)))
      .then(() => setCounter(prev => prev - 1))
      .catch((error) => console.log(error));
  }

  useEffect(() => {
    setInterval(() => {
      setOnline(navigator.onLine??false);
    }, 2000);
  }, []);

  const renderNetworkStatus = () => {
    if (online) {
      return <div className="flex justify-center items-center border-2 border-green-500 bg-green-50 rounded-full px-2">
        <div className="h-2 w-2 bg-green-500 rounded-full mr-1" />
        <div className="text-green-500 text-xs font-semibold mb-[0.5px]">online</div>
      </div>
    }
    return <div className="flex justify-center items-center border-2 border-red-500 bg-red-50 rounded-full px-2">
      <div className="h-2 w-2 bg-red-400 rounded-full mr-1" />
      <div className="text-red-500 text-xs font-semibold mb-[0.5px]">offline</div>
    </div>
  }

  return (
    <div className="h-full w-full flex justify-center items-center flex-col">
      <div className="text-3xl my-2">Requests Left in Queue: {counter}</div>
      <section className="flex justify-center align-center gap-2">
        <Button onClick={() => handleClick('get')}>Make get request</Button>
        <Button onClick={() => handleClick('post')}>Make post request</Button>
      </section>
      <div className="text-xs overflow-y-auto max-h-[400px] p-4">{apiData}</div>
      <div className="absolute bottom-3">{renderNetworkStatus()}</div>
    </div>
  );
}

export default App;

I'm also adding a small video clip of the queue when we request apis but not connected to the internet and then how the apis execute in order when we are connected again.

If you guys feel that there is any kind of optimization or refactoring that can be made to make this even better or faster, please let me know in the comments.

And if you do like this idea please star this gist that contains the code for the queue API
https://gist.github.com/SoorajSNBlaze333/e6cd7d3103272af7298b4414cd19b024

Simple Javascript Modules - Local Storage Module

Sooraj (PS) — Sat, 26 Jun 2021 13:50:40 +0000

Working as a web developer I work on the client side dealing with lots of continuous data from the server. All though it is a good practice to not store data on the client side, there will be many cases where we want to store some information on the client for faster access. A good use case would be the app theme theme: "light" or theme: "dark".

So that is where we can use Local Storage of the Browser using the window.localStorage API. It is a free storage space available for almost all major browsers and we can save a considerable amount of safe data for quick use in our application. It can be found on almost all major browsers. You can view, modify or delete the local storage data under the Application Tab in your browser followed by Local Storage and clicking your domain.

As you can see here in the code below, I have added all the things that we mostly do with local storage. Usually all these functions are separately written in a utility module. But here I have kept it separately so that in any case of change, we just replace the functions inside the module and our application code remains untouched. The whole point of writing these functions together as a module is to keep the code clean, crisp and understandable.

// A localStorage object for performing crud operations on window.localStorage with ease

const Storage = {
  // check if local storage is supported on browser
  exists: (window.localStorage !== undefined),
  // get the local storage data of the key
  get(key) {
    if (!this.exists) return;
    const data = window.localStorage.getItem(key);
    if (!data) return;
    return JSON.parse(data);
  },
  // add a new data to given key in local storage
  add(key, data) {
    if (!this.exists) return;
    window.localStorage.setItem(key, JSON.stringify(data));
  },
  // remove the data by the given key from local storage
  remove(key) {
    if (!this.exists) return;
    window.localStorage.removeItem(key);
  },
  // wipe entire local storage of current domain
  wipe() {
    if (!this.exists) return;
    window.localStorage.clear();
  }
}

export default Storage;

I have written a total of 5 properties on my module here which will use the window.localStorage API and are as follows.

1.exists - This contains a boolean value that checks if the current browser supports local storage or not.

2.get(key) - This function is used to get the data that is associated with the key that is sent in the parameters. For example if get("name") will get you the data that is saved under the name key in local storage. This function calls the window function called localStorage.getItem() which takes 1 parameter "key".

3.add(key, data) - This function is used to add new data to the local storage. The key attribute specifies to which key the data should be added to and the data attribute contains the data to be added. This function calls the window function called localStorage.setItem() which takes 2 parameters "key" and "data". It could be anything like a string, number, array, object etc.

For example running this =>

Storage.add("myKey", { name: "Sooraj" })

Will add this under the key called "myKey"

4.remove(key) - This function is used to remove the data associated with the key that is sent in the parameters. This function calls the window function called localStorage.removeItem() which takes 1 parameter "key". If remove("myKey") is called the data that was added before would be cleared from the storage.

5.wipe() - This is a method I would not use that many times. This function calls the window function called localStorage.clear() which takes no parameters. This function clears all the local storage data associated with the client on that domain.

Well, this is my Storage module. Hope you guys found it useful. Go ahead and try it out...

Space Physics

Sooraj (PS) — Sun, 30 May 2021 07:46:45 +0000

So last month I was bored and decided to have some fun by coding some space related stuff. I took 5 space related topics but I have added 2 of them here since the rest are still in work in progress. I have been so much in to Space and Astronomy recently and then I wrote this simply to understand what happens and how it happens. These are my codepens

How a satellite/asteroid/comet changes it speed and trajectory using the help of a planet or any other object with a gravitational force.

Saturn's rings using real gravitational physics. The rings are actually small particles moving at high speed held together by the gravitational force but I keep the trails to look like there are more particles there. There are lots of properties to adjust on the codepen. Feel free to check it out.

The code is a little unoptimized for now so I am not adding the codepen embed here but here is the link to check it out https://codepen.io/SoorajSnBlz/pen/Vwprmdv

Animated Buttons using Javascript (GSAP) - 1

Sooraj (PS) — Wed, 25 Nov 2020 07:28:17 +0000

Hey there guys,
Here is a small animation ripple effect I created using gsap. I created this using just an event listener and a <span> tag along with the gsap fromTo() method. This is just one of the cool animations you can create.

Furthermore, you can stagger up your animations by using the stagger property. Stagger will basically run your animations which come under the same property, for example multiple ripples, to run sequentially with a small delay in between them, like this.

Web-App using HTML, JS & Firebase - Part 2

Sooraj (PS) — Tue, 10 Nov 2020 04:03:35 +0000

Now that we have covered the basics of Firebase using a simple HTML & JS form, Let us move to the next steps. In this part we will be seeing how to connect Cloud Firestore to the UI in real time and make real time changes in the client.

To start off with the real time connection, we will reuse our old project that we had created in the part 1 of this series. For this we will be creating a live feed section like Twitch Chat. We will be using Cloud Firestore’s real time methods to update all the changes across all the clients that are connected to the feed keeping them in sync.

Let’s start off by creating a new index.html file under the public directory. We will rename our old index.html file and keep it there just in case we need it for reference. First we will create a new collection in our database called feeds. This collection will have a document for each feed message that is created.

Now let’s render our feeds collection using cloud firestore. Normally, we will just use the get() method right? This time we will go for something called onSnapshot(). Let’s write that inside our script tag. First let’s log our data, then we will display the result as HTML.

// variables
const firebaseConfig = {
  // your config
};
firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();

// firebase functions
function listFeeds() {
  return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
    let feeds = [];
    querySnapshot.forEach(function (doc) {
      feeds.push({
        id: doc.id,
        ...doc.data(),
      });
    });
    console.log(feeds);
  });
}

listFeeds();

Cloud Firestore has a method called onSnapshot that is triggered every time the collection changes. This method can also be used on a document to detect the document change. The method provides you with a callback function with the querySnapshot of all the documents in the collection at that point of time.

Then, we need to loop through each snapshot in the querySnapshot to extract our document data. You can log the doc object in the loop to check for all the possible types of data you can use to your needs.

In this example, I will be using the id key which holds the document id and the data() to get the body of the document. Let’s run the HTML file and check for our log.

And there you go, we have our first message loaded in the log. Now let’s try updating our collection using the Firestore Console and see if it triggers on the client side without refreshing the client.

After updating the feeds collection you can now see that a new log has been created and the new list is shown here. Now we will use this to list our feed. We will just list our feed using a li tag and some simple bootstrap styles.

First we will create a ul tag with the ID feeds,

<ul id="feeds" class="list-group list-group-flush"></ul>

And now, let’s modify our listFeeds() function to something like this. This will indeed cause a problem (for every fetch we will get a history of data, so the IDs will be duplicated in listFeeds()) but for now we will see what we get.

function listFeeds() {
  return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
    querySnapshot.forEach(function (doc) {
      let feed = document.createElement("li");
      feed.setAttribute("class", "list-group-item");
      feed.setAttribute("id", doc.id);
      feed.innerText = doc.data().message;
      document.getElementById("feeds").append(feed);
    });
  });
}

To make life easier let’s create a simple form that will add a new feed on submission. We will use the add() method of Firestore once again to add a new document to the collection. Let’s add something like this,

<ul id="feeds" class="list-group list-group-flush"></ul>
<form onsubmit="return handleSubmit(event)" class="d-flex align-items-center">
  <input class="form-control" type="text" name="message" id="message" aria-describedby="emailHelp" placeholder="Type your message here" />
  <button type="submit" class="btn btn-primary">Post</button>
</form>

And inside our script tag, let’s add,

function handleSubmit(event) {
  event.preventDefault();
  let input = document.getElementById("message");
  let message = input.value;
  return firestore
    .collection("feeds")
    .add({ message })
    .then(() => (input.value = ""))
    .catch((err) => console.log(err));
}

Let’s try it now,

As expected, we will get all the array objects again which will push all the existing objects to the HTML once again. We can fix this by clearing the list before a fetch, but instead let’s use the docChanges() method of querySnapshot to get only the updated data. Let’s modify our code then,

function listFeeds() {
  return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
    querySnapshot.docChanges().forEach(function (change) {
      if (change.type === "added") {
        console.log("New city: ", change.doc.data());
      } else if (change.type === "modified") {
        console.log("Modified city: ", change.doc.data());
      } else if (change.type === "removed") {
        console.log("Removed city: ", change.doc.data());
      }
    });
  });
}

Now this method will only give us the documents that are added. So initially when the page is loaded, we will receive all the existing documents, and whenever a new document is added, only that document will be sent to us in the docChanges() method.

This will also make it easier to handle each type of change as we know that only that particular decisional branch will be taken. Let’s now update our added branch to something like this,

function handleNewFeed(doc) {
  let feed = document.createElement("li");
  feed.setAttribute("class", "list-group-item");
  feed.setAttribute("id", doc.id);
  feed.innerText = doc.data().message;
  document.getElementById("feeds").prepend(feed);
}

// firebase functions
function listFeeds() {
  return firestore.collection("feeds").onSnapshot(function (querySnapshot) {
    querySnapshot.docChanges().forEach(function (change) {
      if (change.type === "added") {
        return handleNewFeed(change.doc);
      } else if (change.type === "modified") {
        console.log("Modified city: ", change.doc.data());
      } else if (change.type === "removed") {
        console.log("Removed city: ", change.doc.data());
      }
    });
  });
}

listFeeds();

Let’s take a look at it now,

Cool it works!!

Cool, our code is now working. Let’s just add some small designs to our code and make it look like a chat. We will open it on multiple tabs or windows and check if the message is reflecting across all tabs.

And that’s it! Experiment further with all the code, like the update and delete options in the querySnapshot(). In the upcoming part we will discuss building REST APIs using Firebase Cloud functions.