DEV Community: Ramya Sri M

🌟 Dream-to-Reality Planner: Where 🎨 imagination meets 🚀 execution

Ramya Sri M — Sun, 14 Sep 2025 10:41:16 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

This is a Dream-to-Reality AI Planner ✨ — a motivational and personalized goal-setting application.

Users provide a dream or goal — anything from “💻 learn to code a website” to “🏃 run a marathon” — and the AI generates a complete, actionable roadmap to achieve it.

Unlike a static checklist, the app provides a rich, interactive plan 📋 filled with milestones, sub-steps, resources, and motivational boosts to keep users engaged on their journey.

The Problem It Solves

Many people struggle to turn ambitious goals into realistic, step-by-step action plans. They either feel 😣 overwhelmed or lose 💪 motivation along the way.

This project solves that by giving them a structured roadmap, interactive tracking tools 📊, and continuous motivation 🔥 — all generated instantly with the Gemini API.

The User’s Journey

Step 1: Input

The user sees a clean, simple form.
They type in their dream or goal.
Optionally, they upload an inspiration image 🖼️ to personalize the plan.

Step 2: Generation

The dream + image are sent to Gemini.
A loading screen appears with a friendly message: “Crafting your roadmap… 🛠️”

Step 3: Roadmap Output

The AI generates a structured roadmap, which includes:
🎖️ Milestones (big phases of the goal).
✅ Substeps (smaller, actionable tasks).
🔗 Resources & Motivation (trusted links + motivational quotes).
🎬 Bonus Content (poster ideas & YouTube video suggestions).

Step 4: Interaction & Persistence

✅ Users tick off substeps, and progress bars update in real-time.
🎉 Completing a milestone triggers a celebration animation.
✏️ Users can edit milestones (title, motivation, duration, resources).
💾 Plans are saved in a personal dashboard using local storage.
🔥 A streak counter motivates users by rewarding daily progress.

Demo

✨Turn your dream into reality—try the live demo here : Your Demo Link

Here’s a project screenshot showing the AI turning dreams into actionable plans🚀:

How I Used Google AI Studio

Google AI Studio played the role of a true co-creator in this project. From designing features and refining the UI to structuring the roadmap and logic, every part of the app was shaped through iterative collaboration with AI. What started as an idea quickly became a polished, interactive product powered by Gemini.

Multimodal Features

One of the most powerful aspects of this project is its multimodal input, powered by Gemini-2.5-Flash. Unlike traditional text-only planners, it processes both your text and images to create a personalized, visually inspired roadmap.

Why Gemini-2.5-Flash?

🖼️ Multimodal Input: Combines your goal description and inspiration photos.
⚡ Speed & Efficiency: Instant roadmap generation.
🧩 Structured Output: Returns clean JSON ready for the React UI—no messy parsing.

Example in Action:
Dream: “Write my first novel”
Image Input: Cozy writing desk or typewriter photo
AI Output:

📅 Daily writing goals (“500 words/day”)
🖋 Creative writing prompts
📚 Storytelling techniques & structure guides
🎤 Motivational resources

Conclusion

The Dream-to-Reality Planner turns raw ambition into a guided, interactive journey. By combining Gemini’s multimodal capabilities with a modern React frontend, it helps users move from dreaming to doing.

✨ Try it out. Share your dream. Start your journey.

Closures in JS🤯

Ramya Sri M — Mon, 16 Dec 2024 08:42:44 +0000

Closures🔥

A function, bundled together with its lexical scope, forms a closure.
A closure provides access to an outer function's scope from an inner function.

function x() {
   var a = 7;
   function y() {
       console.log(a) ;
   }
  y() ;
}
x() ;  
// 7

In this program, when y() tries to run, it looks for 'a' in its local memory. Since it does not find it there, it accesses its lexical parent, x.

function x() {
   var a = 7;
   function y() {
       console.log(a) ;
   }
  return  y;
}
var z = x() ;
console.log(z) ; //ƒ y() {console.log(a); }
z() ; // 7

In the above program, the console.log statement returns the function y() (i.e., function y() { console.log(a); }). When 'y' is returned, the function is returned, and the entire closure (the function y along with its lexical scope) is returned and assigned to 'z'. As a result, when 'z' is used elsewhere in the program, it still retains access to the variable 'a' inside x(). Even though x() no longer exists, the 'y' function remembers its lexical scope, allowing z() to output 7.

Whenever a function is returned, even if it vanishes from the execution context, it still retains the reference it was pointing to. It does not return just the function alone but the entire closure.

function z() {
    var b = 100;
    function x() {
        var a=7;
        function y(){
            console.log(a,b);
        }
        y();
    }
    x();
}
z();

In the above image, 'y' forms a closure with the scope of 'x' and the scope of 'z'.

Credits to Akshay Saini. [(https://youtu.be/qikxEIxsXco?si=sRe_4k5swSbnr50T)]

Shortest JS Program, Window & this keyword 🔥

Ramya Sri M — Wed, 27 Nov 2024 17:22:39 +0000

Shortest JS Program 🤔

The shortest program in JavaScript is an empty file. Although the file is empty and there is nothing to execute, the JavaScript engine still performs several tasks behind the scenes. If we run the shortest JavaScript program (i.e., an empty file), the engine creates a global execution context and allocates memory space. Even with nothing to set up, it is still doing its job.

window & this keyword

The JavaScript engine creates something known as the window object. The window object is the global object that is created alongside the global execution context. It contains functions and variables, which are attached to the global object (i.e., window). All JavaScript engines are responsible for creating the global object. In the case of browsers, this global object is the window.
Along with the execution context, the JavaScript engine also creates the 'this' keyword. At the global level, this points to the window object in the case of a browser.

this === window

var a = 11;
console.log(window.a); //11
console.log(a);        //11 (If we don't specify window (window.a), it automatically assumes that we are referring to the global space.)
console.log(this.a);   //11

These variables and functions are attached to the global object (i.e., window). If we create a variable in the global scope, it gets attached to the global object.

Credits to Akshay Saini. [(https://youtu.be/QCRpVw2KXf8?si=5YAjXNQ0wxvCo96Z)]

Callback Function 🔥

Ramya Sri M — Tue, 26 Nov 2024 18:27:18 +0000

Callback Function

Functions are first-class citizens, meaning take a function and pass into another function.It provides access to the entire asynchronous world in a synchronous world.

function x(y){

}
x(function y(){

});

Take a function y and pass it into another function x. Here, y is a callback function. This allows function x to call function y.

setTimeout(function () {
    console.log("Timer");
}, 8000)

The function passed as the first parameter to setTimeout is the callback function, and the second parameter is the timer.

JavaScript is a synchronous and single-threaded language. However, with callbacks, we can perform asynchronous operations in JavaScript.

setTimeout(function () {
    console.log("timer");
  }, 6000);
  function x(y) {
    console.log("x");
    y();
  }
  x(function y() {
    console.log("y");
  });

Look at the above code. Initially, x and y are present in the call stack, and then the call stack becomes empty. setTimeout will take this callback function and store it in a separate space, attaching a timer to it(Eg:6 seconds). After 6 seconds, the timer will be added to the call stack.
If x() takes 20 seconds to run, JavaScript must wait for it to finish. JavaScript has only one call stack, which is also referred to as the main thread.
Everything is executed through the call stack.

Blocking The Main Thread

Any operation that blocks the call stack is referred to as blocking the main thread.
Never block the main thread.

Always try to use asynchronous operations for tasks that take time, such as setTimeout.

Credits to Akshay Saini.

Demystifying Function Statements, Expressions, and more in JavaScript🔥

Ramya Sri M — Mon, 25 Nov 2024 18:29:44 +0000

Function Statement

A Function Statement is also known as a Function Declaration.

function x(){
  console.log("x called");
}
x(); // x called

This way of creating a function, using the function keyword followed by the function name and its body, is known as a function statement.

Function Expression

Assigning a function to a variable makes the function act like a value.

var y = function (){
  console.log("y called");
}
y();// y called

This is known as Function Expression.

function x(){
  console.log("x called");
}

var y = function (){
  console.log("y called");
}
x(); //x called
y(); // y called

x(); 
y();

function x(){
  console.log("x called");
}

var y = function (){
  console.log("y called");
}

//x called
//TypeError: y is not a function

The main difference between a function statement and a function expression is hoisting.

Look at the code above.In the hoisting phase, during the memory creation phase, JavaScript creates memory for a function (e.g., x(): {...}). However, in the case of a function expression, y is treated like a another variable and is initially assigned undefined. It can only be called after it has been defined in the code.

Anonymous Function

A function without a name is known as an anonymous function. According to the ECMAScript specification, a function statement should always have a name.

function () {

} //SyntaxError: Function statements require a function name.

Anonymous functions are used in places where functions are used as values.

Named Function Expression

It is the same as a function expression, but we must provide a function name.

var y = function greet(){
  console.log("y called");
}
y(); //y called
greet(); //ReferenceError: greet is not defined.

First Class Function

First Class Function is also known as First class citizens. The ability of functions to be used as values, passed as arguments to other functions, and returned from functions is known as First Class Function.

var y = function(param1){
  return function greet(){

  }
}
console.log(y());

//ƒ greet(){

  }
--------------------------------------------------------------------

var y = function(param1) {
  console.log(param1);
}
function greet(){
}
y(greet);

//ƒ greet(){
}

Credits to Akshay Saini.

Block Scope & Shadowing in JS🤯

Ramya Sri M — Sun, 24 Nov 2024 17:31:07 +0000

Block

A block, also known as a compound statement, is defined by curly braces {}. It groups multiple JavaScript statements together into a single unit.

{
  //compound statement
  var x = 60;
  console.log(x);
}

Block Scope

Block scope means that all variables and functions declared inside a block {} are accessible only within that block.

{
  var x = 36;
  let y = 27;
  const z = 78;
}

let and const have separate memory and are block-scoped, whereas var is function-scoped or globally scoped.

{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); //36
  console.log(y); //27
  console.log(z); //78
};
console.log(x); //36
console.log(y); //ReferenceError: y is not defined
console.log(z);

We can access var outside the block because it has global or function scope. However, let and const cannot be accessed outside the block because they are block-scoped.

Shadowing

If we have a variable with the same name both outside and inside a block, the variable inside the block shadows the one outside.

var x = 57;
{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); //36
  console.log(y); //27
  console.log(z); //78
};
console.log(x); //36

In this example, we have two variables with the same name (var x). The variable var x = 36 shadows the variable var x = 57. Both variables share the same memory space. As a result, the value of x is first assigned 57 and then modified to 36, since they both point to the same memory location (They are in global scope).

let y = 51;
{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); //36
  console.log(y); //27
  console.log(z); //78
};
console.log(y); //51

In this example, we have two variables with the same name (let y). The variable let y = 27 shadows the variable let y = 51. This code has three scopes: global scope, block scope, and script scope (let and const have separate memory spaces). The variable let y = 27 is block-scoped, while let y = 51 belongs to the script scope. As a result, console.log inside the block outputs 27, and outside the block, it outputs 51

The same applies to const as well.

const z = 21;
{
  var x = 36;
  let y = 27;
  const z = 78;
  console.log(x); // 36
  console.log(y); //27
  console.log(z); //78
};
console.log(z); //21

Illegal Shadowing

let x = 4;
{
  var x = 7;
};// SyntaxError: Identifier 'x' has already been declared.

We cannot shadow let using var. This is illegal shadowing. But the opposite is possible. We can shadow let using let.

var x = 4;
{
  let x = 7;
};
--------------------------------------
let x = 4;
{
  let x = 7;
};
--------------------------------------
const x = 4;
{
  const x = 7; // This is also possible
};

Credits to Akshay Saini. [(https://youtu.be/lW_erSjyMeM?si=2sy5sBnA8mgfLVRn)]

What are Scope, Scope Chain, and Lexical Environment?🔥

Ramya Sri M — Sat, 23 Nov 2024 18:29:50 +0000

Scope

Scope refers to the areas in our code where a specific variable or function can be accessed.
Scope in JavaScript is directly related to the Lexical Environment.

function x(){
  console.log(y); //It can access y, which is defined outside the function.
}
var y = 10;
x();    // 10
-------------------------------------------------------------------------
function x(){
  z();
  function z(){
    console.log(y); 
  };
};
var y = 10;
x();    // 10

Lexical Environment

Whenever an Execution Context is created, a Lexical Environment is also created. The Lexical Environment consists of the local memory along with a reference to the lexical environment of its parent. 'Lexical' refers to hierarchy, sequence, or order.

Local Memory + Reference to the Lexical Environment of its parent.

Scope Chain

The chain of all lexical environment references to parent contexts is known as the Scope Chain. The process of finding y through this chain is referred to as Scope Chain resolution.

Whenever code is executed, a Global Execution Context is created. When the Global Execution Context is created, it is pushed onto the call stack.

GEC => Global Execution Context
M => Memory Component
C => Code Component

"y" is lexically inside the "x" function, and "x" is lexically inside the Global Execution Context.

Refer to the above diagram. Assume the red box represents a reference to the lexical environment of its parent.

The lexical parent of z is x() because z is lexically inside x(). The z function has a red box, which refers to the lexical environment of x() (i.e., z's memory space + the lexical environment of its parent). Similarly, x has a red box that references its own memory space and the lexical environment of its parent (GEC). The lexical environment of the global parent is null because there is no further lexical environment to search. At this point, the program stops, and the JavaScript engine throws an error.

//Case 1

function x(){
  var y = 10;
  z();
  function z(){
    console.log(y); 
  };
};
x();    // 10

In Case 1 The JavaScript engine will first try to find the value of y inside the local memory of z(). If it is not found there, it will check the lexical environment of its parent, x(). In the local memory of x(), the engine finds the value of y.

//Case 2

function x(){
  z();
  function z(){
    console.log(y);   // ReferenceError: y is not defined.
  };
};
x();

In Case 2 The JavaScript engine will first try to find the value of y inside the local memory of z(). If it is not found there, it will look in the lexical environment of its parent, x(). The engine will then check the local memory of x(). If the value is still not found, it will proceed to the lexical environment of the global execution context (GEC). The GEC will search for the value in its local memory. If the value is not found there either, and the lexical environment of the global context points to null, the program stops. At this point, the JavaScript engine throws an error stating that y is not defined.

Credits to Akshay Saini.

Var Vs Let Vs Const

Ramya Sri M — Fri, 22 Nov 2024 17:26:24 +0000

Var

var a = 11;
{
var a = 8;
};
console.log(a);// 8
-------------------------------------------------------------------------
var a = 11;
{
a = 28;
};
console.log(a);// 28

Variables declared with var are in the global scope. We can access a var variable even outside a block because it is not block-scoped. Additionally, we can redeclare and reassign a var variable both inside and outside a block.

Let

{
    let a = 24;
}
console.log(a);// ReferenceError: a is not defined
-------------------------------------------------------------------------
{
    let a = 24;
    console.log(a);// 24
}
-------------------------------------------------------------------------
{
    let a = 24;
    a = 20;
    console.log(a);// 20
}// 
-------------------------------------------------------------------------
{
    let a = 24;
    let a = 20;
    console.log(a);//SyntaxError: Identifier 'a' has already been declared
}
-------------------------------------------------------------------------
let a = 20;
{
let a = 24;
console.log(a);// 24
}

let has a separate memory space and block scope. Variables declared with let cannot be accessed outside the block because they are not in the global scope. We can reassign a let variable. However, we cannot redeclare the same variable within the same block, but we can redeclare it in a different block.

Const

{
  const x = 4;  
}
console.log(x);//ReferenceError: x is not defined
-------------------------------------------------------------------------
{
  const x = 4;  
  console.log(x) ;// 4
}
-------------------------------------------------------------------------
{
  const x = 4;  
  const x = 2;  
}
console.log(x);//SyntaxError: Identifier 'x' has already been declared
-------------------------------------------------------------------------
{
  const x = 4;   
}
const x = 2;
console.log(x);// 2
-------------------------------------------------------------------------
const x = 2;// we can access the global(x)
{
  const x = 4;   // we cannot access the outside block
}
console.log(x);// 2

const has a separate memory space and is block-scoped. Once a value is declared and initialized with const, it cannot be redeclared or reassigned. We cannot access a const variable outside its block because it is not in the global scope. We cannot redeclare the variable within the same block, but we can redeclare it outside the block.

Are let and const hoisted?🤔 What is the Temporal Dead Zone?

Ramya Sri M — Thu, 21 Nov 2024 18:28:29 +0000

Yes, let and const declarations are hoisted, but they are hoisted differently from var declarations.

console.log(b); // undefined
let a = 12;
var b = 28;

We know that we can access "b" even before it is initialized. It does not give an error but instead returns a special value: undefined.


console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 12;
var b = 28;

This code gives an error, indicating that the variable can only be accessed after it is initialized.

let a = 12;
console.log(a); // 12
var b = 28;

JavaScript allocates memory for "a" and "b" even before a single line of code is executed. In the case of var(b), it is in the global space, while for let(a), it is in the script scope. The memory assigned to "b" is attached to the global object. Although let and const also have allocated memory, they exist in a separate memory space. This memory space for let and const declarations cannot be accessed before they are initialized.

console.log(a);

let a = 12; //TDZ Ends

var b = 28;

The period from when the let variable is hoisted until it is initialized with a value is called the Temporal Dead Zone. If we try to access a variable inside the Temporal Dead Zone, it results in a ReferenceError. In this code, JavaScript allocates memory for "a" in the script (as undefined) even before execution begins. The variable "a" remains in the Temporal Dead Zone until a value is assigned. Anything before the line (let a = 12) represents the Temporal Dead Zone for "a".

let is stricter than var, and const is even stricter than let.


let a;
a = 11;
console.log(a); // 11 --> We can declare and assign a on different lines.
-------------------------------------------------------------------------
const b;
b = 28;
console.log(b);//Uncaught SyntaxError: Missing initializer in const declaration.(We have to initialize it on the same line.(Like this-->const b = 28))
-------------------------------------------------------------------------
const b = 30;
b = 28;
console.log(b);//script.js:37 Uncaught TypeError: Assignment to constant variable.

Credits to Akshay Saini.

Undefined Vs Not defined

Ramya Sri M — Wed, 20 Nov 2024 17:51:13 +0000

First, we need to understand the JavaScript Code Execution process, which consists of two phases: the Memory Creation Phase and the Code Execution Phase. Both 'undefined' and 'not defined' are related to memory space.

undefined

In the Memory Creation Phase, variables and functions are stored as key-value pairs. JavaScript assigns undefined to each variable as a placeholder. This temporary value stays until JavaScript finds the real value, then it replaces undefined with the real one. Don't assign undefined to any variables; it's not a good practice.

var x ;
console.log(x);// undefined
x = 2;
console.log(x); //2

not defined

In JavaScript, if a variable is not declared at all and we try to access it, it will throw a ReferenceError.

console.log(x);//ReferenceError: x is not defined

credits to Akshay Saini https://youtu.be/B7iF6G3EyIk?si=0WQLx-yjVOgdkkIn

Hoisting in JS

Ramya Sri M — Tue, 19 Nov 2024 18:17:20 +0000

In JavaScript, we can access the variables and functions even before they are initialized or assigned a value.

Look at the code below:

greet(); //JavaScript
console.log(x);//Undefined
function greet(){
   console.log("JavaScript")
};
var x = 28;

In many other programming languages, this would result in an error. However, in JavaScript, this code runs without any error. JavaScript executes code line by line, but before execution, memory is allocated for all variables and functions. During the two phases—Memory Creation and Code Execution—the Memory Creation Phase assigns undefined to variables(x) and stores the entire function code(greet()) in memory. Here, we are trying to access greet even before it is initialized (We can access the function anywhere before it is initialized). If we remove (x = 28), it will result in an Uncaught ReferenceError: x is not defined.

console.log(greet); //ƒ greet(){console.log("JavaScript");}
console.log(x);//Uncaught ReferenceError: x is not defined
function greet(){
   console.log("JavaScript");
};

Hoisting is the concept of moving declarations to the top of their scope during the compile phase, before the code is executed. Declaring a variable or function means creating or defining its name so that the JavaScript engine recognizes its existence. Initialization refers to assigning a value to a declared variable or defining the code inside a function. In JavaScript, var is hoisted. However, only the declaration is hoisted, not the initialization.

greet(); //Declaring a function
var x; // Declaring a variable
console.log(x);//Undefined
function greet(){
   console.log("JavaScript")
};
x = 28;// Initializing a variable

greet()
var greet = () => {
   console.log("JavaScript");
 }; //Uncaught TypeError: greet is not a function

When we run this code, we will get an error. This will happen because, during the memory creation phase, greet will be assigned undefined, as it will be treated as a variable.

Credits to Akshay Saini.

Scope in JavaScript

Ramya Sri M — Fri, 04 Oct 2024 16:03:37 +0000

In JavaScript, Scope defines how variables are accessed and managed throughout the program. There are four types of scope:

Global Scope
Local Scope
Block Scope
Module Scope

Global Scope

Global scope is defined by variables that are declared outside of any function and can be accessed anywhere in the program.

var gVar = "Global Scope";
function globalScope(){
   console.log(gVar)
}
globalScope()
console.log(gVar)

Output

Local Scope

Local scope is defined by variables that are declared inside a function and can be accessed only within that function.

function localScope(){
   var lVar = "Local Scope";
   console.log(lVar)
}

localScope()
console.log(lVar)

Output

Block Scope

Before ES6, JavaScript had only two types of scope: global scope and local scope. After ES6, two new keywords, let and const, were introduced. These keywords provide block scope in JavaScript. A block is defined by { } and variables declared inside a block can only be accessed within that block.

function blockScope(){
   let blockVar = "Block Scope";
   console.log(blockVar);
}
blockScope()
console.log(blockVar);

Output

Module Scope

Module scope was officially introduced in JavaScript with ES6. In ES6, each module has its own scope, meaning variables and functions inside a module are private unless explicitly exported. This version introduced the import and export keywords, allowing modules to communicate with each other.

Export: Allows you to share variables, functions, or classes from a module.
Import: Allows you to bring in variables, functions, or classes from another module.

I hope this explanation clarifies the concept. If you have any questions or corrections, feel free to ask in the comments.