DEV Community: Shrikant Yadav

Passport Size Photo Maker – Simple Tool, Real-World Impact

Shrikant Yadav — Wed, 22 Apr 2026 09:35:59 +0000

Passport Size Photo Maker – Simple Tool, Real-World Impact

In India, something as small as a passport-size photo is still a daily requirement - for forms, IDs, school admissions, job applications, banking KYC, and government documents. Yet, getting it done often means visiting a photo studio or photocopy shop, waiting in line, and paying every time you need a fresh set.

That’s exactly the problem this tool solves.

👉 Try it here: https://photocopywala.in/tools/passport-photo-maker/

Why this tool exists

Most small photocopy shops and local studios already do passport photos every day. But the workflow is still manual:

Open Photoshop or editing software
Resize and crop images repeatedly
Adjust background and spacing
Print multiple copies on A4 sheets

It takes time, and when customers are waiting, even a small delay slows down the whole shop.

This tool simplifies that entire process into a few clicks.

How it works (super simple)

Upload a clear front-facing photo
Adjust position and crop if needed
Choose layout (A4 sheet with multiple photos)
Download ready-to-print file

That’s it - no editing software, no manual resizing.

Real use cases in India

This is where it becomes genuinely useful:

🏪 Photocopy & print shops

Quick passport-size photo generation
Faster customer handling
No need for advanced editing skills

📄 Document agents

Aadhaar, PAN, passport applications
Instant photo preparation during form filling

🎓 Students & job seekers

College admissions
Exams, certificates, resumes

🏢 Small local businesses

Shops offering KYC, banking forms, government paperwork assistance

Why it matters

In many small towns and local markets, these services are still handled manually. A tool like this doesn’t replace the shop - it actually helps them:

Serve more customers in less time
Reduce dependency on editing skills
Avoid repeated corrections and reprints
Keep workflow simple and fast

Even a small improvement here directly impacts daily income and efficiency for many local businesses.

Final thought

Passport photos might look like a small problem, but in real life, they are a constant requirement across India.

A simple tool like this saves time, reduces effort, and fits naturally into how local shops already work - just faster and cleaner.

👉 Use it here: https://photocopywala.in/tools/passport-photo-maker/

How I built a QR business card generator with Next.js

Shrikant Yadav — Wed, 22 Apr 2026 09:29:35 +0000

How I built a QR business card generator with Next.js

Most small businesses still rely on printed visiting cards that get outdated quickly and are hard to track or update.

I wanted to solve a simple problem:

Make a business card that can be shared instantly, updated anytime, and accessed through a QR code.

So I built a QR-based digital business card generator using Next.js.

The problem

Traditional visiting cards have a few issues:

Information becomes outdated (phone, email, address)
No way to track usage
Easy to lose or forget
Not optimized for mobile sharing

I wanted something that:

Works on WhatsApp instantly
Can be updated anytime
Is always accessible via a single link or QR code

The idea

The concept was simple:

Generate a digital business card → attach a QR code → share anywhere

Each card contains:

Name
Phone number
Email
Business info
Social links
Profile photo (optional)

And everything is accessible through a single URL.

Tech stack

Next.js (App Router)
Tailwind CSS
Vercel (deployment)
QR code generation library

Architecture overview

User fills form
Data stored in database
Unique URL generated
QR code created
Share anywhere

Key implementation details

Card creation API

Accept input
Validate data
Store in DB
Return card ID

QR generation

https://digitingcard.com/card/abc123

Dynamic route

/card/[id]

Fetch data
Render mobile UI
Share + Save contact

Sharing

WhatsApp button
Copy link
Download QR

Challenges

Minimal UI design
Mobile-first experience
Editable cards without QR change

What I learned

Simple tools solve real problems
Distribution > features
QR workflows are underused

Live demo

https://digitingcard.com

What’s next

Analytics
Lead tracking
Custom branding
Bulk creation

Final thought

Execution matters more than originality.

I stopped waiting for backend APIs - localmockdb made frontend development easier

Shrikant Yadav — Tue, 21 Apr 2026 13:04:14 +0000

I stopped waiting for backend APIs - localmockdb made frontend development easier

If you are learning frontend, there is a good chance you have faced this problem:

You want to build the UI.
You want to connect forms, tables, cards, and actions.
You want to understand API integration.
But the backend is not ready yet.

Sometimes you do not know backend yet.
Sometimes you only want to test whether the frontend is working properly.
Sometimes you need to finish your frontend work before the real APIs are delivered.

And sometimes, as a beginner, building frontend and backend together is simply too much at once.

That is exactly where localmockdb helped me.

I found localmockdb when I needed something simple that could behave like an API without forcing me to set up a real backend. I wanted to keep moving on the frontend, test flows properly, and store data locally in the browser. For that use case, it turned out to be a really practical tool.

What localmockdb solved for me

The main problem was not coding the UI.
The real problem was being blocked.

I needed a way to:

build screens without waiting for backend APIs
test create, read, update, and delete flows
check whether forms, lists, and detail views were behaving correctly
simulate real frontend work with API-like data
keep data saved locally in the browser during development

For beginners, this is even more useful.

When you are new to React or Next.js, you usually want to learn:

how data flows through the app
how API integration feels in a real project
how forms submit data
how records are updated or deleted
how frontend state changes after an API response

But learning backend and frontend together can slow everything down.

With localmockdb, you can stay focused on frontend first and still practice API-style implementation.

Why I liked it

What I liked most is that it keeps things simple.

You do not need to create a full backend.
You do not need to manage a database.
You do not need to stop your frontend work just because the APIs are not ready.

It gives you a simple way to work with collections and records locally, so you can continue building and testing the actual frontend experience.

That is helpful in a lot of real situations:

when you are a beginner learning frontend
when backend work is delayed
when you want to prototype quickly
when you want to test whether the UI is actually working
when you want demo data without building a full server

Works well for beginner frontend learning

I think this is especially useful for beginners because it reduces pressure.

A lot of new developers get stuck at this point:
“The UI is ready, but now what do I do about the API?”

And then progress stops.

Using a tool like localmockdb gives you a simple bridge between static UI and real application behavior. You can practice the logic of frontend apps in a way that feels much closer to real development.

That means you can learn:

CRUD flow
local data handling
record updates
UI refresh after actions
form-to-data connection
basic API thinking without needing a backend first

That is a much better learning experience than only making static pages.

Good fit for React and Next.js projects

If you are using React.js or Next.js, tools like this are very useful because most of the time you want to test components with changing data, not just hardcoded arrays.

It is much easier to understand your app when you can:

add a record
edit a record
delete a record
reload the page
see whether the app still behaves the way you expect

That kind of testing helps you catch problems earlier in the frontend itself.

Browser-based saving is a big plus

Another thing I liked is the local browser-based persistence approach.

For local development and learning, saving data in the browser is genuinely helpful. You can work with collections locally, refresh the app, and continue testing. And when you want a clean start, you can erase the data and begin again.

That is exactly the kind of low-friction workflow beginners need.

Simple, practical, and useful

This is not something I would describe as a replacement for a real production backend.

But that is also not the point.

The point is to help you move faster when:

you are learning
you are building frontend first
you are blocked by missing APIs
you want to validate the UI properly
you want to test app behavior before backend integration

And for those cases, it is genuinely useful.

My honest take

If you are a beginner, this kind of tool can save you a lot of confusion.

You do not have to wait.
You do not have to fake everything manually.
You do not have to build backend and frontend together from day one.

You can focus on the frontend, understand how data-driven UI works, and learn API-style implementation in a simpler way.

That is why localmockdb stood out for me.
It made frontend work easier, faster, and less blocked.

If you are currently learning React, Next.js, or general frontend development, and you want something simple for local API-style testing, this is worth trying.

Package:
https://www.npmjs.com/package/localmockdb

Installation:

You must try it
npm install localmockdb

Working Demo:
https://shrikant9907.github.io/localmockdb-demo/

Understanding The Use Of Context API In React JS

Shrikant Yadav — Sat, 29 Jun 2024 17:56:46 +0000

React JS, known for its efficient and flexible JavaScript library for building user interfaces, often requires sharing data between components without passing props at every level. This is where the Context API in React JS comes into play. The Context API enables the seamless transmission of data through the component tree without the need for prop drilling at each hierarchical level.

What is Context API?

The Context API is a React mechanism that facilitates the sharing of specific data across all levels of an application. It’s designed to solve the problem of prop drilling, where props are passed down through multiple levels of a component tree.

Common Uses of Context API

Here are five common scenarios where the Context API is particularly useful:

Theme Management
User Authentication
Global State Management
Language Localization
Notification System

Let’s dive into each use case with examples to understand how the Context API can be implemented effectively.

1. Theme Management

When building a web application, managing themes can become cumbersome if we pass theme-related props through multiple components. The Context API simplifies this process.

Example:

// ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

// App.js
import React, { useContext } from 'react';
import { ThemeProvider, ThemeContext } from './ThemeContext';

const ThemeToggle = () => {
    const { theme, setTheme } = useContext(ThemeContext);

    return (
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
            Toggle Theme
        </button>
    );
};

const App = () => (
    <ThemeProvider>
        <ThemeToggle />
    </ThemeProvider>
);

export default App;

2. User Authentication

Managing user authentication states such as login status, user data, and tokens can be simplified using the Context API.

Example:

// AuthContext.js
import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

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

    const login = (userData) => {
        setUser(userData);
    };

    const logout = () => {
        setUser(null);
    };

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

// App.js
import React, { useContext } from 'react';
import { AuthProvider, AuthContext } from './AuthContext';

const UserProfile = () => {
    const { user, logout } = useContext(AuthContext);

    if (!user) return <p>Please log in.</p>;

    return (
        <div>
            <p>Welcome, {user.name}!</p>
            <button onClick={logout}>Logout</button>
        </div>
    );
};

const App = () => (
    <AuthProvider>
        <UserProfile />
    </AuthProvider>
);

export default App;

3. Global State Management

For managing global states like app settings or configurations, the Context API provides a straightforward solution.

Example:

// AppContext.js
import React, { createContext, useState } from 'react';

export const AppContext = createContext();

export const AppProvider = ({ children }) => {
    const [settings, setSettings] = useState({});

    return (
        <AppContext.Provider value={{ settings, setSettings }}>
            {children}
        </AppContext.Provider>
    );
};

// App.js
import React, { useContext } from 'react';
import { AppProvider, AppContext } from './AppContext';

const SettingsComponent = () => {
    const { settings, setSettings } = useContext(AppContext);

    const updateSetting = () => {
        setSettings({ ...settings, newSetting: true });
    };

    return (
        <div>
            <p>Current Settings: {JSON.stringify(settings)}</p>
            <button onClick={updateSetting}>Update Settings</button>
        </div>
    );
};

const App = () => (
    <AppProvider>
        <SettingsComponent />
    </AppProvider>
);

export default App;

4. Language Localization

Handling multiple languages in an application can be efficiently managed using the Context API to switch between languages seamlessly.

Example:

// LanguageContext.js
import React, { createContext, useState } from 'react';

export const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
    const [language, setLanguage] = useState('en');

    return (
        <LanguageContext.Provider value={{ language, setLanguage }}>
            {children}
        </LanguageContext.Provider>
    );
};

// App.js
import React, { useContext } from 'react';
import { LanguageProvider, LanguageContext } from './LanguageContext';

const LanguageSelector = () => {
    const { language, setLanguage } = useContext(LanguageContext);

    return (
        <select value={language} onChange={(e) => setLanguage(e.target.value)}>
            <option value="en">English</option>
            <option value="es">Spanish</option>
        </select>
    );
};

const App = () => (
    <LanguageProvider>
        <LanguageSelector />
    </LanguageProvider>
);

export default App;

5. Notification System

A global notification system can be implemented using the Context API to manage alerts, messages, and notifications across the application.

Example:

// NotificationContext.js
import React, { createContext, useState } from 'react';

export const NotificationContext = createContext();

export const NotificationProvider = ({ children }) => {
    const [notifications, setNotifications] = useState([]);

    const addNotification = (message) => {
        setNotifications([...notifications, { id: Date.now(), message }]);
    };

    const removeNotification = (id) => {
        setNotifications(notifications.filter(notification => notification.id !== id));
    };

    return (
        <NotificationContext.Provider value={{ notifications, addNotification, removeNotification }}>
            {children}
        </NotificationContext.Provider>
    );
};

// App.js
import React, { useContext } from 'react';
import { NotificationProvider, NotificationContext } from './NotificationContext';

const NotificationList = () => {
    const { notifications, removeNotification } = useContext(NotificationContext);

    return (
        <ul>
            {notifications.map(notification => (
                <li key={notification.id}>
                    {notification.message}
                    <button onClick={() => removeNotification(notification.id)}>Dismiss</button>
                </li>
            ))}
        </ul>
    );
};

const App = () => (
    <NotificationProvider>
        <NotificationList />
    </NotificationProvider>
);

export default App;

Conclusion

The Context API in React JS is a powerful tool to manage state and share data across components without the hassle of prop drilling. From theme management to user authentication, global state management, language localization, and notification systems, the Context API simplifies the development process and makes your code more maintainable.