DEV Community: Pratyush Srivastava

I started learning Electron, and this is what I learned so far

Pratyush Srivastava — Fri, 09 Jan 2026 07:20:06 +0000

The most fascinating thing about learning JS for me was how easy to get into developing applications for different types of platforms, as I mainly work on my Windows PC I wanted to develop some personalized apps that will help me boost my productivity.

Why I did not choose native development over Electron ?
The answer to this question was quite simple for me, since I am really comfortable with JS, that is my main reason, learning a new language like C will come with its own perks but I think its more about starting than making it harder to start, right ?

I started learning it by going to the official documentation, Link and on the main page, you can see the main.js file code and files like "main.js", "preload.js" and "index.html" (only file I am familiar with), main.js, preload.js and renderer.js are the three files we need to be concerned with:

main.js: main.js is like the heart of whole application, basically connecting with node.js takes place using this file only.

preload.js: preload.js has one main responsibility and that is to work as a link between UI (renderer) and main.js or to put it simply it acts as a mediator between UI and system level functions, preload will only expose certain functions to work with UI because of security reasons (that I still have to learn about).

renderer.js: It is a simple js script that will act as the hands of UI, in web its basically a simple js script that will used to make the page interactive, "the barebones UI script", although this exists, when I started using electron with react, there is no use of this file, since react generates the html, css and js file after building.

Two ways I used to scaffold a new project:

You can use html, css, js and electron: Web development basic pillars html, css and js all three in conjunction can create any type of web page you want, similarly you can use these to create the UI you want with electron as backend a very very simple setup can look like this

here i did not use preload, since preload is optional for very small setups, and
app and BrowserWindow is required from electron as former is the application controller of whole event lifecycle and latter is used to make app's windows.
app has a function "whenReady", and returns a promise which gets fulfilled when electron has been initialized.

Using React (Vite) and electron: This was my preferred way of doing things, since react makes a lot of things quite easier, first you need to make a project using Vite and then just install electron as a dev dependency, rest is same as before, but here I am using "commonJS" and to prevent any errors, rename .js to .cjs

This is just an early overview of what I learned as I learn more, I'll keep sharing my insights with you, until then,
bye 👋

Minimal Multi-Stage Form Wizard with AI Review

Pratyush Srivastava — Tue, 26 Aug 2025 17:01:29 +0000

Introduction:

I am actually trying to brush up my react knowledge, so I am making these simple yet practical projects, and in sequence I made a minimal multi step form wizard, which has AI based review built in. I have used openrouter.ai for AI model and model used is QWEN3 similar to my previous project,
If you are interested, here is the - AI powered note taker & summarizer

Instead of telling you all about it now, let's go through everything one by one.

Preview

Features:

Multi step form
AI based data review
Custom hook for tracking progress
Data persistence in localStorage
Clean and Minimal UI using shadcn

Libraries used

Shadcn
Tailwindcss
react-markdown
zustand

Folder Structure

📦 project-root
│
├── 📂 node_modules/          # Auto-installed dependencies
├── 📂 public/                # Static assets (served directly)
│
├── 📂 src/                   # Main source code
│   ├── 📂 components/         # Reusable building blocks
│   │   ├── 📂 ui/             # UI elements (buttons, inputs, etc. from shadcn)
│   │   ├── 📂 hooks/          # Custom React hooks
│   │   │   └── useFormProgress.js   # Hook to track form progress
│   │   ├── 📂 lib/            # Helper libs / utilities (empty now)
│   │   └── 📂 Pages/          # Page-level components
│   │       ├── PageOne.jsx    # Page 1
│   │       ├── PageTwo.jsx    # Page 2
│   │       └── PageThree.jsx  # Page 3
│   │
│   ├── 📂 store/              # Global state management
│   │   └── store.js           # Zustand/Redux store setup
│   │
│   ├── 📂 utils/              # Utility/helper functions
│   │   └── aiReview.js        # contains AI helper function
│   │
│   ├── App.jsx                # Root React component
│   ├── index.css              # Global styles
│   └── main.jsx               # Entry point (renders App)
│
├── .env                       # Environment variables
├── .gitignore                 # Git ignore rules
├── components.json            # UI/Component config
├── eslint.config.js           # Linting rules
├── index.html                 # Main HTML file (Vite entry)
├── jsconfig.json              # Path aliases/config, imp for shadcn
├── package.json               # Project metadata & dependencies
├── package-lock.json          # Dependency lock file
├── README.md                  # Project documentation
└── vite.config.js             # Vite bundler config

Now let's break down every file bit by bit, and Let's start with the entry point

App.jsx:

It's the parent component and contains all the pages, and it also contains the progress bar, that gets filled according to our custom useFormProgress hook(that we'll see a little bit later), but for the time being, the hook returns

progress,
currentStep(page), and
totalSteps,

value of progress is calculated based on this simple calculation,

Math.round((completedSteps / totalSteps) * 100)

import { useStore } from './store/store'
import PageOne from './Pages/PageOne'
import PageTwo from './Pages/PageTwo'
import PageThree from './Pages/PageThree'
import { useEffect, useRef } from 'react'
import useFormProgress from './hooks/useFormProgress'
import { Progress } from "@/components/ui/progress"

const App = () => {
  const { page, formData, setData } = useStore()
  const { progress, currentStep, totalSteps } = useFormProgress()
  const pageStyle = {
    width: "100%",
    height: "100vh",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
  return (
    <div>
      <div className='p-2'>
        <Progress value={progress} />
      </div>
      <p className='p-2 font-semibold'>Step {currentStep} of {totalSteps} — {progress}%</p>
      {page === 1 && <div style={pageStyle}>
        <PageOne />
      </div>}
      {page === 2 && <div style={pageStyle}>
        <PageTwo />
      </div>}
      {page === 3 && <div style={pageStyle}>
        <PageThree />
      </div>}
    </div>
  )
}

export default App

Now let's move on to our pages

PageOne.jsx

PageOne is our first page in the app, it has two important hooks we need to consider,

first is the useReducer hook that I used for very very basic form validation. The hook takes an initial state and a reducer, that basically have some action types that will return something specific based on the matching action type, and

second is the useEffect hook that contains some useful code, firstly we take setData function from the zustand store,

setData: data => set(state => {
        const obj = { formData: { ...state.formData, ...data } }
        localStorage.setItem('formData', JSON.stringify(obj))
        return obj
    }),

and we check whether local storage has formData if it is already there we set it in store, otherwise we provide initial state to store so that we do not get any null based errors later (believe me it gets quite bad).

Then I just took all the fields and used dispatch provided by the useReducer hook to set the state so form will repopulate with data even if page is refreshed.

import { useState, useReducer, useEffect } from 'react'
import { useStore } from "../store/store"
import { Input } from "@/components/ui/Input"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

const initialState = {
    name: {
        value: '',
        touched: '',
        error: null
    },
    email: {
        value: '',
        touched: '',
        error: null
    },
    phone: {
        value: '',
        touched: '',
        error: null
    }
}

const reducer = (state, action) => {
    switch (action.type) {
        case 'name':
            return {
                ...state, name: {
                    value: action.payload.value,
                    touched: true,
                    error: action.payload.error
                }
            }
        case 'email':
            return {
                ...state, email: {
                    value: action.payload.value,
                    touched: true,
                    error: action.payload.error
                }
            }
        case 'phone':
            return {
                ...state, phone: {
                    value: action.payload.value,
                    touched: true,
                    error: action.payload.error
                }
            }
        default:
            throw new Error(`Unknown action type: ${action.type}`)
    }
}

const PageOne = () => {
    const { page, changePage, setData, formData } = useStore()
    const [state, dispatch] = useReducer(reducer, initialState)
    useEffect(() => {
        const saved = localStorage.getItem('formData')

        const initialData = saved ? JSON.parse(saved).formData : {
            name: '',
            email: '',
            phone: '',
            preferences: []
        }

        setData(initialData)

        const { name, email, phone } = initialData

        dispatch({
            type: "name", payload: {
                value: name,
                error: null
            }
        })
        dispatch({
            type: "email", payload: {
                value: email,
                error: null
            }
        })
        dispatch({
            type: "phone", payload: {
                value: phone,
                error: null
            }
        })

    }, [])
    return (
        <Card className='w-full max-w-md'>
            <CardHeader>
                <CardTitle>Enter Basic Information</CardTitle>
                <CardDescription>Please provide basic information, like name, email and phone number</CardDescription>
                <CardAction>Step 1</CardAction>
            </CardHeader>
            <CardContent>
                <div className=''>
                    <Label className='p-2 text-md' htmlFor="">Name</Label>
                    <Input type="text" name="name"
                        className={state.name.error ? 'error' : ''}
                        value={state.name.value}
                        onChange={e => dispatch({
                            type: 'name', payload: {
                                value: e.target.value,
                                error: state.name.touched ? e.target.value.length === 0 : null
                            }
                        })}
                    />
                </div>
                <div className=''>
                    <Label className='p-2 text-md' htmlFor="email">Email</Label>
                    <Input type="email" name="email"
                        className={state.email.error ? 'error' : ''}
                        value={state.email.value}
                        onChange={e => dispatch({
                            type: 'email', payload: {
                                value: e.target.value,
                                error: state.email.touched ? e.target.value.length === 0 : null
                            }
                        })}
                    />
                </div>
                <div>
                    <Label className="p-2 text-md" htmlFor="phone">Phone</Label>
                    <Input type="number" name="phone"
                        className={state.phone.error ? 'error' : ''}
                        value={state.phone.value}
                        onChange={e => dispatch({
                            type: 'phone', payload: {
                                value: e.target.value,
                                error: state.phone.touched ? e.target.value.length === 0 : null
                            }
                        })}
                    />
                </div>
            </CardContent>
            <CardFooter>

                <Button className='w-20 h-10' onClick={() => {
                    changePage('next')
                    setData({
                        name: state.name.value,
                        email: state.email.value,
                        phone: state.phone.value
                    })
                }}>Next</Button>

            </CardFooter>
        </Card>
    )
}

export default PageOne

PageTwo.jsx

It is used to get preferences from the user, that I have divided them in objects of different types according to input used, namely

checkboxes,
selectors, and
a single string named notification

I have used a useEffect hook to basically get the data from localstorage and fill them in their respective input (I know using persist from zustand is better but I just wanted to use this to see if it works or not), and

after user fill in the fields, next button will save preferences using setPreferences function from the zustand store.

import { useStore } from "../store/store"
import { useEffect, useState } from 'react'
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Select } from "@/components/ui/select"
import { Card, CardAction, CardTitle, CardHeader, CardDescription, CardContent, CardFooter } from "@/components/ui/card"

const PageTwo = () => {
  const { changePage, setPreferences, formData } = useStore()
  const [checkboxes, setCheckboxes] = useState({})
  const [selectors, setSelectors] = useState({
    language: '',
    theme: ''
  })
  const [notification, setNotification] = useState('daily')

  useEffect(() => {
    const { preferences } = formData

    if (preferences.length === 0) {
      return
    }
    const keys = Object.keys(...preferences)

    if (keys.includes('notification')) {
      setNotification(preferences[0].notification)
    }
    if (keys.includes('language')) {
      setSelectors(prev => ({
        ...prev,
        language: preferences[0].language
      }))
    }
    if (keys.includes('theme')) {
      setSelectors(prev => ({
        ...prev,
        theme: preferences[0].theme
      }))
    }
    if (keys.includes('newsletter')) {
      setCheckboxes(prev => ({
        ...prev,
        newsletter: preferences[0].newsletter
      }))
    }
    if (keys.includes('dark')) {
      setCheckboxes(prev => ({
        ...prev,
        dark: preferences[0].dark
      }))
    }
    if (keys.includes('updates')) {
      setCheckboxes(prev => ({
        ...prev,
        updates: preferences[0].updates
      }))
    }
  }, [])

  const handleCheckboxes = e => {
    setCheckboxes(prev => ({
      ...prev,
      [e.target.name]: e.target.checked
    }))
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Enter Preferences</CardTitle>
        <CardDescription>Please provide preferences.</CardDescription>
        <CardAction>Step 2</CardAction>
      </CardHeader>
      {/* checkboxes */}
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <Label className="text-sm" htmlFor="">Recieve Newsletter</Label>
            <input type="checkbox" name="newsletter" checked={checkboxes.newsletter} onChange={handleCheckboxes} />
          </div>
          <div className="flex items-center justify-between">
            <Label className="text-sm" htmlFor="">Dark Mode By Default</Label>
            <input type="checkbox" name="dark" checked={checkboxes.dark} onChange={handleCheckboxes} />
          </div>
          <div className="flex items-center justify-between">
            <Label className="text-sm" htmlFor="">Recieve Product Updates</Label>
            <input type="checkbox" name="updates" checked={checkboxes.updates} onChange={handleCheckboxes} />
          </div>
        </div>
        {/* selectors */}
        <div className="flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <Label className="text-sm" htmlFor="">Select Language</Label>
            <select className="border border-gray-200 p-.5" value={selectors.language} onChange={e => setSelectors(prev => ({ ...prev, language: e.target.value }))}>
              <option value="" disabled>Select</option>
              <option value="hindi">Hindi</option>
              <option value="english">English</option>
            </select>
          </div>
          <div className="flex items-center justify-between">
            <Label className="text-sm" htmlFor="">Theme</Label>
            <select className="border border-gray-200 p-.5" value={selectors.theme} onChange={(e) => setSelectors(prev => ({ ...prev, theme: e.target.value }))}>
              <option value="" disabled>Select</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
              <option value="system">System</option>
            </select>
          </div>
        </div>
        {/* radio buttons */}

          <div className="flex flex-col gap-1">
            <Label className="text-sm underline" htmlFor="">Notification Frequency</Label>
            <div className="flex items-center justify-between">
              <Label className="text-sm" htmlFor="">Daily</Label>
              <input type="radio" name="" value='daily' checked={notification === 'daily'} onChange={e => setNotification(e.target.value)} />
            </div>
            <div className="flex items-center justify-between">
              <Label className="text-sm" htmlFor="">Monthly</Label>
              <input type="radio" name="" value='monthly' checked={notification === 'monthly'} onChange={e => setNotification(e.target.value)} />
            </div>
            <div className="flex items-center justify-between">
              <Label className="text-sm" htmlFor="">Weekly</Label>
              <input type="radio" name="" value='weekly' checked={notification === 'weekly'} onChange={e => setNotification(e.target.value)} />
            </div>
          </div>

      </CardContent>

      <CardFooter className='flex gap-2'>

          <Button onClick={() => changePage('prev')}>Prev</Button>
          <Button onClick={() => {
            changePage('next')
            setPreferences({
              ...selectors,
              ...checkboxes,
              notification
            })
          }}>Next</Button>

      </CardFooter>
    </Card>
  )
}

export default PageTwo

PageThree.jsx

PageThree is the lastpage of the multi step form, it contains the submission button and AI review buttons.

AI review: When user clicks review button the side panel will open and I have placed a skeleton(provided by shadcn) as a loader, that will load until we get response from the API, after that it shows all the recommendation, suggestions provided by the AI model.

Submission: When user clicks the submission button, it basically calls the setSubmit function that will set the formData state into the initial state.

setSubmit: () => set(state => {
        const initialState = {
            name: '',
            email: '',
            phone: '',
            preferences: []
        }
        localStorage.setItem("formData", JSON.stringify({formData: initialState}))
        return initialState
    })

import { useEffect, useState } from "react"
import { useStore } from "../store/store"
import { aiReview } from "../utils/aiReview"
import Markdown from "react-markdown"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardAction, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

const PageThree = () => {
  const { changePage, formData, setSubmit } = useStore()
  const [review, setReview] = useState('')
  const [submitted, setSubmitted] = useState(false)
  const [loading, setLoading] = useState(false)

  const handleReview = async () => {
    try {
      setLoading(true)
      const res = await aiReview(JSON.stringify(formData))
      if (res.ok) {
        const data = await res.json()
        const { content } = data.choices[0].message
        setReview(content)
        setLoading(false)
        console.log("response", data, content)
      }
    } catch (error) {
      throw new Error('Error in review, ', error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (submitted) {
      setTimeout(() => {
        window.location.href = '/'
      }, 2000)
    }
  }, [submitted])

  if (submitted) {
    return (
      <div>Submitted</div>
    )
  } else {
    return (
      <div className="flex w-full max-w-xl gap-2">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle>Preview</CardTitle>
            <CardDescription>This is the final step, please review the form before submission</CardDescription>
            <CardAction>Final Step</CardAction>
          </CardHeader>
          <CardContent className='flex flex-col gap-2'>
            <div>
              <h2 className="font-semibold text-md">Basic Info</h2>
            </div>
            <div className="text-sm">
              <p>Name: {formData.name}</p>
              <p>Email: {formData.email}</p>
              <p>Phone: {formData.phone}</p>
            </div>
            <div>
              <h2 className="text-md font-semibold">Preferences</h2>
            </div>
            <div className="flex items-center justify-between text-sm">
              <div>
                {Object.keys(formData.preferences[0]).map(item => <p>{item}</p>)}
              </div>
              <div>
                {Object.values(formData.preferences[0]).map(item => {
                  if (typeof item === 'boolean') {
                    return (
                      <p className="text-green-500">&#10003;</p>
                    )
                  }
                  return (
                    <p>{item}</p>
                  )
                })}
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex gap-2">
            <Button onClick={() => changePage("prev")}>Prev</Button>
            {!review && <Button onClick={handleReview}>Review</Button>}
            <Button onClick={() => {
              setSubmit()
              setSubmitted(true)
            }}>Submit</Button>
          </CardFooter>
        </Card>
        {loading && <Card className="w-full max-w-md h-[450px] overflow-hidden overflow-y-scroll">
          <CardHeader>
            <CardTitle>AI Review</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4"><Skeleton className="h-4" /><Skeleton className="h-4" /><Skeleton className="h-4" /><Skeleton className="h-4" /></CardContent>
        </Card>}
        {!loading && review && <Card className="w-full max-w-md h-[450px] overflow-hidden overflow-y-scroll">
          <CardHeader>
            <CardTitle>AI Review</CardTitle>
          </CardHeader>
          <CardContent>
            <Markdown>{review}</Markdown>
          </CardContent>
        </Card>}
      </div>
    )
  }
}

export default PageThree

Store.js

Ahh, storejs, this is the where the zustand store resides, there are only two states in this,

first is the page that shows which page is we are currently and

second is the formData that contains basic details as well as preferences.

Now let's talk about all the methods it has:

changePage: Although I sort of started, and make this like a carousel of three pages, I later removed option to move after third page, so this

if (command === 'next' && state.page === 3) {
            return {
                page: 1
            }
    }

is pretty much useless now 😅, and the function changePage performs if basically moving between pages.

setData and setPreferences: They both manipulate formData state, setData changes only basic details name, email, phone, whereas setPreferences is what it suggests set preferences.

setSubmit: It changes the formData to the initial version so basically reset all the data.

import { create } from "zustand";

export const useStore = create(set => ({
    page: 1,
    formData: {
        name: "",
        email: "",
        phone: "",
        preferences: []
    },
    changePage: (command) => set(state => {
        if (command === 'next' && state.page === 3) {
            return {
                page: 1
            }
        }
        if (command === 'next') {
            return {
                page: state.page + 1
            }
        }
        if (command === 'prev' && state.page === 1) {
            return {
                page: 3
            }
        }
        if (command === 'prev') {
            return {
                page: state.page - 1
            }
        }
    }),
    setData: data => set(state => {
        const obj = { formData: { ...state.formData, ...data } }
        localStorage.setItem('formData', JSON.stringify(obj))
        return obj
    }),
    setPreferences: data => set(state => {
        const obj = { formData: { ...state.formData, preferences: [data] } }
        localStorage.setItem('formData', JSON.stringify(obj))
        return obj
    }),
    setSubmit: () => set(state => {
        const initialState = {
            name: '',
            email: '',
            phone: '',
            preferences: []
        }
        localStorage.setItem("formData", JSON.stringify({formData: initialState}))
        return initialState
    })
}))

useFormProgress.jsx

This is the custom hook that is responsible for the progress bar on top of the page,

it is quite simple and easy to implement, what I did is first I checked whether step 1 form has all the inputs filled in,

const step1Complete = formData.name && formData.email && formData.phone

then for preferences array, we check first is an array Array.isArray(formData.preferences),

then it has some value or not formData.preferences.length > 0 and

then it has some objects with truthy values or not Object.values(formData.preferences[0]).some(Boolean),

after that I checked which steps are completed by filtering the truth values,
[step1Complete, step2Complete, step3Complete].filter(Boolean).length and

that's pretty much it, then just some simple math and its done Math.round((completedSteps / totalSteps) * 100)

import {useStore} from '../store/store'

const useFormProgress =(totalSteps = 3) => {
    const {formData, page} = useStore()

    //step 1
    const step1Complete = formData.name && formData.email && formData.phone

    //step 2
    const step2Complete = Array.isArray(formData.preferences) && formData.preferences.length > 0 && Object.values(formData.preferences[0]).some(Boolean)

    //step 3
    const step3Complete = step1Complete && step2Complete
    const completedSteps = [step1Complete, step2Complete, step3Complete].filter(Boolean).length

    const progress = Math.round((completedSteps / totalSteps) * 100)
    return {
        progress,
        currentStep: page,
        totalSteps,
        completedSteps
    }

}

export default useFormProgress

aiReview.js

This file is what controls the outcome of the AI model, we're basically sending a configuration on how the outcome of the response should be,

{ "role": "system", "content": "You are a helpful assistant that checks the content of the form data and recommends improvements." }

this basically tells the model what to do and how to behave, then we just pass the data, and wait for the response

{ "role": "user", "content": `Check this data: ${content}` }

here I passed the whole object to check (because I'm lazy as hell 😅), but you can format it and use only those parts that you want to send to the model.

export const aiReview = (content) =>  fetch('https://openrouter.ai/api/v1/chat/completions', {
    method: 'POST',
    headers: {
        Authorization: `Bearer ${import.meta.env.VITE_KEY}`,
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        model: "qwen/qwen3-8b:free",
        messages: [
            {
                "role": "system",
                "content": "You are a helpful assistant that checks the content of the form data and recommends improvements."
            },
            {
                "role": "user",
                "content": `Check this data: ${content}`
            }
        ]
    }),
});

At last, I want to tell you how to run the project, just launch the terminal in VScode and type npm run dev

And THAT'S IT, that is our multi step form wizard with AI based review,

Github Repo

If you like this project and want more, you can follow me here, and/or on insta,
I will be back with more projects, tips, until then, bye 👋

AI-Powered Note Taker & Summarizer I Built From Scratch

Pratyush Srivastava — Sun, 17 Aug 2025 12:09:57 +0000

Introduction:

Motivation behind it was quite simple honestly, I just wanted to test some AI based features, so I thought why not make a simple project out of it. This is a very minimal AI based notetaker that has some good functionalities built in, like searching with debouncing, AI based summarization of notes, Markdown preview etc. It was a simple project that was so fun to make, hopefully you'll like it too, so let's start building SHALL WE !

Features

Debouncing based note search
Pinning and sorting of notes
Markdown preview of notes
AI based summarization of notes, during creation as well as after creation

Folder Structure

note-taker/
├─ node_modules/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ components/
│  │  ├─ Navbar.jsx
│  │  ├─ NoteInput.jsx
│  │  ├─ NotesCard.jsx
│  │  ├─ NotesList.jsx
│  │  └─ SearchBar.jsx
│  ├─ hooks/
│  │  └─ useDebounce.jsx
│  ├─ store/
│  │  └─ notesStore.js
│  ├─ utils/
│  │  ├─ styles.js
│  │  └─ summarizeNote.js
│  ├─ App.jsx
│  ├─ index.css
│  └─ main.jsx
├─ .env
├─ .gitignore
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ README.md
└─ vite.config.js

We are going to be only concerned with:

Components Folder:

Contains all the components required, they are as follows:

Navbar: Pretty much self explanatory

import React from 'react'

const Navbar = () => {
  return (
    <nav className=''>
      <ul className='h-[50px] w-screen flex items-center justify-between shadow-md p-2'>
        <li>AI note taker</li>
        {/* <li>day/night</li> */}
      </ul>
    </nav>
  )
}

export default Navbar

NoteInput: Has a textarea with two buttons, one will save, other will summarize then save. It has two important functions:
- handleSubmit: In this we provide a new object called newNote that will provide the base structure of how our note object is stored, it has a random id generated every time the new object created, date and pinned fields.
- handleSummary: It is a async function that will use aiSummary function(provided down in another file) that will call api endpoint and AI model will process and summarized text will be sent back that will be stored in summary field in the object.

import { styles } from "../utils/styles"
import { useState } from "react"
import { useStore } from "../store/notesStore"
import {aiSummary} from '../utils/summarizeNote'
const NoteInput = () => {
  const [text, setText] = useState('')
  const addNote = useStore(state => state.addNotes) // <- function that is present in zustand store
  const handleSubmit = e => {
    e.preventDefault()
    const newNote = {
      id: Math.random().toString(16).slice(2),
      content: text,
      date: new Date(),
      pinned: false
    }
    addNote(newNote)
  }
  const handleSummary = async() => {
    const res = await aiSummary(text)
    if(!res.ok) {
      return 
    }
    const data = await res.json()
    const content = data.choices[0].message.content
    const newNote = {
      id: Math.random().toString(16).slice(2),
      content: text,
      summary: content,
      date: new Date(),
      pinned: false
    }
    addNote(newNote)
  }

  return (
    <form onSubmit={handleSubmit} action="" className='w-full flex flex-col items-center gap-2 py-10'>
      <textarea name="" id="" placeholder='Enter the note here' className='w-1/2 h-[200px] shadow-sm p-2'value={text} onChange={e => setText(e.target.value)}/>
      <div className='gap-10 flex items-center'>
        <button type="submit" className={styles.button}>Add Note</button>
        <button type="button" onClick={handleSummary} className={styles.button}>Summarize and add</button>
      </div>
    </form>
  )
}

export default NoteInput

NotesCard: Displays note content and has additional button, for pinning, deleting and summarizing of notes, it also has tag added, so that the cards, can display markdown preview, but in my testing I found out that headings are not shown correctly, so I used its components attribute that gives the functionality to add css based on tags, so I provided customization to three of the tags, h1, h2, and p.

Something to consider in this file is the handleSummarize function, in which we again call the aiSummary function taken from summarizeNote.js and it is responsible for fetching data from AI endpoint, the difference here from previous case is we already had the text from the user from note param so we just have to pass it to the function.

The response from the endpoint is in this format:

So we use this to line of code to use the response part.

   const content = data.choices[0].message.content

import Markdown from "react-markdown"
import { useStore } from "../store/notesStore"
import { useState } from "react"
import { styles } from "../utils/styles"
import {aiSummary} from '../utils/summarizeNote'

const NotesCard = ({ note }) => {
  const deleteNote = useStore(state => state.deleteNote)
  const pinNote = useStore(state => state.pinNote)
  const updateNote = useStore(state => state.updateNote)
  const [showSummary, setShowSummary] = useState(false)
  // console.log(note)
  const handleSummarize = async() => {
    const res = await aiSummary(note.content)
    if(!res.ok) return
    const data = await res.json()
    const content = data.choices[0].message.content
    const updatedNote = {
      ...note,
      summary: content
    }
    updateNote(updatedNote)
  }
  return (
    <div className="h-[200px] w-[200px] p-2 bg-gray-200 shadow-md rounded-sm flex flex-col justify-between relative">

  {note.pinned && <div className="text-xl absolute left-[0px] top-[-10px]">&#128204;</div>}

  {/* Scrollable content area */}
  <div className="w-full overflow-y-auto max-h-[120px] pr-1 mb-1">
    <Markdown
      components={{
        h1: ({ node, ...props }) => <h1 className="text-xl font-bold" {...props} />,
        h2: ({ node, ...props }) => <h2 className="text-lg font-semibold" {...props} />,
        p: ({ node, ...props }) => <p className="text-sm" {...props} />,
      }}
    >
      {showSummary && note.summary ? note?.summary : note.content}
    </Markdown>
  </div>

  {/* Fixed button actions */}
  <div className="p-2 flex gap-2 items-center justify-between w-full">
    <button className={`${styles.cardbtn} border-red-400 hover:bg-red-500`} onClick={() => pinNote(note)}>&#128204;</button>
    <button className={`${styles.cardbtn} border-gray-400 hover:bg-gray-400`} onClick={() => deleteNote(note)}>&#128465;</button>
    {!note.summary && <button onClick={handleSummarize} className={`${styles.cardbtn} px-2 border-black hover:bg-black hover:text-white`}>...</button>}
    {note.summary && <button className={`${styles.cardbtn}`} onClick={() => setShowSummary(prev => !prev)}>&#129523;</button>}
  </div>

</div>

  )
}


export default NotesCard

NotesList: Container for cards. In this we're using the useDebounce hook and providing it 500ms of delay, you can absolutely change this value according to the use case, but in this case 500ms is enough, so I used it, and provided searchTerm as a param as well.

import NotesCard from "./NotesCard"
import { useStore } from "../store/notesStore"
import {useDebounce} from '../hooks/useDebounce'

const NotesList = () => {
  const notes = useStore(state => state.notes)
  const searchTerm = useStore(state => state.searchTerm)
  const debounced = useDebounce(searchTerm, 500)
  return (
    <div className="flex gap-10 items-center justify-center flex-wrap py-4">
      {notes.filter(i => i.content.includes(debounced) && i.pinned).map(item => <NotesCard note={item} />)}
      {notes.filter(i => i.content.includes(debounced) && !i.pinned).map(item => <NotesCard note={item} />)}
    </div>
  )
}

export default NotesList

SearchBar.jsx: It just contains an input to get the search term.

import { useStore } from "../store/notesStore"
import { useState } from "react"

const SearchBar = () => {
  const search = useStore(state => state.search)
  const searchTerm = useStore(state => state.searchTerm)
  return (
    <div className='py-2'>
      <input value={searchTerm} onChange={e => {
        search(e.target.value)
      }} className='w-full h-[50px] shadow-sm p-2' type="text" name="" id="" placeholder='&#128269;'/>
    </div>
  )
}

export default SearchBar

Hooks Folder:

Contains useDebounce hook, which will help in debouncing (obviously, haha), if you don't know what debouncing, its basically a process of delaying the time to search according to query,

Let say you are typing a "word", so search will activate on every letter, like on "w", "o", "r" and "d", in smaller applications this is fine, but quite taxing in large scale, so we wait for certain amount of time to execute the search, so instead on every letter, search will happen on when whole "word" is typed in bar, it will save resources.

import {useState, useEffect} from 'react'
export const useDebounce = (value, delay) => {
    const [debouncedValue, setDebouncedValue] = useState('')
    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value)
        }, delay)
        return () => clearTimeout(handler)
    }, [value, delay])
    return debouncedValue
}

Store Folder:

Contains store.js that has zustand store in it. Now it can be said that this file is second most important in this project, because it contains all the states and functions related to the operations that we need to perform. Notes state is an array that contains objects in the form:

{ id: Math.random().toString(16).slice(2), content: text, summary: content, date: new Date(), pinned: false }

id is random id, content is the main text provided by user and summary is the response from AI, date is the date of creation whereas pinned is the boolean property that tell whether the note is pinned or not.

addNotes, updateNote, deleteNote, pinNote and search are functions that does their work of adding, updating (mainly summary adding), deleting, pinning respectively.

import {create} from 'zustand'

export const useStore = create(set => ({
    notes: [],
    searchTerm: '',
    addNotes: (note) => set(state => ({notes: [...state.notes, note]})),
    updateNote: note => set(state => ({notes: state.notes.map(i => i.id === note.id ? note : i)})),
    deleteNote: (note) => set(state => ({notes: state.notes.filter(item => item.id !== note.id)})),
    pinNote: (note) => set(state => ({notes: state.notes.map(item => item.id === note.id ? {
        ...note,
        pinned: true
    }:item)})),
    search: term => set(state => ({searchTerm: term}))
}))

Utils:

Contains styles.js that doesn't have much styles 😅, its just one object with two properties,

export const styles = {
    button: "border p-2 rounded-sm hover:bg-gray-500 hover:text-white",
    cardbtn: "p-1 border shadow-sm rounded-sm"
}

and summarizeNote.js is the most imp. file here because it contains the function required to communicate to the AI, (I have used openrouter key here for this to work, you can make a free account and use this), here I have given a basic message config for the model to work as expected, and not mess up everything 😅

export const aiSummary = (content) =>  fetch('https://openrouter.ai/api/v1/chat/completions', {
    method: 'POST',
    headers: {
        Authorization: `Bearer ${import.meta.env.VITE_KEY}`, // <- place key here, but better to use this variable and make a .env file for this
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        model: "qwen/qwen3-8b:free",
        messages: [
            {
                "role": "system",
                "content": "You are a helpful assistant that summarizes text."
            },
            {
                "role": "user",
                "content": `Summarize this note: ${content}`
            }
        ]
    }),
});

Libraries used:

React-markdown for markdown preview, zustand for state management, and tailwindcss for styling(although I know that I did not use it much)

So This will be all, although it is small project, it can really help in understanding some concepts like debouncing and using AI according to a use case

Repo Link

Any feedback is appreciated, and comment down below, would you try this project ? and give me a follow if you want more projects, tips and anything related to js, until next time, bye 👋

I made a mini zustand, and you can do it too.

Pratyush Srivastava — Mon, 11 Aug 2025 04:22:39 +0000

So I am currently working on a note taker web app, that has some features that I thought would better work with a state management tool like zustand, I never used it before, so I want to use it, but I thought, why not learn its internal working first, so I thought of making a mini zustand, mostly consisting of core features.

Some concepts to know before:

Closures: This is one of the core features of javascript, and it is most helpful in understanding the concept behind the working of this library. I will just give you bare minimum to understand,

A closure in JavaScript is a function that "remembers" the environment in which it was created, allowing it to access variables from its outer (enclosing) function's scope, even after the outer function has finished executing.

function createCounter() {
  let count = 0; // This variable is part of the outer function's scope

  return function() { // This is the inner function (the closure)
    count++; // It "remembers" and can access 'count'
    return count;
  };
}
const counter1 = createCounter();
console.log(counter1()); // Output: 1
console.log(counter1()); // Output: 2

Pub-Sub relationship: In simple terms, you can take an example of a magazine subscription, whenever a new issue is published, every subscriber is notified of the new issue, we'll use this feature to render state changes to all the components that will be affected by this.

React state changes: In react if you use a variable to just make some changes in the state, react will not "remember" this and between renders the value will get lost, and we certainly don't want that, to update the state, you have to use the useState hook to update the state, we'll use this to send the information to React to make changes in state.

Now concepts out of way,
Let's start building, shall we

First Step: To make a simple store first

We'll take a simple counter to make, and store will be handling all the states on a central location, so we don't have to worry about states everywhere.

const createStore = initialState => {
    let state = initialState

    const getState = () => state

    const setState = (newState) => {
        state = {...state, ...newState}
    }

    return {getState, setState}
}

const counterStore = createStore({count: 0})
console.log(counterStore.getState())
counterStore.setState({count: 1})
console.log(counterStore.getState())

Here we make a simple createStore function that will have the state variable inside, not directly accessible, and here the role of closures comes in, we access the state variable by two functions:
first is the getter, getState function that will return the current value of the state and
second is the setter, where we provide newState and it will overwrite the current state. And after that we create a instance of this createStore function as counterStore so that we can use it

It works as a simple store now, but we have two things to take care of,
first is how we can send change updates to all that is associated with the store and
second to link it in react,
To fix the first issue, we have to,

Second Step: To introduce subscribers

Subscribers will be a set of listeners(callback function) that will be updated based on changes made in the state

const createStore = initialState => {
    let state = initialState

    const subscribers = new Set() //used set since we do not want duplicates

    const getState = () => state

    const setState = (newState) => {
        state = {...state, ...newState}
        subscribers.forEach(cb => cb(state)) // we update each subscriber on the changes
    }

    const subscribe = listener => {
        subscribers.add(listener)
        return () => subscribers.delete(listener) //returning a function that will unsubscribe
    }

    return {getState, setState, subscribe}
}

const counterStore = createStore({count: 0})
const unsubscribe = counterStore.subscribe(state => console.log("state changed: ", state))
counterStore.setState({count: 1})
counterStore.setState({count: 2})
counterStore.setState({count: 3})
unsubscribe()
counterStore.setState({count: 4})

Here, subscribers are an empty set to avoid duplicates, these subscribers will be updated based on changes on state, in setState function we use forEach to update the state changes and, I implemented a subscribe function, in which a listener is added to the subscriber set, and we return a function that will remove the listener from the set.

Consequently, you can notice that after unsubscribing the there is no log, that's the desired effect.
So, the core of our mini zustand is complete, but a last issue still remains,
how can we use this in our react app?
To solve this, we'll implement a custom hook, that will update the state, in react based on state changes in store.

Third Step: useStore custom hook

import {useEffect, useState} from 'react'
export const useStore = store => {
    const [state, setState] = useState(store.getState())
    useEffect(() => {
        const unsubscribe = store.subscribe(setState)
        return unsubscribe
    }, [state])
    return state
}

This is the useStore custom hook, that will take care of state changes and tell react to update the state based on changes in state in our store, in this we take store as a param and use it to first pass the initial state to the "state" state in useState hook, after that a useEffect is used to subcribe to the changes, as well as return the unsubscribe function during cleanup, and finally our state and this is pretty much our mini zustand is done,
Now to test it that, if this works or not

As you can see it is working as expected, to test it i made two components, one contains the counter display (state) and other contains the increment button,

import counterStore from "./createStore"
import {useStore} from './useStore'

const ComponentOne = () => {
    const state = useStore(counterStore)
  return (
    <div>
        <h1>ComponentOne</h1>
        <h2>{state.count}</h2>
    </div>
  )
}

export default ComponentOne

import counterStore from "./createStore"

const ComponentTwo = () => {
    const increment = () => counterStore.setState({ count: counterStore.getState().count + 1 })
    return (
        <div>
            <h1>ComponentTwo</h1>
            <button onClick={increment}>increment</button>
        </div>
    )
}

export default ComponentTwo

And at last make sure to make a counterStore instance to use it,


const counterStore = createStore({count: 0})
export default counterStore

So that's it, that is your state management library core is done, there are further improvements, that can be done in this, like
selecting a single state, because currently it will target the whole state, or
making persistent store like in zustand middleware, but that's a story of another post.

Please tell me in the comments, will you try to make this yourself and use it in your projects ?, or any feedback

Repo Link

And if you want more tips, projects like this, consider a follow, more stuff is coming soon...

Ways on how you can remove password field from mongodb query result.

Pratyush Srivastava — Sun, 03 Aug 2025 05:25:57 +0000

Working on my MERN stack project (which I will reveal in the future), I came across an issue that almost everyone faces at least once when dealing with Mongoose and MongoDB queries.

It happens when we query some result from MongoDB, and the result contains sensitive information that we do not want to share with the client.

I searched for solutions and found some simple ways to avoid this:

First way: Using destructuring of the `._doc` object from the MongoDB response

if (newUser) {
    const { password: pwd, ...responseData } = newUser._doc; // <--
    res.status(201).json({
        msg: "User created successfully.",
        user: responseData
        // user: newUser
    })
}

Here, by using the ._doc object, you can separate the password from the rest of the data and return only the safe response data, without worrying about sending sensitive data to the client.

Second way: Using the `select` method to remove the password field

const user = await User.findById(_id).select("-password"); // <--
return res.status(200).json({
    msg: "User found",
    user
})

The select method provided by Mongoose lets you easily remove the password field.

Its best use case is in conjunction with the various find methods provided by Mongoose.

Third way: Using the `lean` method provided by Mongoose

const user = await User.findOne({ email }).lean(); // <--
if(!user) return res.status(400).json({ err: "User does not exist!" })

delete user.password;

const token = jwt.sign(
    { _id: user._id },
    process.env.JWT_SECRET
);

res.status(200).json({
    msg: "User logged in, successfully",
    token
})

The lean method is new for me, as I had never used it before.

This method converts the object returned by MongoDB queries into a plain JavaScript object.

Keep in mind: it removes all the functions associated with the query object, so be careful when using it.

The benefit is that, once converted to a regular object, you can easily perform operations like deleting the password key, as shown above.

So these are three ways to remove sensitive fields from MongoDB queries.

If this was helpful, give a follow, since I’ll be posting tips like this—and more stuff is coming soon!

How a simple hook can save you from a lot of hassle...

Pratyush Srivastava — Mon, 28 Jul 2025 06:49:25 +0000

I'm still working on my TODO app and building it little by little. I shared my first post here:

Here it is: https://dev.to/prs-dev/manually-updating-a-list-in-localstorage-or-using-useeffect-which-is-better-2jil

A fellow developer, @link2twenty, suggested a helpful custom hook: @blocdigital/uselocalstorage. It's a great option if you're looking for a ready-made solution.

But this got me thinking—why not try building a simple custom hook myself? It wouldn’t be as advanced, but it would be enough for my use case.

So I went ahead and built a custom hook that saves me some effort.

Here's the code

import { useEffect, useState } from "react";

const useLocalStore = (key, defaultValue = '') => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    if (storedValue) {
      return JSON.parse(storedValue);
    }
    return defaultValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useLocalStore;

How it works

The hook takes two arguments: key and defaultValue.
If no stored value is found in localStorage, it uses the default.
It uses lazy initialization to avoid unnecessary re-renders on first load.
Then it checks localStorage for a saved value. If found, that becomes the state value. If not, the default is used.
Finally, a useEffect writes the value to localStorage whenever the key or value changes.

Real-life use in my TODO app

Before, I had this code:

useEffect(() => {
  const newList = localStorage.getItem('todos');
  const filter = localStorage.getItem('filter');
  if (newList) setList(JSON.parse(newList));
}, []);

useEffect(() => {
  if (firstRender.current) {
    firstRender.current = false;
    return;
  }
  localStorage.setItem('todos', JSON.stringify(list));
}, [list]);

useEffect(() => {
  localStorage.setItem('filter', filterState);
}, [filterState]);

Now, I can replace all of that with just two lines:

const [list, setList] = useLocalStore('todos', []);
const [filterState, setFilterState] = useLocalStore('filter', 'all');

Optional: Better error handling

You can improve the hook with error handling using a try/catch block like this:

useEffect(() => {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error("Error writing to localStorage key:", key);
  }
}, [key, value]);

Thanks for reading.
Hope this helps someone out there! You can follow me for more dev tips and projects, next will be the todo app itself, so stay tuned.

Quick Tip: How I Compare Dates Properly in React (JavaScript Date Gotcha)

Pratyush Srivastava — Tue, 22 Jul 2025 04:47:15 +0000

So I am building a todo app(very common, I know), and in that, there must be a feature for due dates. Due dates are a must, in the sense that they provide a deadline for when the task must be completed.

I implemented a color based system to differentiate whether a task is

currently active (due date is in future): denoted by green color,
same day (due date is the same as creation): denoted by orange,
overdue (due date is over): denoted by red and an overdue indicator

I implemented it and it worked alright but I saw that the task created today also had an overdue indicator.

I thought, what's happening here, and then I realized the time factor is involved in the comparison, if you compare two date objects there always be time involved and it will not be desired in every case (like my case)

const compareDate = (date) => {
    const current = new Date()
    const due = new Date(date)
    if(current === due) return 'orange'
    if(current > due) return 'red' //here basically
    return 'green'
}

But if you use .toDateString() to compare only date will be compared and time factor is eliminated:

const compareDate = (date) => {
    const current = new Date()
    const due = new Date(date)
    if(current.toDateString() === due.toDateString()) return 'orange' 
    if(current > due) return 'red' 
    return 'green'
}

This fixed the problem for me, so if you're facing the same problem and this helps, you can follow for more dev tips just like this!

Manually updating a list in localstorage or using useEffect, which is better?

Pratyush Srivastava — Wed, 16 Jul 2025 09:21:13 +0000

My First Dev.to Post — React TODO App with LocalStorage

I was brushing up on my React knowledge and thought of making a small project. I decided to make a TODO app (everyone makes it when they start, I think 😄), and started by building the base app without localStorage.

It worked, but with every refresh, the list state resets and you’re left with no data. For persistent storage, the browser provides a storage option called localStorage. I used it to store the todos — and found two different ways to do this:

First Way - The Manual Way

I had four methods to take care of, and in each function, I had to manually update the list.

`handleSubmit`: submission of form data

const handleSubmit = e => {
  e.preventDefault()
  const newList = [...list, {
    id: Math.random().toString(16).slice(2),
    task,
    completed: false
  }]
  setList(newList)
  // storing in localStorage after new task
  localStorage.setItem('todos', JSON.stringify(newList))
}

`handleDelete`: deleting an individual item from the list

const handleDelete = (id) => {
  const newList = list.filter(item => item.id !== id)
  setList(newList)
  localStorage.setItem('todos', JSON.stringify(newList))
}

`handleComplete`: toggle completion of individual items

const handleComplete = id => {
  const newList = list.map(item => item.id === id ? {
    ...item, completed: !item.completed
  } : item)
  setList(newList)
  localStorage.setItem('todos', JSON.stringify(newList))
}

`handleClear`: clear the completed todos

const handleClear = () => {
  const newList = list.filter(item => item.completed !== true)
  setList(newList)
  localStorage.setItem('todos', JSON.stringify(newList))
}

I had to update localStorage manually in every function. It’s okay at this level of the project, but in larger projects, this can become quite messy.

Second Way - Using `useEffect` Hook

I used two useEffects to get the desired output.

The first one loads the stored list when the page first loads,

and the second one updates localStorage whenever the list changes.

useEffect(() => {
  const newList = localStorage.getItem('todos')
  if (newList) setList(JSON.parse(newList))
}, [])

useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(list))
}, [list])

But here’s the catch: on the very first render, when the page loads, the list state resets to empty — and that empty list gets saved back to localStorage, wiping everything.

So I had to prevent this.

The way I did that was by using useRef, since useRef doesn’t affect re-renders.

const firstRender = useRef(true)

useEffect(() => {
  const newList = localStorage.getItem('todos')
  if (newList) setList(JSON.parse(newList))
}, [])

useEffect(() => {
  if (firstRender.current) {
    firstRender.current = false // change firstRender value to false
    return // if still first render, return
  }
  localStorage.setItem('todos', JSON.stringify(list))
}, [list])

So this method also has its issues, but it was far better than manually coding localStorage updates in every function.

For me, the useEffect method was clearly the better choice over the first one.

Thanks for reading my first post! What would you have done differently — the manual way or useEffect? Let me know your thoughts 😊

DEV Community: Pratyush Srivastava

I started learning Electron, and this is what I learned so far

Two ways I used to scaffold a new project:

Minimal Multi-Stage Form Wizard with AI Review

Introduction:

Preview

Features:

Libraries used

Folder Structure

App.jsx:

PageOne.jsx

PageTwo.jsx

PageThree.jsx

Store.js

useFormProgress.jsx

aiReview.js

AI-Powered Note Taker & Summarizer I Built From Scratch

Introduction:

Features

Folder Structure

Components Folder:

Hooks Folder:

Store Folder:

Utils:

Libraries used:

I made a mini zustand, and you can do it too.

Some concepts to know before:

First Step: To make a simple store first

Second Step: To introduce subscribers

Third Step: useStore custom hook

Ways on how you can remove password field from mongodb query result.

First way: Using destructuring of the ._doc object from the MongoDB response

Second way: Using the select method to remove the password field

Third way: Using the lean method provided by Mongoose

How a simple hook can save you from a lot of hassle...

Here's the code

How it works

Real-life use in my TODO app

Optional: Better error handling

Quick Tip: How I Compare Dates Properly in React (JavaScript Date Gotcha)

Manually updating a list in localstorage or using useEffect, which is better?

My First Dev.to Post — React TODO App with LocalStorage

First Way - The Manual Way

handleSubmit: submission of form data

handleDelete: deleting an individual item from the list

handleComplete: toggle completion of individual items

handleClear: clear the completed todos

Second Way - Using useEffect Hook

First way: Using destructuring of the `._doc` object from the MongoDB response

Second way: Using the `select` method to remove the password field

Third way: Using the `lean` method provided by Mongoose

`handleSubmit`: submission of form data

`handleDelete`: deleting an individual item from the list

`handleComplete`: toggle completion of individual items

`handleClear`: clear the completed todos

Second Way - Using `useEffect` Hook