DEV Community: Pranav Birajdar

I landed my first dev job after 6 months of building projects. Here's my story!

Pranav Birajdar — Mon, 31 May 2021 15:42:13 +0000

It's official y'all, I got hired as a front-end developer!!! I am starting tomorrow and I am so pumped to share this news with the dev community.

Words cannot express how I happy about landing my first job. A year of self-teaching, building, failing, and networking finally paid off!

Here's a not-so-brief timeline of how it all started, some projects I built, and a few resources I used along the way.

1. April 2020 - Pandemic Resolutions:

Canada was undergoing it's first wave of the pandemic and we were under a strict lockdown. I was furloughed from my job with no idea of when things would get back to normal.

After about 3 weeks of feeling sorry for myself, binge-watching endless hours of Netflix, eating pizza and fries for breakfast, lunch, and dinner, I thought it was about time I got my s*** together and learn a new skill.

I knew I wanted to be a software developer since I had completed the HTML and CSS sections of freeCodeCamp a couple of years ago and actually enjoyed it. I also had a few developer friends who were unaffected or even thriving during the pandemic, thanks to our new 'everything is online and the internet rules the world' way of living.

Starting May, I was going to start my journey to be a developer!

2. May 2020 - HTML and CSS:

I went over the HTML and CSS parts of freeCodeCamp. It was a good introduction, however I was not satisfied. I did not exactly understand how and when to use a certain CSS class since the exercises did a lot of hand holding.

The JavaScript and the DSA part of the freeCodeCamp was very overwhelming and I was unsure if it was wise to move on to JS without understanding HTML and CSS properly.

I decided to take a little detour and bought Jonas's beginner HTML and CSS course and followed Kevin Powell's tutorials. I finally started getting a hang of flexbox and basic CSS layouts.

3. June-August 2020 - JavaScript and Tutorial Hell:

Following video courses and tutorials, I realized that I'm more of a visual learner since I was able to understand the concepts better if they were explained visually. This realization led me to follow Andrew Mead's JS course on Udemy.

I learned most of the basics. However, I soon realized that just typing after the instructor is not a great way to learn how to code. This was a tough phase since I was unsure about my JS abilities. I thought taking other courses would help bolster my knowledge. I tried several YouTube tutorials, 10-hour free freeCodeCamp videos, and other Udemy courses. Everything to no avail.

I was in what you'd call it a "TUTORIAL HELL"!

4. September 2020 - React and why Redux almost made me quit everything:

While I was doubting my JS skills, I was also reading about how it's not enough to just know JS and one needs to learn a framework to get a job. I heard about Vue, React, and Angular for the first time. I was even more confused.

I decided to go ahead and learn React since it was literally everywhere. Someone also told me how they understood JS better after learning React. This inspired me!

The journey was kinda rough thought. Class components and the 'this' keyword overwhelmed me, JSX was something I had never seen before, I had no idea what configuring Webpack meant. I somehow tried to trudge along.

However, what broke the camel's back was Redux. Yes, the React ecosystem's necessary evil! Nothing made sense. What's a dispatch? What's a reducer? Wait but what about useState? I had no idea what I was doing and I started doubting myself. Am I cutout for this? Was all of this a mistake?

5. October 2020 - March 2021 - Building Projects taught me everything!

I came across a YouTube tutorial one day where someone was building a Netflix clone using React Hooks. I couldn't believe my eyes. It was probably the first time I had seen someone build something other than a boring todo-list.

I was instantly hooked (pun intended). I wanted to build that clone. I did not know much about hooks, but I knew that I was not gonna take an entire course to learn about it. I decided to learn it as I went along.

This is when the real learning began! I understood JSX, SCSS, basic hooks, using an open-source API. Heck, I even got a surface level understanding of suspense, lazy-loading and external packages like React Router, Lodash, something that I never thought I'd be able to master unless I took a course about it! I successfully deployed the project on Netlify via GitHub and in this process, also learned about the basics of CI/CD.

What everyone said was true. You cannot learn how to code by reading, listening or watching someone else do it. You have to get your hands dirty! I decided to learn new concepts as I needed them.

My next project was a COVID-19 Tracker for Canada. While building it, I learned about using a CSS framework, Chart.js, Leaflet, and Mapbox.

I decided to implement some back-end functionality to my next projects. I also decided to learn Next.js and Tailwind CSS. I built a simple Google Keep Clone to learn the basics of Next, Tailwind, and Firebase.

Once I got a hang of these technologies, I decided to build a Strength Training Workout app for my capstone project. Since I worked as a personal trainer for a year, I had a rough idea of what core features were needed to have a fully-functioning app. I doubled down on Next, Tailwind, and Firebase. I wrote about the app in this post if anyone's interested.

I spent the last month building my personal portfolio website (here's an article about how I was able to achieve perfect Lighthouse score on my portfolio website) and making improvements to my previous projects.

6. April - May 2021 - Networking got me my job without even applying:

I spent most of April going over my JS and React fundamentals. I used the repositories mentioned in this post and these courses and video tutorials as a reference.

During the preparation process, I came across a few podcasts that recommended self-taught applicants to start networking and applying as soon as they learn a JS framework and think they're fairly competent.

I took this as a sign and joined all the tech related Meetups around the Toronto region. I made sure I updated my resume and my LinkedIn profile. I started actively participating and interacting with engineers, managers and startup founders. During one of these Meetups, I met the co-founder of a start-up and we got to talking. Apparently they were looking for a front-end developer and they wanted to interview me for the position. I finally got my first break!

It was three part interview process; the first consisted of basic questions about my career background and projects. The second was fairly technical where we talked about front-end design principles, SEO optimizations, and details about my projects. My final round consisted of a 2 hour coding challenge where I was asked to code a basic calculator (I will probably make a separate post that dives in further detail about my interview experience).

A week later I was offered the position!

Key Takeaways:

If you did not read all of that and just want some tangible actions items, here are some of my key takeaways :

Don't just watch tutorials, build projects. Push them to GitHub and deploy them. Use this free e-book for project ideas.
Try to make your projects visually attractive. Dribble and Behance are amazing resources for inspiration.
Start networking. Join your local meetups, connect with people you want to work for on LinkedIn, interact with the Tech Twitter. You never know who is hiring!
You'll never be completely ready. If you know HTML, CSS, JS and some framework knowledge, start applying today!

I know I have been incredibly lucky to be at the right place at the right time to land my first dev job on my first interview without even applying for the position. This amazing Veritasium video perfectly sums up my experience and how I feel about luck and success. But I also know that I would never gotten this opportunity without investing almost a year of my life learning, building and teaching myself to code.

I'm so incredibly fortunate to have found this career and I cannot wait to start this journey!

Please drop a comment if you have any questions. I also post tons of useful resources and lessons learned from my development journey on Twitter at @prnvbirajdar.

Stay safe and happy coding everyone! 👨‍💻🚀👩‍💻

NEXT, Tailwind CSS, ESlint, and Prettier boilerplate!

Pranav Birajdar — Wed, 28 Apr 2021 07:23:21 +0000

Boilerplate Link

ESlint and Prettier are very useful packages. However, it's always a massive pain to configure it and get it working on the first try.

Since it took me a few hours to figure out how to do it, I figured I might as well make a quick starter template for my future projects and also share it with the DEV community.

Most of the credit goes to Sarthak as he basically wrote a wicked article and shared the Github repo of the same. All I did was use those resources, and add Tailwind and the new JIT mode to it.

Hope this was helpful. Happy coding! 👩‍💻🚀👨‍💻

List of Visual Tools to help with Data Structures and Algorithms

Pranav Birajdar — Thu, 15 Apr 2021 03:50:06 +0000

As a self-taught dev, it is a little intimidating and overwhelming to learn Data Structures and Algorithms (DSA) with no prior computer science experience. However, after going through this course, I realized that DSA basics are not that difficult to understand if explained visually.

I went down the internet rabbit hole and found a few completely free DSA resources that try and explain these concepts visually.

1. DSA roadmap

This is a great roadmap that displays important data structures and algorithms. Each data structure/algorithm node gives you a good path of what to study next.

2. Algorithms Visualizations

The wonderful folks at the University of San Francisco have developed these interactive animations for a variety of data structures and algorithms. This visualization tool is written in javascript using the HTML5 canvas element and runs in just about any modern browser.

3. Sorting Algorithms

One of my favorite sorting algorithms visualizations, these animations illustrate how effectively data sets from different starting points can be sorted using different algorithms. These animations show 8 different sorting algorithms on 4 different initial conditions.

4. VISUALGO

Developed at NUS, VisuAlgo contains animations of 23 algorithms—from basic ones like sorting, to rarer ones like graph traversal. There's also a section for quizzes to test yourself!

DSA interview prep can be daunting but hopefully, these amazing tools can help you with understanding the basics.

Hope this was helpful. Here's another interview prep-related article for all you JS developers. Happy coding! 👩‍💻🚀👨‍💻

5 JavaSript GitHub Repositories for Interview Prep!📝

Pranav Birajdar — Fri, 09 Apr 2021 00:27:14 +0000

I came to a bitter realization last week that most of my projects so far have been built using frameworks and a bunch of NPM packages. If someone were to ask me about closures or the event loop, I am sure they were trolling me since such things do not exist in JS land.

Thus, I decided to spend most of this month, not on building another project but making sure that I know how JavaScript actually works under the hood. I have also decided to learn some fundamental computer science topics like Data Structures and Algorithms.

I have found the following resources to be extremely helpful during this journey of improving my core JavaScript fundamentals:

1. 33 Concepts Every JavaScript Developer Should Know

With almost 40k stars, I'm sure many of you already know of this amazing repo. However, I came across it just yesterday and I'm sure there are many who will find this useful.

Taking this article as an inspiration, this repo points to well-explained articles, blog posts, and videos about each JS topic.

2. JavaScript Algorithms and Data Structures

Another amazing repo that presents JavaScript-based examples of many popular algorithms and data structures. Furthermore, each algorithm and data structure has related explanations and YouTube video links for further reading.

3. JavaScript Questions

This is an exhaustive list of example-based JavaScipt questions that will help test your core knowledge of JavaScript, refresh your knowledge a bit, or prepare for your coding interview!

Lydia, the repo owner has some thorough articles about the JS concepts on DEV, so do check those out as well!

4. You Don't Know JS

Basically a holy grail for JS developers, this book series dives deep into the core mechanisms of the JavaScript language. Kyle Simpson, the author has made all the books available for free online.

5. Clean Code JavaScript

Not necessarily interview-related, this repo is based on Robert C. Martin's book Clean Code, adapted for JavaScript. It's a guide to producing readable, reusable, and refactorable software in JavaScript.

It has tons of useful examples and can be handy for pair-programming or take-home challenges.

These are the repositories I am currently using for my JS re-education. Please comment below if you have found any other resources to be more helpful and I will add them in a different post.

Hope this was helpful. Happy coding! 👩‍💻🚀👨‍💻

Useful Resources to Build a Kickass GitHub Readme Profile

Pranav Birajdar — Thu, 01 Apr 2021 06:38:11 +0000

As developers, we love visiting each others' GitHub profiles and browse through their repos and admire their portfolios. GitHub Profile readme is a great way to add some personality to your GitHub portfolio.

I recently added my own and these are some useful resources that helped me get started:

Getting started:

If you have never heard of GitHub profiles, this article and this article gives a good introduction and setup instructions.

There are some really good articles about setting up GitHub profiles available on DEV as well. Braydon has done a great job with his profile as well as these incredibly detailed articles.

Readme examples:

If you are looking for some inspiration, Abhishek has curated some great readme profiles here and here

Styling resources:

This repo allows you to design your GitHub stats. There are tons of theme options available here

Shields helped you design your social media logos, tech-stack, and social media badges. These add color and personality to your readme.

Emojis is a useful website to quickly search and copy light-hearted emojis to add to your emojis.

It shouldn't take you more than a couple of hours to get it done. Try to keep it simple and uniform. Don't mix themes and use too many colors or gifs. Most importantly, make sure you add your personality to it!

Hope this was helpful. Happy coding!😊🚀💻

I Built a Workout Tracking App using Next.js and Firebase!💪

Pranav Birajdar — Wed, 31 Mar 2021 18:20:52 +0000

I recently finished building and deploying a strength training-focused workout app. I wanted to share it here and see what you guys think about it. Love it, hate it, have suggestions to improve it further or features you would like to see added? I'm all ears!

The tech-stack used for the project:

Next.js as my React framework of choice
Firebase Authentication for logging in (Google and Facebook providers)
Firebase's Firestore database to store all the workout data
Tailwind and Windmill UI for all my styling needs

These are features I have added to the app so far:

Sign in with Google or Facebook to create a profile:

After signing in, Firebase creates a special user UID for each email, thus allowing that person to access their account and track their workouts.
Allows users to select body part specific exercises:

Each body part consists of various exercises including compound and isolation exercises.
Add sets, repetitions, and weight for every exercise:

Add, remove, update or delete sets and exercises as you please!
Add, update, and track your physical stats:

The app also allows users to track several physical stats such as weight, height, daily calories, and body fat percentage.
Go back and view, add, update or delete past workouts:

The calendar helps users to go back and add, update or delete previous workouts.
Copy previous workouts and paste them to your current session:

If you are repeating a workout session on multiple occasions, you can now copy and paste it wherever needed and add/edit/delete those specific workouts.

Features I am planning to add in the future:

I am currently using this app for almost a month now and adding more features as I see they fit. Some of these include,

Kgs to lbs and vice-versa conversion
~~Copy a particular previous workout and paste it to your current session~~
A dashboard to track your body weight, and daily calories
A dashboard to track strength gains for specific exercises

Please feel free to tinker around and let me know if you like it! 😊

5 Must-Have Browser Extensions for Every Web Developer

Pranav Birajdar — Thu, 25 Mar 2021 00:39:28 +0000

Since starting my web development journey, I have slowly learned tips and tricks to improve my workflow and productivity. Developer-focused browser extensions are one of those tools that have helped me immensely.

Here are 5 of my favorites extensions for Chrome and Firefox:

1. Responsive Viewer

This extension shows multiple screens in one view that allows developers to test multiple screens while developing responsive websites/applications.

Here's a Firefox version.

2. Font Picker

A simple extension to identify fonts and their details from any website. Just right-click on any text and grab the font details!

Here's a Firefox alternative.

3. Dimensions

Perfect extension if you want to measure distances between elements on a website.

Here's a Firefox version.

4. Wappalyzer

One of my favorite extensions! It is a technology profiler that shows you what websites are built with. It uncovers more tons of technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN, and others.

Here's a Firefox version.

5. React Developer Tools

A no-brainer if you're working with React. This extension allows you to inspect the React component hierarchies in the Chrome Developer Tools.

Here's a Firefox version.

Hope you find these tools useful. Happy coding! 👩‍💻🚀👨‍💻

I Got a Perfect Lighthouse Score on My First Portfolio Website!

Pranav Birajdar — Tue, 23 Mar 2021 04:33:01 +0000

I recently finished building and hosting my personal website. My goal was to keep the website static, clean, and fast. In order to make sure that I was following the best practices, I was also trying to achieve that perfect Lighthouse score.

Here are a few details about the technologies I used:

Next.js

I knew that selecting the right tools to build a website can be a key to optimizing SEO performance. Since I was building a personal website, I knew I had to use a static site generator. I also wanted to add a blog section that used the DEV.to as a CMS to retrieve my blog-posts. So I knew there was a dynamic aspect to my website as well.
Using Next.js was a no-brainer since it was the perfect solution for my problem and an added bonus was that I was already comfortable with it.

Tailwind

As much as I hated using Tailwind on my first project and thought that I'd never continue using this utility framework for any of my further projects, I'm pleasantly surprised to say that this is my third project with Tailwind, and I cannot imagine doing any design work without it.
I have already made a post about my favorite component libraries using Tailwind and used some of the components from Kutty for this project as well.

Typescript

This was a pain to learn. For someone who's self-taught and has only worked with JavaScript, I could not see why anyone would spend so much time defining types for every single element or component. However, as soon as I started importing data from DEV.to APIs, I got it. I did not face a single cannot read property of undefined errors and just for that, I am willing to learn and improve my TS skills.

Things I like:

Having a good Lighthouse Score was of prime importance to me, given that this website is an online representation of me as a developer and will potentially be seen by recruiters and fellow developers alike. I am planning to make a separate post about how I achieved the score, but it's fair to say that I am pretty happy with the result.
I also like the minimalist and clean design. I was planning to add some animations using Framer-Motion but then decided against it, since I wanted to deploy rather than spend another week learning a new technology that I didn't plan on implementing in the first place.
Google Analytics helps me monitor the web traffic
Dark Mode only!😎

Things I wish to improve upon:

Add a custom domain name
I need to add my resume
Fix some minor bugs in my projects
Add a copy e-mail functionality to my 'Say Hello' button instead of opening a new blank window
Add Canonical URLs to my blog page
Add a comment section at the bottom of every blog page that redirects the user to the specific article on DEV.to.
Syntax highlight the markdown blogs

Feel free to visit the website. I'd love to hear your thoughts on how I can improve it and I'm very much open to constructive criticism!

Resources to Build your Blog using Next.js and DEV.to

Pranav Birajdar — Fri, 19 Mar 2021 09:58:26 +0000

I recently finished building my blog using Next.js, TypeScript, Tailwind and DEV.to CMS.

This was my first time learning and using:

TypeScript (I decided not to get swept up in tutorial hell and instead went through some documentation before diving headfirst and allowing the TS compiler to guide me)
getStaticPaths, getStaticProps, and Incremental Static Regeneration with NEXT.js
Using DEV.to as a CMS to store my blog data and call it whenever needed using REST APIs.

I went through tons of resources and thought some of this might help you guys! So here's an exhaustive list of all the things I used or found useful for building my blog with NEXT.

Next.js Blog using DEV.to as a CMS:

The DEV.to API docs are fairly straightforward and very easy to get started with.

However, since this being my first time with SSG using getStaticPaths and getStaticProps, I needed some hand-holding there.

These articles and videos helped me a ton:

James Wallis has penned down two excellent articles about his process from moving from a JS and styled-JSX website to using TS, Next.js, and Tailwind. These articles and his repo helped me a ton!
Dale Nguyen's article was also quite helpful. He wrote his Blog in Angular.

Next.js blog with an external CMS:

Building a blog with Next.js 10 and Contentful helped me dial in how getStaticPaths, getStaticProps, and Incremental Static Regeneration with Next.js work with an external API.
Build a Blog With Next.js & Ghost shows a slightly different method of using getStaticPaths and getStaticProps.

Next.js blog with local .md files:

Next.js has some excellent documentation and they have included a basic blog tutorial using local .mdx files.
How To Build A Blog With Next.js And Tailwind: Part 1 - Next.js - Harry Wolf is a great teacher and this 3 part series a good introduction to building a Next.js blog using Tailwind and local files!
Next.js Static Site Generation (SSG) Tutorial - Ben has a good tutorial too, albeit a little too fast-paced for beginners like myself.

Resources and Packages Used:

Tailwind-NEXT-TypeScript starter template - An absolute lifesaver!
Tailwind Typography - Markdown styling

I am also planning to post all the TypeScript resources in a separate article, along with an article about my design choices, and how I was able to achieve a perfect lighthouse score!

Hope you guys find these resources hopeful!

React Component to Smooth Scroll to the Top

Pranav Birajdar — Wed, 17 Mar 2021 03:56:56 +0000

It's kinda rare to find a smooth scrolling button that takes you to the top of the page on modern blogging websites, especially the ones that are a long 15 minute read!

However, whenever I come across one, I always tend to use it and appreciate the elegance of this simple button that has such a specific job.

After perusing Stack Overflow and GitHub for solution, I came across an elegant React component that uses Hooks and wanted to share it with this community!

Our button should function like this:

These are following test-cases for our component:

Button should always be at the right bottom of the page
Button should be hidden and should only appear when we scroll for a certain height
On clicking it, we should be smoothly taken to the top of the page

The Hook component achieves the following functionality.



import React, { useEffect, useState } from "react";

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  // Top: 0 takes us all the way back to the top of the page
  // Behavior: smooth keeps it smooth!
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  useEffect(() => {
    // Button is displayed after scrolling for 500 pixels
    const toggleVisibility = () => {
      if (window.pageYOffset > 500) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener("scroll", toggleVisibility);

    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

//scroll-to-top classes: fixed, bottom:0, right:0
  return (
    <div className="scroll-to-top">
      {isVisible && (
        <div onClick={scrollToTop}>
          <h3>Go up!</h3>
        </div>
      )}
    </div>
  );
}

We're almost done! Just import this component in your react file and stick it at the very end.

And voila, it should work!

Here is a basic, quick, and ugly demo of how it should function!

An Easy Way to Build a Responsive Navbar using Tailwind & React ⚛

Pranav Birajdar — Mon, 15 Mar 2021 15:24:23 +0000

I recently wrote an article about some of my favorite Tailwind component libraries.

However, I could never find an ideal navbar for my projects.

I've always dreaded the navbar! For such a small component that sits at the top of your website, it sure needs a lot of attention.

In this tutorial, we will learn how to build a clean and responsive navbar in under 10 minutes.

Step 1:

Go to Tailwind UI and copy the HTML code for "Dark nav with white page header".

Step 2:

Make a functional Nav component in your React project and paste this code.

Step 3:

Convert all the 'class' attributes to 'className'.
Remove the HTML comment tags and add the JSX comment tags instead.
Close the 'img' tags.
Get rid of the 'profile' and the 'notifications' components to keep it simple.

Step 4:

Remove the 'bg-gray-900' class from Dashboard and add 'hover:bg-gray-700' instead.

This is roughly how our Nav component should look right now:



import React from "react";

function Nav() {
  return (
    <div>
      <nav className="bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <img
                  className="h-8 w-8"
                  src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
                  alt="Workflow"
                />
              </div>
              <div className="hidden md:block">
                <div className="ml-10 flex items-baseline space-x-4">
                  <a
                    href="#"
                    className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Dashboard
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Team
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Projects
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Calendar
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Reports
                  </a>
                </div>
              </div>
            </div>
            <div className="-mr-2 flex md:hidden">
              <button
                type="button"
                className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded="false"
              >
                <span className="sr-only">Open main menu</span>

                <svg
                  className="block h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                </svg>

                <svg
                  className="hidden h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>

        <div className="md:hidden" id="mobile-menu">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a
              href="#"
              className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
            >
              Dashboard
            </a>

            <a
              href="#"
              className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
            >
              Team
            </a>

            <a
              href="#"
              className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
            >
              Projects
            </a>

            <a
              href="#"
              className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
            >
              Calendar
            </a>

            <a
              href="#"
              className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
            >
              Reports
            </a>
          </div>
        </div>
      </nav>

      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
        </div>
      </header>
      <main>
        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
          {/* <!-- Replace with your content --> */}
          <div className="px-4 py-6 sm:px-0">
            <div className="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
          </div>
          {/* <!-- /End replace --> */}
        </div>
      </main>
    </div>
  );
}
export default Nav;

Step 5:

React doesn't include a first-party transition component out of the box. Thus, the folks at Tailwaind made one.

npm install @headlessui/react

or

yarn add @headlessui/react

Step 6:

Time to add the boolean state to open and close the mobile navbar. We will also have to use the same boolean logic to change the nav icon for open and close state.

You can learn more about the implementation here.

Step 7:

Here is the final code with the responsive state added.



import React, { useState } from "react";
import { Transition } from "@headlessui/react";

function Nav() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <nav className="bg-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <img
                  className="h-8 w-8"
                  src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
                  alt="Workflow"
                />
              </div>
              <div className="hidden md:block">
                <div className="ml-10 flex items-baseline space-x-4">
                  <a
                    href="#"
                    className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Dashboard
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Team
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Projects
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Calendar
                  </a>

                  <a
                    href="#"
                    className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
                  >
                    Reports
                  </a>
                </div>
              </div>
            </div>
            <div className="-mr-2 flex md:hidden">
              <button
                onClick={() => setIsOpen(!isOpen)}
                type="button"
                className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded="false"
              >
                <span className="sr-only">Open main menu</span>
                {!isOpen ? (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                ) : (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </div>

        <Transition
          show={isOpen}
          enter="transition ease-out duration-100 transform"
          enterFrom="opacity-0 scale-95"
          enterTo="opacity-100 scale-100"
          leave="transition ease-in duration-75 transform"
          leaveFrom="opacity-100 scale-100"
          leaveTo="opacity-0 scale-95"
        >
          {(ref) => (
            <div className="md:hidden" id="mobile-menu">
              <div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a
                  href="#"
                  className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
                >
                  Dashboard
                </a>

                <a
                  href="#"
                  className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                >
                  Team
                </a>

                <a
                  href="#"
                  className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                >
                  Projects
                </a>

                <a
                  href="#"
                  className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                >
                  Calendar
                </a>

                <a
                  href="#"
                  className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                >
                  Reports
                </a>
              </div>
            </div>
          )}
        </Transition>
      </nav>

      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
        </div>
      </header>
      <main>
        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
          {/* <!-- Replace with your content --> */}
          <div className="px-4 py-6 sm:px-0">
            <div className="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
          </div>
          {/* <!-- /End replace --> */}
        </div>
      </main>
    </div>
  );
}

export default Nav;

Here's how our navbar looks like:

Here's a link to the Codesandbox, if you guys want to test it out.

Hope this helps!

Collection of Beautiful, Responsive Tailwind Component Libraries

Pranav Birajdar — Thu, 11 Mar 2021 05:38:00 +0000

Since starting with Tailwind for my styling needs, my workflow has significantly improved since I follow the utility classes Tailwind provides me and everything ends up looking very elegant and clean for the amount of time I actually spend on it.

Some amazing developers have gone a step ahead and built entire component libraries based on the Tailwind classes. I have used a few of them and here's a list of are some of my favorites:

Windmill UI

I am slightly biased towards this one since this was the first library that I used on one of my projects.

Pros:

Includes a Pure HTML and a React Dashboard page right out of the box
Dark Mode using React with a few lines of code
Easy escape hatch in-case you wish to make some design changes
Accessible out-of-the-box
Absolutely free

Cons:

I wish it had a catalog of larger everyday webpage components such as a header, navbar, footer, CTA templates to choose from.

Kutty

I absolutely adore the Marketing components from Kutty and I have used a few for my personal website that I am working on right now.

Pros:

Includes plenty of webpage components like heroes, header, footers, blog list that are missing from Windmill UI
Great support for Alpine and Vue JS
Accessible out-of-the-box
Absolutely free

Cons:

Very minimal JS-free components and the JS dependant components are built with Alpine. So slightly difficult learning curve.

Tail-kit

I have used bits and parts of this library for a few of the components. They offer over 250 free components and templates, based on Tailwind CSS 2.0. It's all compatible with React, VueJS, and Angular applications.

Pros:

Plenty of small and big webpage components. Most from the three that I have used thus far.
They have some great templates for landing pages, error pages, and dashboards
Accessible out-of-the-box
Absolutely free

Cons:

None, except that there's a slight learning curve given the huge amount of options.

I will make another post with more interesting libraries, if and when I get a chance to use them!

DEV Community: Pranav Birajdar

I landed my first dev job after 6 months of building projects. Here's my story!

1. April 2020 - Pandemic Resolutions:

2. May 2020 - HTML and CSS:

3. June-August 2020 - JavaScript and Tutorial Hell:

4. September 2020 - React and why Redux almost made me quit everything:

5. October 2020 - March 2021 - Building Projects taught me everything!

6. April - May 2021 - Networking got me my job without even applying:

Key Takeaways:

NEXT, Tailwind CSS, ESlint, and Prettier boilerplate!

List of Visual Tools to help with Data Structures and Algorithms

1. DSA roadmap

2. Algorithms Visualizations

3. Sorting Algorithms

4. VISUALGO

5 JavaSript GitHub Repositories for Interview Prep!📝

1. 33 Concepts Every JavaScript Developer Should Know

2. JavaScript Algorithms and Data Structures

3. JavaScript Questions

4. You Don't Know JS

5. Clean Code JavaScript

Useful Resources to Build a Kickass GitHub Readme Profile

Getting started:

Readme examples:

Styling resources:

I Built a Workout Tracking App using Next.js and Firebase!💪

Sign in with Google or Facebook to create a profile:

Allows users to select body part specific exercises:

Add sets, repetitions, and weight for every exercise:

Add, update, and track your physical stats:

Go back and view, add, update or delete past workouts:

Copy previous workouts and paste them to your current session:

Features I am planning to add in the future:

5 Must-Have Browser Extensions for Every Web Developer

1. Responsive Viewer

2. Font Picker

3. Dimensions

4. Wappalyzer

5. React Developer Tools

I Got a Perfect Lighthouse Score on My First Portfolio Website!

Here are a few details about the technologies I used:

Next.js

Tailwind

Typescript

Things I like:

Things I wish to improve upon:

Resources to Build your Blog using Next.js and DEV.to

Next.js Blog using DEV.to as a CMS:

These articles and videos helped me a ton:

Next.js blog with an external CMS:

Next.js blog with local .md files:

Resources and Packages Used:

React Component to Smooth Scroll to the Top

An Easy Way to Build a Responsive Navbar using Tailwind & React ⚛

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

or

Step 6:

Step 7:

Collection of Beautiful, Responsive Tailwind Component Libraries

Windmill UI

Pros:

Cons:

Kutty

Pros:

Cons:

Tail-kit

Pros:

Cons: