DEV Community: Aastha

Build Personalised Occasion Cards with Google AI Studio

Aastha — Mon, 11 Aug 2025 13:31:18 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

A tool to generate personalised cards, be it for a new joinee welcome or birthdays or festival wishes.
The prompt I used is

An application that uses Gemini and Imagen to generate unique, personalised cards for various occasions like welcoming new team members, birthdays, and festivals.

Demo

https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221S_H2kAGQjzg-leqpcbbAmaomkJqzQWdd%22%5D,%22action%22:%22open%22,%22userId%22:%22107199147000047196484%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing

My Experience

During development, I noticed that some changes in AI Studio didn’t always reflect immediately. This gave me valuable insight into how the platform processes updates.

I also suggested adding separate UI customization options for desktop and mobile, which could enhance the overall flexibility for creators.

Overall, I really enjoyed experimenting with Google AI Studio’s features—it was both fun and a great learning experience.

Exact path in react-router

Aastha — Mon, 07 Jun 2021 23:19:52 +0000

When I was using react router for the first time I used path instead of exact path as props in component.

<Router>
  <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>

In the above code when one replaces exact path to path it will match every path starting with '/', since the is inside the so, it will match the first path and don't check for the other matches.
The above code after removing exact from the will always show component and ignore or .

If one doesn't want to use exact path then the below code will work

<Router>
  <Switch>
     <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
         <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>

Dark mode in your app using tailwind CSS

Aastha — Mon, 07 Jun 2021 18:29:39 +0000

I wanted a dark mode feature in my web application and instead of writing it from scratch I just used Tailwind CSS dark mode, was pretty easy to use, all you need to do is enclose the entire app inside a div having class name dark and also in tailwind.config.js file, you have to enable dark mode variant.
This class darkMode is quite useful when one wants to manually toggle the theme from dark to light and vice versa.

// tailwind.config.js
module.exports = {
  darkMode: 'class',

}

<div className = 'dark'>
<div class="bg-white dark:bg-gray-800">

  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...

  </p>
</div>
<div>

If one is using media instead of class in darkMode variant, no need to enclose the entire app inside a div having class name dark.

// tailwind.config.js
module.exports = {
  darkMode: 'media',

}


<div class="bg-white dark:bg-gray-800">

  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...

  </p>
</div>

Passing props to component in react.

Aastha — Sun, 06 Jun 2021 14:32:09 +0000

In the below code, inside MyComponent I'm rendering Home component and also passing props count to it.

And then one can use count of MyComponent in Home component.
Home component is independent of MyComponent, any component can pass props to Home component.

import React, { useState } from "react";
export default function MyComponent() {
  const[count, setCount] = useState(0);

  return (
    <div>
      <Home count = {count}/> //passing props
    </div>
  );
}

The below code snippet is using the passed props, one can either destructure the object or accept the single props object.


import React from "react";
export default function Home({count}) {

  return (
    <div>
    {count}
    </div>
      );
}


import React from "react";
export default function Home(props) {

  return (
    <div>
    {props.count}
    </div>
      );
}

The Home component will only display 0 on-screen since I'm not updating the value of count.

How to create a function component in react

Aastha — Fri, 04 Jun 2021 18:29:10 +0000

Below are the two ways of creating function component.

import React from "react";
function FirstComponent() {

  return (
    <div >
      <h1>Hello react!!!</h1>
    </div>
  );
}
export default FirstComponent

or
The below code is using arrow function for creating function component.

import React from "react";
const FirstComponent = () => {
  return (
    <div >
      <h1>Hello react!!!</h1>
    </div>
  );
}
export default FirstComponent

The above two function components can be imported without enclosing the component name inside curly braces because default has been used with export.

Note: There can be only one default export per module.

export default FirstComponent

import FirstComponent from "FirstComponent"

But if there is only export in front of a function component then the import requires curly braces around the component's name.

export const FirstComponent = () => {}

import {FirstComponent} from "FirstComponent"

Why to use useContext?

Aastha — Mon, 31 May 2021 20:15:12 +0000

What made me use useContext? What would one normally do if they want to pass data down the tree to some component, they will achieve this by passing the data as props to the child components, I did the same thing until I got to know about useContext.

What if one wants to pass the count to the last child component in the tree, like in the below code from App component(Parent Component) to About component(Last Child Component).

Without using useContext

//App.js
import Home from "./Home";
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0);
return (
    <div className="App">
    <Home count = {count}/>
     </div>
  );
}

//Home.js
import React from "react";
import About from "./About";
const Home = ({count}) => {
 return (
    <>
      Home
      <hr />
      <About count = {count}/>
      </>
  );
};

export default Home;

//About.js
import React from "react";

const About = ({count}) => {
 return <>
About
<hr/>
{count}
</>;
};

export default About;

With useContext

When we are using useContext we don't need to pass data to Home component in order to make it available to About component and we can use the count in any component which comes down the tree and is child of that component which is enclosed in Provider component.


//App.js
export const CountContext = React.createContext();
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div className="App">
      <CountContext.Provider
        value={{ 
          count
        }}
      >
        <Home/>
      </CountContext.Provider>
    </div>
  );
}

//Home.js
import React from "react";
import About from "./About";
const Home = () => {
  return (
    <>
      Home
      <hr />
      <About />
    </>
  );
};

export default Home;


import React from "react";
import { CountContext } from "./App";
const About = () => {
  const { count } = React.useContext(CountContext);
  return <>About
   <hr />
      {count}
      </>;
};

export default About;

The code won't do anything it'll just display a count on the screen that is 0.

Note: Context should be used to pass those data, which one wants to be displayed on every screen or common for all the pages like user name, theme, number of items in some cart etc.

Virtual DOM in react

Aastha — Sun, 30 May 2021 17:16:29 +0000

Why virtual DOM?

To avoid re-creation of elements if possible in real DOM, when one manipulates DOM elements.The Virtual DOM concept can help in efficient DOM manipulation through diffing and reconciliation.

Diffing is a process of comparing the previous virtual DOM to current virtual DOM and changing only those elements which are different.

Note: List items should have a *key attribute to stop recreating the list items that aren't changed.*

Reconciliation is when virtual DOM syncs with real DOM.

Real or browser DOM looks like the one shown below:

Virtual DOM is representation of UI, like real DOM excluding the heavy parts, which is kept in memory as a javascript object.

Virtual DOM looks like the one shown below:

//virtual DOM

const virtualDOM = {
    tagName: 'html',
    children: [
      { tagName: 'head' },
      {
        tagName: 'body',
        children: [
          {
            tagName: 'div',
            attributes: { id: 'root' },
            children: [
              {
                tagName: 'div',
                attributes: { class: 'App' },
                children: [
                  {
                    tagName: 'ul',
                    children: [
                      { tagName: 'li', textContent: 'Tea' },
                      { tagName: 'li', textContent: 'Juice' },
                      { tagName: 'li', textContent: 'Water' },
                      { tagName: 'li', textContent: 'Milk' },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  };

Suppose there is a list of four items, and you wish to change the child of first list item, then in real DOM that list element will be recreated along with the updated text.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script>
      function change() {
        document.getElementById("Tea").innerHTML = "Tee";
      }
    </script>
    <div id="app">
      <ul>
        <li id="Tea">Tea</li>
        <li id="Juice">Juice</li>
        <li id="Water">Water</li>
        <li id="Milk">Milk</li>
      </ul>
      <button id="1" onClick="change()">Change first item</button>
    </div>
  </body>
</html>

The purple highlighted texts in both the images shown below are recreation.

Manipulating real DOM without using virtual DOM concept

import React from "react";

export default function App() {
  const [name, setName] = React.useState("Tea");
  return (
    <div className="App">
      <ul>

        <li key="Tea">{name}</li>
        <li key="Juice">Juice</li>
        <li key="Water">Water</li>
        <li key="Milk">Milk</li>

    </ul>
      <button id="1" onClick={() => {
        setName("Tee")
      }}>Change first item</button>
    </div>
  );
}

If the same thing is done using virtual DOM only the changed child not the list element will be recreated in the real DOM as shown below.

Manipulating real DOM using virtual DOM concept

Write if else in react (Conditional Rendering)

Aastha — Sat, 29 May 2021 09:18:03 +0000

I was trying to search like this "How to write if else in react".
Then got to know about conditional rendering.
When to use conditional rendering?
If one wants to render a component based on some state change or when some condition becomes true.

In the below code conditional rendering has been done, it's first checking if isLoggedIn is true then it'll render the About component else if it's false Home component will be rendered.


//MyComponent.js
import React, {useState} from "react"
import Home from "./Home"
import About from "./About"
const MyComponent = () => {
const [isLoggedIn, setIsLoggedIn] = useState();
 return <>
{
 isLoggedIn ? (<About/>) : (<Home/>)
}
</>
}
export default MyComponent;


//MyComponent.js

import React, {useState} from "react"
import About from "./About"
import Home from "./Home"
const MyComponent = () => {
const [isLoggedIn, setIsLoggedIn] = useState();
 if(isLoggedIn) {
    return <About/>
  }else {
    return <Home/>
  }
}
export default MyComponent;

The code above will always render the Home component since I'm not changing the state isLoggedIn from false to true.

Why to use useState in react?

Aastha — Fri, 28 May 2021 08:50:00 +0000

What will happen if we don't use the useState hook in react?
Let's take an example, suppose we want to create a counter button that increments itself by one.

Without useState

In the below code if one tries to increment the counter by clicking on the button the count will not change because the react rendered the component only once and since there is no state change it won't get re-rendered, the count will remain at 0 on-screen.
By console.log one can see that the count is incrementing on click.

import React from "react";

export default function MyComponent() {
  let count = 0;
  const setCount = () => {
  count++;
  console.log(count);
   }
  return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {setCount}>{count}</button>
    </div>
  );
}

With useState

In the below code if one tries to increment the counter by clicking on the button the count will change because the react rendered the component once when it got mounted and since there is state change it will get re-rendered, the count will get incremented on-screen.

import React, { useState } from "react";

export default function MyComponent() {
const[count, setCount] = useState(0);

return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {() => {
        setCount(count + 1);
      }}>{count}</button>
    </div>
  );
}

One can always directly manipulate the DOM and increment the counter on-screen as well, but then there is no point in using react.

Prevent unnecessary renders (React.memo)

Aastha — Thu, 27 May 2021 07:44:55 +0000

React.memo is helpful in, preventing unnecessary renders,
in the below snippet, I'm using React.memo this component will only be rendered when the component gets mounted and if the props quantity changes otherwise it'll keep displaying the previously rendered component.
But if the Cart component itself has some state or using useState, useContext, useReducer it will surely be rendered.

//Cart.js
const Cart = ({ quantity }) => {
  console.log("Rendered Cart!");
  return <>Number of item is {quantity}</>;
};
export default React.memo(Cart);

In the below snippet, the Cart component is being rendered and we are passing in quantity as props, so whenever one clicks on the quantity button, the Cart component will be re-rendered but won't get re-rendered when you type in something in the search text box.

//App.js
import Cart from "./Cart";

import { useState } from "react";
export default function App() {
  const [quantity, setQuantity] = useState(0);
  const [search, setSearch] = useState();
  return (
    <div className="App">
      <Cart quantity={quantity} />
      <hr />
      <label>Quantity </label>
      <button
        onClick={() => {
          setQuantity(quantity + 1);
        }}
      >
        {quantity}
      </button>
      <hr />
      <label>Search </label>
      <input
        onChange={(event) => {
          setSearch(event.target.value);
        }}
      ></input>
    </div>
  );
}

useEffect with and without dependency array in react

Aastha — Wed, 26 May 2021 10:22:32 +0000

When I was just starting with react, the issue I faced was, useEffect hook of react got called every time state or props got changed.


import React, { useState } from "react";
export default function App() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(0);
  React.useEffect(() => {
    console.log("useEffect called!");
  });
  return (
    <div className="App">
      <label>count </label>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {count}
      </button>
      <hr />
      <label>data </label>
      <button
        onClick={() => {
          setData(data + 1);
        }}
      >
        {data}
      </button>
    </div>
  );
}

})

In the above snippet, there is no dependency array so this will be called every time if state or props changes.
To resolve this we can use dependency array.

//rest of the code is same 
 React.useEffect(() => {
    console.log("useEffect called!");
  },[data]); //adding dependency array

In the above snippet, there is a dependency array so this will only be called first when the component is being mounted and second if the dependency in that array, which is data, changes.
And also, there could be more than one dependency.

Convert entity to DTO in Springboot

Aastha — Fri, 21 May 2021 08:43:01 +0000

I used to map an entity to DTO in the service class by writing my own mapping method but recently I got to know about Model Mapper, all we need to do is just add model mapper dependency in pom.xml file.
Without using Model Mapper the code will look something like this:-

//pom.xml

 <dependency>
 <groupId>org.modelmapper</groupId>
 <artifactId>modelmapper</artifactId>
 <version>2.4.2</version>
 </dependency>

//UserService class
private UserDTO convertToDto(UserEntity userEntity) {
     UserDTO userDTO = new UserDTO();
      userDTO.setId(userEntity.getId());
      userDTO.setEmailID(userEntity.getEmailID());
      userDTO.setAbout(userEntity.getAbout());
      userDTO.setName(userEntity.getName());
      return userDTO;
    }

//UserService class
public UserDTO mapUserEntityToUserDTO(UserEntity userEntity) {

        return new UserDTO(userEntity.getId(),userEntity.getName(), userEntity.getEmailID(), userEntity.getAbout());
    }

With Model mapper

//Service class
@Autowired private ModelMapper modelMapper;
private UserDTO convertToDto(UserEntity userEntity) {
        UserDTO userDTO = modelMapper.map(userEntity, UserDTO.class);
      return userDTO;
    }