DEV Community: Drishti Saraf

Introducing DevTools Hub: All Your Developer Utilities in One Place

Drishti Saraf — Fri, 09 May 2025 10:35:31 +0000

In the fast-paced world of web development, context switching is a productivity killer. One tab for formatting JSON. Another for decoding JWTs. A third for converting colors...

Before you know it, you’ve got a browser filled with a dozen tabs — and zero focus.

That’s exactly the problem DevTools Hub solves.

🚀 What is DevTools Hub?

DevTools Hub is a free, web-based toolkit that brings together a curated collection of essential utilities for developers, designers, and tech enthusiasts — all in one clean, fast, and distraction-free interface.

No ads. No signups. Just tools.

🧠 Perfect for: Frontend devs, backend engineers, UI/UX designers, and students.

🔧 Tools Available

Here's what you can use today:

🔐 JWT Decoder – View the payload of any JSON Web Token
🧮 JSON Formatter – Beautify and validate JSON
📦 UUID Generator – Create version 4 UUIDs
🧾 Base64 Encoder/Decoder – Convert text to/from Base64
🎨 Color Converter – HEX ⇄ RGB ⇄ HSL
🧹 Code Minifier – Minify HTML, CSS, and JavaScript
🗃️ Regex Tester – Debug your regular expressions
📄 Lorem Ipsum Generator – Generate dummy content
⚙️ ...with more tools coming soon!

🧠 Why DevTools Hub?

✅ Lightning Fast – Built with Vite and React

✅ Clean UI – No clutter, no distractions

✅ Tailored for Devs – Only the tools you actually use

✅ Free Forever – And we're working on open-sourcing it too!

🛠️ Tech Stack

Frontend: Vite + React + TypeScript
Styling: TailwindCSS
Hosting: Netlify (can also run on GitHub Pages)
Performance: Optimized for speed and usability

🌐 Try DevTools Hub Now

➡️ Visit DevTools Hub

No login required. Just bookmark it and go.

🤝 Join the Journey

If you're a developer who believes in simple tools done right, we’d love your feedback! Drop feature suggestions, connect with us on LinkedIn, or contribute once we open source.

🚀 DevTools Hub – Because your developer tools deserve a better home.

Thanks for reading! Feel free to like, comment, or share if you found this useful. Happy coding!

📦 How I Published My First npm Package: `how-much-time-ago`

Drishti Saraf — Fri, 25 Apr 2025 06:27:53 +0000

I've always wondered how to publish a package on npm.

It seemed like one of those things “real devs” did — and I wasn’t sure where to start. But this week, I finally did it! I created and published my very first npm package: how-much-time-ago — a tiny utility that converts dates or timestamps into human-readable relative time strings like:

just now
2 minutes ago
3 days ago
1 year ago

In this post, I’ll walk you through how I built and published it — step by step — so if you’ve ever been curious about sharing your own code on npm, this is for you.

🧠 The Idea

I wanted a simple way to show relative times like “5 minutes ago” or “2 days ago” in my projects. There are libraries out there, but I wanted something lightweight, dependency-free, and easy to use in both Node.js and frontend apps.

So I wrote it myself.

🔧 Step-by-Step: Publishing an npm Package

Here’s exactly how I did it — and how you can too.

1. Create Your Project Folder

mkdir how-much-time-ago && cd how-much-time-ago
npm init -y

Update your package.json with a good name, description, and author info:

{
  "name": "how-much-time-ago",
  "version": "1.0.0",
  "description": "A lightweight utility to show relative time like '2 hours ago'",
  "main": "index.js",
  ...
}

2. Write Your Utility Code

Here’s a minimal version of what’s inside index.js:

function howMuchTimeAgo(input) {
  const date = new Date(input);
  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);

  const intervals = {
    year: 31536000,
    month: 2592000,
    day: 86400,
    hour: 3600,
    minute: 60,
  };

  for (let [unit, value] of Object.entries(intervals)) {
    const count = Math.floor(seconds / value);
    if (count >= 1) return `${count} ${unit}${count > 1 ? 's' : ''} ago`;
  }

  return seconds < 10 ? 'just now' : `${seconds} seconds ago`;
}

module.exports = howMuchTimeAgo;

3. Add a README.md

Write a clear README so other devs can understand and use your package easily:

how-much-time-ago

🕒 A tiny utility to convert dates or timestamps into human-readable relative time.

Installation

npm install how-much-time-ago

Usage

const timeAgo = require('how-much-time-ago');

console.log(timeAgo(new Date(Date.now() - 90 * 1000))); // "1 minute ago"
console.log(timeAgo('2023-01-01')); // "1 year ago"

Output Examples

just now
30 seconds ago
5 minutes ago
3 hours ago
2 days ago
6 months ago
1 year ago

4. Login and Publish to npm

First, login (create an npm account if you don’t have one):

npm login

Then publish your package:

npm publish

That’s it! Your package is live 🚀

👉 View it on npm

🧪 Optional: Test Locally First

Before publishing, you can test your package with:

npm link
# Then in another project:
npm link how-much-time-ago

This simulates installing the package globally without publishing.

💡 Final Thoughts

If you've ever been curious about npm publishing — just try it!
A good name, clear README, and working code is all you need to start
Keep your first package simple, and iterate from there

Want to Try It?

npm install how-much-time-ago

Then:

const timeAgo = require('how-much-time-ago');
console.log(timeAgo('2024-12-01')); // e.g., "4 months ago"

🔜 Coming Soon

I’m planning to add:

Optional future time handling (“in 5 minutes”)

Open to feedback and contributions!

👉 GitHub repo

React+ ShadCN Dark Theme Boilerplate

Drishti Saraf — Thu, 27 Mar 2025 04:47:48 +0000

Why I Built This Boilerplate

I initially started this project because I wanted to create a Vite project using ShadCN. However, as someone who had never used the React + TypeScript template before, I quickly realized that setting it up could be tricky. Being an absolute beginner in TypeScript, I tried to avoid it but eventually had to embrace the learning curve.

During this process, I found that setting up a project in Vite with ShadCN and a theme-switching feature can be a bit overwhelming for first-timers. I didn’t want to go through all the trouble every time I started a new project, so I built this boilerplate for myself. Then I thought, why not share it with others who might face the same struggle? I am also open to suggestions, including whether this setup is feasible with a React + JavaScript template.

Key Features

This boilerplate includes a proper folder structure with clearly defined components:

Components Folder:
- ui/ (ShadCN components)
- layout/ (Contains project layout: Layout.tsx, Navbar.tsx, Footer.tsx)
- themes/ (Theme provider and theme toggle)
A separate routes/ folder
A pages/ folder
A clean and well-structured app.js codebase

Installation & Usage

Getting started is super simple:

Clone the repository
Run npm install
Start the development server with npm run dev

That’s it! You’ll have a basic project layout ready to go.

Customization

This boilerplate provides a flexible structure that allows for easy customization:

Use ShadCN’s theming feature to generate custom CSS variables for index.css.
Update the Navbar.tsx and Footer.tsx code as needed.
Modify the layout to fit your project requirements.

I have provided a structured project layout, but it’s designed to be easily editable.

Tech Stack

This project is built with:

Vite – A fast and modern frontend build tool
TypeScript – For type safety and better developer experience
Tailwind CSS – A utility-first CSS framework
ShadCN – For beautiful and customizable UI components
Lucide-react – A modern and lightweight icon library

As a beginner in Tailwind CSS, I initially avoided it, but given the current industry standards, learning it has become essential.

Future Plans

I’m open to suggestions because I’m sure I might have missed some things while building this boilerplate. If you have any ideas for improvements or additional features, feel free to share them!

Call to Action

If you find this boilerplate useful, consider starring the repository on GitHub ⭐. Feel free to contribute, provide feedback, or suggest enhancements.

GITHUB LINK - source code

PREVIEW - preview

Let’s make setting up Vite + ShadCN projects easier for everyone! 🚀

Micro Frontends Architecture

Drishti Saraf — Thu, 27 Feb 2025 07:31:32 +0000

In modern web development, applications are becoming larger and more complex. While Microservices have revolutionized backend development, Micro Frontends bring similar advantages to the frontend world. This approach allows independent teams to develop, test, and deploy different parts of a web application separately, leading to better scalability and maintainability.

In this blog, we will explore what Micro Frontends are, why they are useful, how they work, and how to implement them in a project.

What is Micro Frontends Architecture?

Micro Frontends is an architectural pattern where a web application is broken down into smaller, independent frontend components or applications that can be developed, deployed, and managed separately. These micro applications are then composed together to create a seamless user experience.

Key Characteristics:

Independent Development: Different teams can work on different frontend components.
Technology Agnostic: Different parts of the frontend can be built using different frameworks (React, Angular, Vue, etc.).
Decentralized Deployment: Individual components can be updated and deployed without affecting the entire application.
Scalability: Enhances scalability by allowing independent teams to manage different parts of the frontend.

Understanding Micro Frontends with an Example

Consider a company that provides multiple applications to its customers:

ERP System: Used for managing business processes and resources.
E-commerce Admin Dashboard: Used for managing products, orders, and customers.
License Management System: Used for managing software licenses.

A single customer may use all three applications, and they share a single login application that handles authentication and user management.

Using a Micro Frontends Architecture, each of these applications can be developed independently while still being seamlessly integrated into a single unified experience.

How Micro Frontends Help in This Scenario:

Independent Deployment: Each system (ERP, E-commerce Admin, License Management) can be updated separately without affecting others.
Shared Authentication: The login application can be a standalone Micro Frontend, shared across all systems.
Technology Diversity: Different teams can use different frontend frameworks suitable for their needs.
Scalability: New applications can be added without disrupting existing ones.

For instance, the login application could be built with React, while the ERP dashboard might use Angular, and the License Management system might be developed in Vue.js. With Micro Frontends, these different frontend technologies can co-exist within the same ecosystem while still functioning as a cohesive application.

Challenges and Best Practices

Challenges

State Management - Managing state across multiple frontend modules can be complex.
Routing - Coordinating navigation between different Micro Frontends requires careful planning.
Styling Conflicts - Different Micro Frontends may have conflicting styles, which needs to be handled properly (e.g., using CSS Modules or Shadow DOM).

Best Practices

Use Module Federation for seamless integration.
Implement Shared State Management using Redux, Context API, or Event Bus.
Adopt Consistent Design Guidelines to maintain uniformity across Micro Frontends.
Utilize CI/CD Pipelines for automated deployment of individual Micro Frontends.

Conclusion

Micro Frontends Architecture is a game-changer for scalable and modular frontend applications. It enables independent development, faster deployments, and the freedom to use different technologies within the same project. By leveraging Module Federation, Single SPA, or Web Components, you can create maintainable and efficient frontend applications.

Resources and References

Top UI Libraries for Faster Development

Drishti Saraf — Thu, 06 Feb 2025 08:54:39 +0000

Have you noticed how animated UI component libraries are becoming super popular lately? It’s not just about making things look pretty, user interactions today are about engagement and experience.

As developers, we rely on these libraries for two key reasons:

They save time
They make web interactions feel incredibly smooth.

Another reason more developers are adopting these libraries is that they help create landing pages that are visually appealing, fluid, and premium-looking—boosting user engagement and conversion rates.

So, if you're looking to level up your UI game, here are some of the best React component libraries worth checking out!

Material-UI (MUI)

Material-UI is a powerhouse when it comes to implementing Google’s Material Design principles in React apps. It offers a set of polished, customizable components that ensure a modern and accessible UI.

Highlights:

Pre-designed components that follow Material Design guidelines
Easy theming and customization
Strong community support
Built-in dark mode

Ideal For:

Dashboards and admin panels
Apps that follow Material Design principles

Ant Design

Ant Design is a full-featured React UI library that’s widely used in enterprise applications. It has a robust set of components, built-in form handling, and a sleek professional look.

Highlights:

Comprehensive set of polished UI components
Advanced theming options
Internationalization (i18n) support
Great for complex applications

Ideal For:

Enterprise and business apps
Data-heavy dashboards

Chakra UI

Chakra UI is all about simplicity and accessibility. It makes styling super easy with a props-based system while ensuring your UI is fully responsive.

Highlights:

Super customizable with a simple API
Dark mode support out of the box
Built-in accessibility features
Works great with animations

Ideal For:

Projects that need lightweight, flexible UIs
Developers who want a smooth DX (Developer Experience)

React Bootstrap

If you love Bootstrap but want to work with React components, React Bootstrap is the way to go! It provides Bootstrap components that are fully React-compatible, eliminating the need for jQuery.

Highlights:

Fully responsive Bootstrap grid system
Easy to theme using Bootstrap variables
Compatible with Bootstrap documentation

Ideal For:

Projects already built on Bootstrap
Mobile-first applications

Final Thoughts

There’s no one-size-fits-all when it comes to React component libraries. The best choice depends on your project:

Material-UI and Ant Design are perfect for enterprise applications.
Chakra UI and Tailwind UI offer flexibility and customization.
React Bootstrap is great for those who love Bootstrap.

Using a component library not only speeds up the development process but also helps maintain consistency and create seemless user experience.

There are many more interesting UI libraries that you can try. I haven't mentioned them in my blog because I haven't tested them yet. Some of these library include ShadCN, Aceternity UI, and many more. If you have used any of these, I'd love to hear about your development experience in the comments. 🚀

API Protocol: REST vs SOAP vs GraphQL vs RPC

Drishti Saraf — Tue, 04 Feb 2025 11:22:23 +0000

APIs are the backbone of modern software communication. They enable applications to exchange data efficiently, whether it's a mobile app fetching data from a server or a website integrating with third-party services.

However, not all APIs function the same way. Different API protocols have been developed to serve specific needs, each with its own strengths and weaknesses.

1. REST (Representational State Transfer)

REST is the most widely used API protocol today, known for its simplicity and scalability. It relies on HTTP methods (GET, POST, PUT, DELETE) and uses stateless communication.

Key Features:

Uses standard HTTP methods
Supports multiple data formats (JSON, XML, etc.), but JSON is the most common
Stateless architecture, meaning each request is independent
Scalable and cacheable for better performance

Pros:

✅ Simple and easy to implement
✅ Works well with web applications
✅ Caching improves performance

Cons:

❌ Over-fetching or under-fetching of data
❌ Lack of flexibility in queries

Best Use Cases:

Web services and mobile applications
Social media platforms (e.g., Twitter API)
E-commerce applications

2. SOAP (Simple Object Access Protocol)

SOAP is an older API protocol that uses XML-based messaging and operates over multiple protocols (HTTP, SMTP, TCP, etc.). It is commonly used in enterprise-level applications where security and reliability are top priorities.

Key Features:

Uses XML for data exchange
Highly secure (supports WS-Security)
Strict standards ensure reliability
Supports ACID transactions (important for financial applications)

Pros:

✅ Strong security features
✅ Reliable and standardized for enterprise use
✅ Supports multiple transport protocols

Cons:

❌ Verbose and complex XML format
❌ Slower compared to REST

Best Use Cases:

Banking and financial services
Healthcare systems
Enterprise software

3. GraphQL

Developed by Facebook, GraphQL is a query language that allows clients to request only the data they need. Unlike REST, it avoids over-fetching and under-fetching issues by letting clients specify their required fields.

Key Features:

Allows flexible queries (fetch only needed data)
Uses a single endpoint for all operations
Strongly typed schema

Pros:

✅ Efficient data fetching (avoids over-fetching/under-fetching)
✅ Reduces the number of API calls
✅ Self-documenting API with strong schema

Cons:

❌ Higher learning curve
❌ Complex caching mechanisms

Best Use Cases:

Social media platforms (e.g., Facebook, GitHub APIs)
Mobile applications with dynamic data needs
Data-heavy applications

4. RPC (Remote Procedure Call)

RPC allows clients to call functions on a remote server as if they were local. It can be JSON-RPC or gRPC (Google Remote Procedure Call).

Key Features:

Calls remote functions directly
Can use JSON (JSON-RPC) or Protocol Buffers (gRPC)
Low-latency and efficient communication

Pros:

✅ Fast and lightweight
✅ Ideal for microservices architecture
✅ Works well with low-latency applications

Cons:

❌ Tight coupling between client and server
❌ Debugging can be complex

Best Use Cases:

Real-time applications (e.g., gaming, messaging apps)
Microservices communication
High-performance APIs

Conclusion

Choosing the right API protocol depends on your specific needs:

Use REST for web and mobile applications that require scalability and simplicity.
Choose SOAP for enterprise applications where security and reliability are critical.
Go with GraphQL if you need flexible data fetching with minimal API calls.
Opt for RPC when building real-time, high-performance systems.

Understanding these protocols helps developers make informed decisions when designing APIs. Which API protocol do you prefer using? Let me know in the comments! 🚀

Error Handling in Frontend Development

Drishti Saraf — Mon, 03 Feb 2025 11:57:10 +0000

Error handling is a crucial part of frontend development—it ensures a smooth user experience and helps developers debug issues efficiently. Whether you're working with JavaScript, React, or any other frontend framework, handling errors properly can prevent unexpected crashes and frustrating user interactions.

Common Types of Errors in Frontend Development

Syntax Errors – These happen when there's a mistake in your code structure, preventing it from running.
Runtime Errors – These occur while the code is executing, like trying to access an undefined variable.
Logical Errors – These don't crash your app, but they produce incorrect results, making debugging tricky.
Network Errors – When API calls fail due to connectivity issues, timeouts, or server errors.
User Input Errors – Happen when users enter invalid data, so proper validation is needed.

How to Handle Errors Effectively

Using Try-Catch for Handling Errors

A try-catch block is great for catching runtime errors without breaking the entire application.

try {
  let result = riskyOperation(); // A function that may throw an error
} catch (error) {
  console.error("Oops! Something went wrong:", error);
}

Handling Errors in Promises

For asynchronous operations, handling errors properly prevents app crashes.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .catch(error => console.error("Failed to fetch data:", error));

With async/await:

async function fetchData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

Catching Global Errors

Using window.onerror or window.addEventListener("error", callback) helps capture unexpected errors globally.

window.onerror = function (message, source, lineno, colno, error) {
  console.error("Something went wrong:", message, " at ", source, ":", lineno);
};

Handling unhandled promise rejections:

window.addEventListener("unhandledrejection", function (event) {
  console.error("Unhandled Promise Rejection:", event.reason);
});

Handling Errors in React Applications

React provides error boundaries to catch component tree errors.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Error caught by boundary:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Oops! Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Usage:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Providing User-Friendly Feedback

Users should get clear messages when errors occur instead of vague alerts or crashes.

try {
  performAction();
} catch (error) {
  showToast("Something went wrong. Please try again.");
}

Best Practices for Handling Errors

Use Meaningful Error Messages – Avoid generic messages like "Something went wrong." Be specific.
Log Errors Efficiently – Use tools like Sentry or LogRocket to capture and analyze errors.
Fail Gracefully – Your app should remain functional even if an error occurs.
Validate User Inputs – Prevent errors before they happen with proper validation.
Test for Edge Cases – Use unit and integration tests to catch potential issues before deploying.

Final Thoughts

Error handling in frontend development is crucial for a smooth user experience. By implementing strategies like try-catch, promise handling, global error listeners, and React error boundaries, you can prevent app crashes and improve stability.

Do you have any go-to strategies for handling frontend errors? Share your thoughts in the comments!

ReactJS for beginners

Drishti Saraf — Thu, 23 Jan 2025 05:32:09 +0000

ReactJS is a powerful JavaScript library for building user interfaces. Created by Facebook, it's widely used for its component-based architecture and the ability to build fast and interactive web applications.

Step 1: Prerequisites

Before diving into React, make sure you have the following installed:

Node.js and npm

React relies on Node.js and npm (Node Package Manager) to manage dependencies. To check if they’re installed, run:

node -v
npm -v

If not installed, download and install the latest version of Node.js from nodejs.org.

nodejs.org

A Code Editor

I recommend using Visual Studio Code for its features and extensions tailored to JavaScript and React development.

Step 2: Setting Up a React Project

There are two primary ways to set up a React project: using Create React App or Vite. Here, we'll use Create React App for simplicity.

Install Create React App

Run the following command to globally install Create React App:

npm install -g create-react-app

Create a New React Project

Create a new project named my-react-app:

npx create-react-app my-react-app

Navigate to Your Project Directory

cd my-react-app

Start the Development Server

Run the following command to start your React app:

npm start

This will open a new tab in your browser at http://localhost:3000, where you can see the default React app running.

Step 3: Understanding the Project Structure

Your new React project will have the following structure:

my-react-app
├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
├── package.json
├── node_modules

public: Contains static files like index.html.
src: Contains your React components and styles.
package.json: Manages project dependencies and scripts.

Step 4: Creating Your First Component

React apps are built with components. Let’s create a simple HelloWorld component.

Create a New File

Inside the src folder, create a file named HelloWorld.js:

src/HelloWorld.js

Write the Component

Add the following code to HelloWorld.js:

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to your first React component.</p>
    </div>
  );
}

export default HelloWorld;

Import and Use the Component

Open App.js and modify it to include your new component:

import React from 'react';
import HelloWorld from './HelloWorld';

function App() {
  return (2. Write the Component

Add the following code to HelloWorld.js:

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to your first React component.</p>
    </div>
  );
}

export default HelloWorld;


    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

Save the file, and your browser should display the "Hello, World!" message.

Step 5: Styling Your Component

React allows you to style components using CSS. Let’s style the HelloWorld component.

Create a CSS File

Create a file named HelloWorld.css in the src folder:

src/HelloWorld.css

Add Styles

Add the following CSS:

h1 {
  color: #61dafb;
  font-family: Arial, sans-serif;
}

p {
  color: #282c34;
  font-size: 18px;
}

Apply the Styles

Import the CSS file in Helloworld.js

import React from 'react';
import './HelloWorld.css';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to your first React component.</p>
    </div>
  );
}

export default HelloWorld;

Save the file, and you’ll see the updated styles in your browser.

Step 6: Adding More Components

You can continue building your app by creating more components and importing them into App.js. Each component can have its own logic, structure, and styles.

Conclusion

Congratulations! You’ve just set up your first React project and created your first component. This is just the beginning of your React journey. As you grow, you’ll explore more advanced topics like state management, routing, and API integration. Happy coding!

If you found this tutorial helpful, share it with others and stay tuned for more React tutorials!

Responsive "Coming Soon" Page

Drishti Saraf — Wed, 22 Jan 2025 04:50:41 +0000

Recently, I took on a challenge from Frontend Mentor to build a responsive "Coming Soon" page for a fashion store. The challenge involved creating a landing page with an email subscription form, a background image, and a design that should work well on both desktop and mobile devices. In this blog post, I’ll walk you through how I approached this challenge, the key decisions I made, and how I solved problems along the way.

Step 1: Understanding the Project

Before I dove into the coding, I took some time to understand the requirements of the project. The challenge involved creating the following:

A hero section with a logo and a “coming soon” message.
A form that allows users to subscribe via email.
A responsive layout with a background image that changes according to the screen size.
Basic email validation to ensure users input a valid email.

Step 2: Structuring the HTML

The first step was to structure the HTML. I wanted to create a clean, semantic layout with minimal divs. The overall layout would consist of two main parts:

The details section that includes the logo, heading, description, and the email input form.
The image section that contains the background image.

Here's how I structured the HTML:

<div class="coming-soon-container">
  <div class="details-container">
    <div class="logo-container">
      <img src="./images/logo.svg" alt="fashion-store-logo" />
    </div>
    <div class="details">
      <h1>
        <span class="josefin-sans-thin">We're</span><br />
        coming <br />soon
      </h1>
      <p>
        Hello fellow shoppers! We're currently building our new fashion store.
        Add your email below to stay up-to-date with announcements and our launch deals.
      </p>
      <div class="input-container">
        <input type="email" id="email-input" placeholder="Enter your email" />
        <span class="icon-span" onclick="validateEmail()">
          <img src="./images/icon-arrow.svg" alt="arrow-icon" />
        </span>
      </div>
    </div>
  </div>
  <div class="image-container">
    <img src="./images/hero-desktop.jpg" alt="fashion-store-hero-image" />
  </div>
</div>

Step 3: Styling the Layout with CSS

Now it was time to make the layout look good and responsive. For this, I relied heavily on Flexbox to control the layout of the two main sections. Flexbox helps arrange elements in both horizontal and vertical directions without having to worry about floats or positioning.

I started by styling the container to create a side-by-side layout for desktop views. On mobile, I used a media query to stack the elements vertically.

The Flexbox Layout:

.coming-soon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .coming-soon-container {
    flex-direction: column-reverse;
  }
}

Explanation

The .coming-soon-container class uses display: flex to create a row-based layout.
justify-content: space-between ensures that the details and image sections are spaced apart.
On smaller screens (below 768px), I used a media query to change the direction of the layout to column, so the image section appears below the details section.

Step 4: Designing the Email Input and Arrow Icon

One of the key interactive elements of this page was the email subscription form. I wanted it to look clean and modern, so I focused on making the input field and the submit button (the arrow icon) visually appealing.

Here’s the CSS for the email input and the arrow icon:

.input-container {
  position: relative;
  width: 385px;
}

.input-container input {
  width: 100%;
  padding: 10px 50px 10px 15px;
  border: 1px solid var(--desaturated-Red);
  border-radius: 25px;
  font-size: 16px;
  outline: none;
}

.input-container input::placeholder {
  color: var(--desaturated-Red);
  opacity: 0.6;
  font-size: 12px;
}

.input-container span {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%);
  width: 70px;
  height: 40px;
  border-radius: 28px;
  background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
}

Explanation:

The .input-container class uses position: relative to position the arrow icon within the input field.
The input field has a nice rounded border with padding and a placeholder style.
The span tag, which wraps the arrow icon, is absolutely positioned inside the input field, centered vertically. The background uses a gradient to give it a more modern look.

Step 5: Adding a Responsive Hero Image

The hero image needed to be responsive, so I used the object-fit property to make sure it covered the container properly without distorting the image.

Here’s the CSS for the image container:

.image-container {
  width: 40%;
  height: 100vh;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

Explanation:

The .image-container is set to a fixed width (40%), and it fills the full viewport height (100vh).
The image inside the container uses object-fit: cover to ensure it covers the entire area while maintaining the aspect ratio.
object-position: top ensures the top part of the image is visible, which is important for maintaining focus on the key part of the image.

Step 6: Email Validation with JavaScript

Finally, I needed to add email validation to ensure that users entered a valid email address. For this, I used a simple JavaScript function that checks if the email input matches the standard email pattern.

function validateEmail() {
  const emailInput = document.querySelector("#email-input");
  const errorMessage = document.querySelector("#error-message");

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (emailRegex.test(emailInput.value)) {
    errorMessage.style.display = "none";
    alert("Email is valid!");
  } else {
    errorMessage.textContent = "Please enter a valid email address.";
    errorMessage.style.display = "block";
    emailInput.style.borderColor = "var(--soft-red)";
  }
}

document
  .getElementById("email-input")
  .addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
      validateEmail();
    }
  });

Explanation:

I used a simple regular expression to validate the email format. If the input is valid, a success message is shown; otherwise, an error message is displayed.
The keypress event listener triggers the validation when the user presses Enter.

Conclusion

This "Coming Soon" page project was a great exercise in building a responsive, modern landing page. By using Flexbox for layout, custom styles for the email input, and ensuring the page was mobile-friendly, I was able to create a clean and functional design. The challenge was especially helpful in reinforcing my understanding of responsive design and how to implement basic form validation.

If you’re looking for a similar challenge to improve your frontend skills, I highly recommend checking out Frontend Mentor’s Coming Soon page challenge. You can visit it here.https://www.frontendmentor.io/

You can view the full code here. https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/coming-soon-page

Happy coding!

Optimized React Folder Structure

Drishti Saraf — Tue, 21 Jan 2025 10:33:41 +0000

Having a well-structured folder setup is essential for creating scalable and maintainable React applications. A clear and consistent folder structure not only simplifies collaboration but also helps in debugging and extending your codebase efficiently.

Why Is Folder Structure Important?

Scalability: A clear structure allows your app to grow without becoming chaotic.
Collaboration: Team members can navigate the codebase more effectively.
Maintainability: It becomes easier to debug and add new features.

Basic Folder Structure

For small to medium-sized React projects, here’s a straightforward and effective folder layout:

src/
├── assets/
│   ├── images/
│   └── styles/
├── components/
├── pages/
├── hooks/
├── utils/
├── services/
├── context/
├── App.js
├── index.js

Folder Breakdown

assets/
This folder holds static files such as images, fonts, global styles.
components/
This folder contains reusable UI components like buttons, modals, or input fields. Each component can have its own folder for related files like styles and tests.

components/
├── Button/
│   ├── Button.jsx
│   ├── Button.css
│   └── Button.test.js
├── Modal/
│   ├── Modal.jsx
│   ├── Modal.css
│   └── Modal.test.js

pages/ This folder organizes components that represent entire pages of your application. Example:

pages/
├── HomePage.jsx
├── AboutPage.jsx
├── ContactPage.jsx

hooks/ Custom hooks that encapsulate reusable logic, such as data fetching or form handling, are placed here.

import { useState, useEffect } from "react";

export const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then((response) => response.json()).then(setData);
  }, [url]);

  return data;
};

utils/ Utility functions, such as those for formatting data or calculations, live here.

export const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

services/ This folder is used for API calls and integrations with third-party services, keeping the logic separate from components.

export const fetchUsers = async () => {
  const response = await fetch("/api/users");
  return response.json();
};

context/ This is where you manage global state using React Context API.

context/
├── AuthContext.js
└── ThemeContext.js

import { createContext, useState } from "react";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

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

Best Practices

Keep It Simple: Avoid deeply nested folders unless necessary.
Group by Feature: For larger projects, organize files by feature/module instead of type.

src/
├── features/
│   ├── Auth/
│   │   ├── LoginPage.jsx
│   │   ├── RegisterPage.jsx
│   │   └── AuthService.js
│   ├── Dashboard/
│   │   ├── DashboardPage.jsx
│   │   ├── DashboardWidget.jsx
│   │   └── WidgetService.js

Conclusion

A well-organized folder structure makes your React application scalable, readable, and maintainable. Whether you’re building a small project or a large-scale application, investing time in setting up the right folder structure will save you hours in the long run.

Share your own folder structure tips in the comments!

Let me know if you'd like further refinements! 😊

3-Column Preview Card Component

Drishti Saraf — Mon, 20 Jan 2025 04:42:40 +0000

Creating visually appealing and functional components is an essential skill for front-end developers. In this blog, I’ll guide you through how I built a 3-Column Preview Card Component using HTML and CSS. This project helped me refine my layout, styling, and responsiveness skills while teaching me valuable best practices.

Overview

The 3-Column Preview Card Component is perfect for showcasing products, services, or features. It features:

A clean and modern layout with three distinct columns.
Clear visual hierarchy using bold headings, concise descriptions, and icons.
Responsive design for seamless viewing across devices.

Project Structure

The project comprises a single HTML file, a CSS stylesheet, and assets like icons and fonts. Here’s the folder structure:

3-column-preview-card/  
├── index.html  
├── style.css  
├── images/  
│   ├── icon-sedans.svg  
│   ├── icon-suvs.svg  
│   └── icon-luxury.svg  
└── README.md

The HTML Layout
The component consists of three columns, each representing a feature or category. Each column includes an icon, a heading, a description, and a call-to-action button.

Here’s the HTML structure:

<div class="card-container">  
  <div class="card sedan">  
    <img src="./images/icon-sedans.svg" alt="Sedans Icon" />  
    <h1>Sedans</h1>  
    <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>  
    <button>Learn More</button>  
  </div>  

  <div class="card suv">  
    <img src="./images/icon-suvs.svg" alt="SUVs Icon" />  
    <h1>SUVs</h1>  
    <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p>  
    <button>Learn More</button>  
  </div>  

  <div class="card luxury">  
    <img src="./images/icon-luxury.svg" alt="Luxury Icon" />  
    <h1>Luxury</h1>  
    <p>Experience the pinnacle of comfort and style with our luxury options. Arrive in style wherever you go.</p>  
    <button>Learn More</button>  
  </div>  
</div>

Styling with CSS

Setting Up Variables CSS variables help maintain consistency across the design.

   :root {  
   --bright-orange: hsl(31, 77%, 52%);  
   --dark-cyan: hsl(184, 100%, 22%);  
   --very-dark-cyan: hsl(179, 100%, 13%);  
   --light-gray: hsl(0, 0%, 95%);  
   --white: hsl(0, 0%, 100%);  
    }

Designing the Layout The .card-container is a Flexbox container to align the three columns side by side. Each column has a distinct background color for visual separation.

   body {  
   display: grid;  
   place-content: center;  
   min-height: 100vh;  
   background-color: var(--light-gray);  
   margin: 0;  
   font-family: 'Lexend Deca', sans-serif;  
    }  

   .card-container {  
   display: flex;  
   border-radius: 10px;  
   overflow: hidden;  
   max-width: 960px;  
   margin: 0 auto;  
    }  

   .card {  
    flex: 1;  
   padding: 2rem;  
   color: var(--white);  
   text-align: center;  
    }  

  .sedan { background-color: var(--bright-orange); }  
  .suv { background-color: var(--dark-cyan); }  
  .luxury { background-color: var(--very-dark-cyan); }

Making It Responsive
Use media queries to stack the columns on smaller screens.

@media (max-width: 768px) {  
 .card-container {  
  flex-direction: column;  
 }  

 .card {  
padding: 1.5rem;  
  }  
 }

Conclusion

Building a 3-Column Preview Card Component is an excellent way to practice modern CSS techniques like Flexbox, variables, and responsive design.

Check out the live version here.https://prismatic-heliotrope-6d66a2.netlify.app/

Check out the entire code here. https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/3-column-layout

I hope this guide helps you improve your front-end skills. Let me know your thoughts or share your creations in the comments! 🚀

Stats Preview Card Component

Drishti Saraf — Sat, 18 Jan 2025 08:10:18 +0000

Creating visually appealing and functional components is a crucial skill for front-end developers. In this blog, I’ll share how I built a Stats Preview Card Component using HTML and CSS. This project challenged my design and responsiveness skills while teaching me some best practices.

Overview

The Stats Preview Card Component displays business insights with a clean layout, bold typography, and a visually striking image overlay. It adapts seamlessly to different screen sizes, ensuring users get a consistent experience on all devices.

Here’s the project structure at a glance:

HTML: Semantic structure for accessibility and clarity.
CSS: Variables, Flexbox, and media queries for styling and responsiveness.

Project Structure

The project consists of a single HTML file, a CSS stylesheet, and assets like fonts and images. Here's the folder structure:

stats-preview-card/
├── index.html
├── style.css
├── images/
│   └── image-header-desktop.jpg
└── README.md

The HTML Layout

The component is divided into two sections:

Text Content: Includes the heading, description, and statistics.
Image: A decorative image with an overlay effect.

Here’s the HTML code:

<div class="preview-card-container">
  <div class="details-container">
    <h1 class="inter-bold">
      Get <span>insights</span> that help your business grow.
    </h1>
    <p class="paragrph">
      Discover the benefits of data analytics and make better decisions
      regarding revenue, customer experience, and overall efficiency.
    </p>
    <div class="ratings">
      <div class="testimonials">
        <h3>10k+</h3>
        <p>companies</p>
      </div>
      <div class="testimonials">
        <h3>314</h3>
        <p>templates</p>
      </div>
      <div class="testimonials">
        <h3>12m+</h3>
        <p>queries</p>
      </div>
    </div>
  </div>
  <div class="image-container">
    <img src="./images/image-header-desktop.jpg" alt="business insights" />
  </div>
</div>

The use of semantic tags like <h1>, <p>, and <div> ensures better accessibility and a clear structure.

Styling with CSS

Using CSS Variables

To maintain consistency, I used variables for colors and fonts.

:root {
  --bg-color: hsl(233, 47%, 7%);
  --card-background: hsl(244, 38%, 16%);
  --soft-violet: hsl(277, 64%, 61%);
  --main-heading: hsl(0, 0%, 100%);
  --main-paragraph: hsla(0, 0%, 100%, 0.75);
  --stat-headings: hsla(0, 0%, 100%, 0.6);
}

Designing the Card

The card is styled with Flexbox for a clean, side-by-side layout.

.preview-card-container {
  display: flex;
  background-color: var(--card-background);
  color: var(--main-heading);
  width: 974px;
  height: 388px;
  border-radius: 10px;
  overflow: hidden;
}

Adding the Image Overlay

I added a soft violet overlay to the image using the ::before pseudo-element.

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--soft-violet);
  opacity: 0.6;
  pointer-events: none;
}

Making It Responsive

A media query ensures the layout adjusts for smaller screens.

@media (max-width: 991px) {
  .preview-card-container {
    flex-direction: column-reverse;
    width: 290px;
    height: auto;
  }
  .details-container {
    text-align: center;
    padding: 1rem;
  }
  .ratings {
    flex-direction: column;
    align-items: center;
  }
  .image-container img {
    border-radius: 10px 10px 0 0;
  }
}

Key Challenges

Image Overlay
Using position: absolute for the overlay required careful attention to ensure it worked seamlessly with the image container.

Typography and Spacing
Balancing font sizes, line heights, and padding was critical to achieve a polished look.

Check out the live version here: https://shiny-frangollo-b13c2a.netlify.app/

Check out the entire code here: https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/preview-card-component

Conclusion

This project was a great way to practice building responsive components with clean, reusable code. I encourage you to try this challenge to improve your HTML and CSS skills.

Happy coding! 🎉