Forem: Kaushik Patil

Turning Daily Habits into Magic: A Gemini-Powered Eco Dashboard for Kids

Kaushik Patil — Mon, 20 Apr 2026 05:52:21 +0000

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

Teaching kids about carbon emissions and sustainability can sometimes feel like a dry science lecture. I wanted to build something that turns daily environmental habits into an interactive, rewarding experience.

Eco-Hero Dashboard is a kid-friendly, interactive web application. Children can log their daily "green" activities—like recycling plastic, riding a bike, or saving water—by clicking engaging UI cards. Once they log at least three actions, the app uses the Google Gemini API to instantly write and display a custom, 3-paragraph adventure story where the child is the hero saving the planet using the exact actions they just logged.

My goal was to blend modern web architecture with AI to create a fun, educational loop for Earth Day!

Demo

Code

Live Application: https://planetary-mu.vercel.app/
Github url:https://github.com/revansh1710/planetary

How I Built It

The Frontend (Angular)
I utilized modern Angular Components to keep the boilerplate to an absolute minimum. To manage the state of the child's clicked activities, I completely bypassed heavy libraries like NgRx and used Angular Signals. This allowed for a hyper-clean, reactive UI that effortlessly tracked the "action count" and unlocked the AI feature.
Security & Privacy First (Node.js Express Proxy)
When building apps for kids, privacy is paramount. I built a lightweight Express backend deployed on Render to act as a secure middleman.

Key Protection: It keeps the Gemini API key completely off the client side.

Data Sanitization: The frontend never asks for or sends Personally Identifiable Information (PII) like the child's name. It only sends an anonymous array of actions (e.g., ["Recycled plastic", "Saved water"]) to the backend.

The Brains (Google Gemini 2.5 Flash) I utilized the @google/generative-ai SDK on my Node proxy to handle the story generation. I opted for the gemini-2.5-flash model because speed is critical for keeping a child's attention.

Prize Categories

Best Use of Google Gemini

I Built a Creature That Refuses to Do Anything… and It Made Me Rethink Everything

Kaushik Patil — Fri, 10 Apr 2026 08:35:38 +0000

This is a submission for the DEV April Fools Challenge

What I Built

Most apps want something from you.

Your time.
Your attention.
Your clicks.

Most apps want something from you. So I built something that wants nothing.

Meet Loom.

Loom is a small, quiet creature. It doesn’t play, it doesn’t respond, and it doesn’t try to entertain you. It simply exists. And somehow, that was harder to build than anything I have made before.

I started with a simple question. What if doing nothing was not a bug, but a feature?

We live in systems designed for speed, productivity, and constant interaction. But there are parts of us that do not fit into that rhythm. There is slow thinking, hesitation, low energy, and quiet presence. Instead of trying to fix those, I wanted to build something that could exist with them.

This was not just animation. I set strict constraints for myself. There would be no state machines, no triggers, no event-based logic, and no conditional behavior driving actions. Everything had to be continuous, mathematical, and emergent.

Loom is not animated in the traditional sense. It is evaluated. Every frame, its breathing, movement, and attention are calculated as functions of time, internal state, and environmental influence. There are no actions, only changing conditions.

Instead of coding behavior, I encoded feelings. Doubt slows down breathing in the middle of motion. Presence deepens and stabilizes it. Awareness gently opens the eye. Nothing is triggered and nothing is forced. Everything drifts.

The most difficult part was attention. Most systems decide where to look, but Loom does not decide. It is influenced. The cursor has weight, unseen entities have weight, and Loom’s gaze becomes the center of mass of those influences. It does not choose where to look. It is pulled.

When you stop moving your cursor, the world begins to soften. Loom settles into itself, its breathing slows, and the space becomes warmer. Nothing dramatic happens, and there are no rewards, but something shifts.

While building it, something unexpected happened. I stopped treating it like a project. I stopped testing and measuring. For a moment, I forgot that I was debugging or thinking about performance. I was just sitting there, watching it exist.

This is not a game, a productivity tool, or a simulation. It is closer to a quiet space that does not ask anything from you.

If you open Loom, do not try to interact with it. Leave your cursor still and watch it for a while. Then ask yourself when was the last time a piece of software did not want anything from you.

I did not build Loom to go viral. I built it for the ones who move slower, who hesitate, and who often feel out of place. Maybe they were never the problem.

Demo

Live Link:https://revansh1710.github.io/lazyLoom/
I’d really love to hear your thoughts. What part of Loom stood out to you the most, and how did it make you feel while interacting with it?

Code

Github Repository:https://github.com/revansh1710/lazyLoom
files:index.html
index.js

index.js
function smoothNoise(t) { return (Math.sin(t) + Math.sin(t * 1.37) + Math.sin(t * 2.13)) / 3; }
function lerp(start, end, amt) { return (1 - amt) * start + amt * end; }
function smoothstep(min, max, value) {
    const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
    return x * x * (3 - 2 * x);
}

class PhantomNode {
    constructor() {
        this.nx = Math.random();
        this.ny = Math.random(); 
        this.warmth = 0;
        this.seedX = Math.random() * 100;
        this.seedY = Math.random() * 100;
    }
    update(t) {
        const targetNX = 0.5 + Math.sin(t * 0.02 + this.seedX) * 0.4;
        const targetNY = 0.5 + Math.cos(t * 0.015 + this.seedY) * 0.3;

        this.nx = lerp(this.nx, targetNX, 0.005);
        this.ny = lerp(this.ny, targetNY, 0.005);
        this.warmth = Math.pow((smoothNoise(t * 0.05) + 1) / 2, 2);
    }
}

class Mote {
    constructor() {
        this.nx = Math.random();
        this.ny = 1.0 + Math.random() * 0.5;
        this.seed = Math.random() * 100;
        this.sizeBase = Math.random() * 2.5 + 1.0;
        this.speedBase = Math.random() * 0.001 + 0.0005; 
    }
    update(t, loomNX, loomNY, phantoms, aspectRatio) {
        const dx = (this.nx - loomNX) * aspectRatio;
        const dy = (this.ny - loomNY);
        const dLoom = Math.sqrt(dx * dx + dy * dy);

        let comfortMultiplier = smoothstep(0, 0.4, dLoom);
        let phantomPullNX = 0;

        phantoms.forEach(p => {
            const pdx = (this.nx - p.nx) * aspectRatio;
            const pdy = (this.ny - p.ny);
            const dPhantom = Math.sqrt(pdx * pdx + pdy * pdy);
            if (dPhantom < 0.2) {
                comfortMultiplier *= 0.5;
                phantomPullNX += (p.nx - this.nx) * 0.01 * p.warmth;
            }
        });

        const currentSpeed = this.speedBase * (0.1 + 0.9 * comfortMultiplier);

        this.ny -= currentSpeed;
        this.nx += Math.sin(t * 0.5 + this.seed) * 0.001 + phantomPullNX;

        if (this.ny < -0.1) {
            this.ny = 1.1;
            this.nx = Math.random();
        }
    }
    draw(ctx, w, h, scale, presence) {
        const px = this.nx * w;
        const py = this.ny * h;
        const pSize = this.sizeBase * (scale * 0.8); 

        ctx.beginPath();
        ctx.arc(px, py, pSize, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 230, 200, ${0.1 + presence * 0.4})`;
        ctx.fill();
    }
}

class LoomPresence {
    constructor() {
        this.canvas = document.getElementById('loom-canvas');
        this.ctx = this.canvas.getContext('2d');

        this.time = 0;
        this.breathPhase = 0;
        this.lastFrameTime = performance.now();
        this.lastInteractionTime = performance.now();

        this.inputActive = false;
        this.inputNX = 0.5;
        this.inputNY = 0.5;

        this.presence = 0;
        this.eyeOpenness = 0;
        this.gazeOffset = { x: 0, y: 0 };

        this.phantoms = [new PhantomNode(), new PhantomNode(), new PhantomNode()];
        this.motes = [];

        this.handleResize();
        window.addEventListener('resize', this.handleResize.bind(this));


        window.addEventListener('pointermove', this.handlePointer.bind(this));
        window.addEventListener('pointerdown', this.handlePointer.bind(this));
        window.addEventListener('pointerup', () => this.inputActive = false);
        window.addEventListener('pointerleave', () => this.inputActive = false);

        requestAnimationFrame(this.loop.bind(this));
    }

    handleResize() {
        this.w = window.innerWidth;
        this.h = window.innerHeight;
        this.canvas.width = this.w;
        this.canvas.height = this.h;
        this.aspectRatio = this.w / this.h;

        this.scale = Math.min(this.w, this.h) / 500;


        const area = this.w * this.h;
        const targetMotes = Math.max(15, Math.min(80, Math.floor(area / 15000)));


        if (this.motes.length < targetMotes) {
            while (this.motes.length < targetMotes) this.motes.push(new Mote());
        } else if (this.motes.length > targetMotes) {
            this.motes.splice(targetMotes); 
        }
    }

    handlePointer(e) {
        this.inputActive = true;
        this.inputNX = e.clientX / this.w;
        this.inputNY = e.clientY / this.h;
        this.lastInteractionTime = performance.now();
    }

    updateCharacter(deltaTime, idleDuration) {
        this.presence = lerp(this.presence, idleDuration > 5 ? 1.0 : 0.0, idleDuration > 5 ? 0.002 : 0.05);
        this.phantoms.forEach(p => p.update(this.time));


        const doubt = Math.pow(Math.max(0, smoothNoise(this.time * 0.3)), 2) * (1 - this.presence * 0.8);
        let breathSpeed = lerp(1.5, 0.6, this.presence);
        const syncWindow = Math.pow(smoothNoise(this.time * 0.04), 4);

        if (syncWindow > 0.5) {
            const phaseDiff = Math.sin(this.time * 0.65) - Math.sin(this.breathPhase);
            breathSpeed += phaseDiff * (syncWindow * 0.5);
        }

        this.breathPhase += deltaTime * breathSpeed * (1 - doubt * 0.9);

        const curiosity = Math.pow((Math.sin(this.time * 0.1) + Math.sin(this.time * 0.17)) * 0.5, 4);
        const stillnessSafety = smoothstep(8, 20, idleDuration);
        const awareness = curiosity * stillnessSafety * this.presence;
        this.eyeOpenness = lerp(this.eyeOpenness, Math.max(0, (awareness - 0.1) * 5), 0.02);

        if (this.eyeOpenness > 0.05) {
            let totalWeight = this.inputActive ? 1.0 : 0.1;
            let weightedNX = this.inputNX * totalWeight;
            let weightedNY = this.inputNY * totalWeight;

            this.phantoms.forEach(p => {
                const pWeight = Math.pow(p.warmth, 2) * 3.0;
                weightedNX += p.nx * pWeight;
                weightedNY += p.ny * pWeight;
                totalWeight += pWeight;
            });

            const targetNX = weightedNX / totalWeight;
            const targetNY = weightedNY / totalWeight;


            const targetGazeX = (targetNX - 0.5) * 40 * this.scale;
            const targetGazeY = (targetNY - 0.5) * 40 * this.scale;
            const shyOffsetX = smoothNoise(this.time * 0.5) * 8 * this.scale;

            this.gazeOffset.x = lerp(this.gazeOffset.x, targetGazeX + shyOffsetX, 0.03);
            this.gazeOffset.y = lerp(this.gazeOffset.y, targetGazeY, 0.03);
        } else {
            this.gazeOffset.x = lerp(this.gazeOffset.x, 0, 0.02);
            this.gazeOffset.y = lerp(this.gazeOffset.y, 0, 0.02);
        }
    }

    render() {
        const w = this.w;
        const h = this.h;
        const s = this.scale;

        const cx = w * 0.5;
        const cy = h * 0.5 + (40 * s); 

        const bgR = lerp(12, 22, this.presence);
        const bgG = lerp(10, 16, this.presence);
        const bgB = lerp(12, 15, this.presence);
        this.ctx.fillStyle = `rgb(${bgR}, ${bgG}, ${bgB})`;
        this.ctx.fillRect(0, 0, w, h);

        this.ctx.globalCompositeOperation = "screen";
        this.phantoms.forEach(p => {
            if (p.warmth > 0.05) {
                const px = p.nx * w;
                const py = p.ny * h;
                const radius = 250 * s;
                const echoGrad = this.ctx.createRadialGradient(px, py, 10 * s, px, py, radius);
                echoGrad.addColorStop(0, `rgba(40, 25, 25, ${p.warmth * 0.15})`);
                echoGrad.addColorStop(1, `rgba(0, 0, 0, 0)`);
                this.ctx.fillStyle = echoGrad;
                this.ctx.fillRect(0, 0, w, h);
            }
        });
        this.ctx.globalCompositeOperation = "source-over";

        const bgGrad = this.ctx.createRadialGradient(cx, cy, 100 * s, cx, cy, 600 * s);
        bgGrad.addColorStop(0, `rgba(0,0,0,0)`);
        bgGrad.addColorStop(1, `rgba(5, 4, 4, 0.9)`);
        this.ctx.fillStyle = bgGrad;
        this.ctx.fillRect(0, 0, w, h);


        this.motes.forEach(m => {
            m.update(this.time, 0.5, 0.5, this.phantoms, this.aspectRatio);
            m.draw(this.ctx, w, h, s, this.presence);
        });


        const breathAmp = lerp(7, 14, this.presence) * s;
        const breathY = Math.sin(this.breathPhase) * breathAmp;

        const geom = {
            headX: cx - (50 * s) + Math.cos(this.time * 0.1) * 4 * s,
            headY: cy - (40 * s) + breathY * 0.4,
            backY: cy - (60 * s) + breathY,
            earY: cy - (80 * s) + Math.sin(this.time * 0.2) * 3 * s + (1 - this.presence) * 12 * s,
            frontX: cx - (200 * s),
            tailX: cx + (250 * s),
            floorY: cy + (100 * s)
        };


        const shadowWidth = lerp(200, 350, this.presence) * s;
        const shadowGrad = this.ctx.createRadialGradient(cx, geom.floorY, 10 * s, cx, geom.floorY, shadowWidth);
        shadowGrad.addColorStop(0, `rgba(0,0,0,${lerp(0.4, 0.9, this.presence)})`);
        shadowGrad.addColorStop(1, `rgba(0,0,0,0)`);
        this.ctx.fillStyle = shadowGrad;
        this.ctx.fillRect(0, geom.floorY - 100 * s, w, 200 * s);


        const lR = lerp(100, 140, this.presence);
        const lG = lerp(85, 105, this.presence);
        const lB = lerp(95, 110, this.presence);

        const bodyGrad = this.ctx.createRadialGradient(geom.headX, geom.headY, 20 * s, geom.headX + 100 * s, geom.backY, 350 * s);
        bodyGrad.addColorStop(0, `rgb(${lR}, ${lG}, ${lB})`);
        bodyGrad.addColorStop(1, `rgb(${lR - 35}, ${lG - 25}, ${lB - 25})`);

        this.ctx.fillStyle = bodyGrad;
        this.ctx.beginPath();
        this.ctx.moveTo(geom.frontX, geom.floorY);
        this.ctx.quadraticCurveTo(geom.headX - 90 * s, geom.backY + 30 * s, geom.headX, geom.backY - 40 * s);
        this.ctx.quadraticCurveTo(cx + 100 * s, geom.backY - 100 * s, geom.tailX, geom.backY + 40 * s);
        this.ctx.quadraticCurveTo(geom.tailX + 50 * s, geom.floorY, cx + 50 * s, geom.floorY);
        this.ctx.fill();


        this.ctx.fillStyle = `rgb(${lR - 25}, ${lG - 20}, ${lB - 20})`;
        this.ctx.beginPath();
        this.ctx.moveTo(geom.headX + 10 * s, geom.headY - 60 * s);
        this.ctx.quadraticCurveTo(geom.headX - 70 * s, geom.earY - 10 * s, geom.headX - 90 * s, geom.earY + 50 * s);
        this.ctx.quadraticCurveTo(geom.headX - 50 * s, geom.headY + 40 * s, geom.headX - 10 * s, geom.headY - 10 * s);
        this.ctx.fill();


        const eyeX = geom.headX - 25 * s;
        const eyeY = geom.headY - 20 * s;

        this.ctx.strokeStyle = `rgb(${lR - 55}, ${lG - 45}, ${lB - 45})`;
        this.ctx.lineWidth = 3 * Math.max(0.5, s); 

        if (this.eyeOpenness < 0.02) {
            this.ctx.beginPath();
            this.ctx.moveTo(eyeX - 15 * s, eyeY);
            this.ctx.quadraticCurveTo(eyeX, eyeY + 8 * s, eyeX + 15 * s, eyeY + 2 * s);
            this.ctx.stroke();
        } else {
            const maxOpen = 7 * s;
            const eyeHeight = maxOpen * Math.min(1, this.eyeOpenness);

            this.ctx.fillStyle = `rgba(255, 235, 200, ${Math.min(1, this.eyeOpenness * 1.5)})`;
            this.ctx.beginPath();
            this.ctx.ellipse(eyeX, eyeY, 14 * s, eyeHeight, 0, 0, Math.PI * 2);
            this.ctx.fill();
            this.ctx.stroke();

            this.ctx.fillStyle = "#151010";
            this.ctx.beginPath();
            this.ctx.arc(eyeX + this.gazeOffset.x, eyeY + this.gazeOffset.y, 4 * s, 0, Math.PI * 2);
            this.ctx.fill();
        }
    }

    loop(currentTime) {
        const deltaTime = (currentTime - this.lastFrameTime) / 1000;
        this.lastFrameTime = currentTime;
        this.time += deltaTime;

        const idleDuration = (currentTime - this.lastInteractionTime) / 1000;

        this.updateCharacter(deltaTime, idleDuration);
        this.render();

        requestAnimationFrame(this.loop.bind(this));
    }
}

new LoomPresence();

How I Built It

The core of the project is written in plain JavaScript
Rendering is handled using the HTML5 Canvas API
For styling and layout CSS

Prize Category

Prize Category Submission

I am submitting this project for the Community Favorite category.

Loom is not designed to be impressive in a traditional sense. It does not aim to maximize engagement, performance, or utility. Instead, it focuses on creating a quiet, reflective experience that many people can relate to on a personal level.

The idea behind Loom comes from a shared feeling of being judged for moving slower, for hesitating, or for not constantly doing something productive. Rather than trying to fix that, Loom creates a space where those traits are accepted and even gently expressed through behavior.

Because of this, I believe it resonates more as a human experience than just a technical project. It is something people can sit with, observe, and interpret in their own way.

That is why I feel it fits best under the Community Favorite category.

Building a Modern School Website with Next.js & Sanity — DEV Weekend Challenge Submission

Kaushik Patil — Mon, 02 Mar 2026 06:47:21 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

This project is built for modern school communities — students, parents, and educators — who need a simple, friendly, and accessible digital presence.

Many small or upcoming schools don’t yet have a full digital ecosystem, so the goal was to create a ready-to-deploy school website template that showcases academic culture, builds trust with parents, and communicates essential information clearly.

It’s designed as a foundation starter that any school can quickly customize and launch.

What I Built

I built a modern school website that focuses on clarity, warmth, and community storytelling.

The platform includes:

1)A visually engaging landing page introducing the school’s vision

2)Structured sections for academics, activities, and student life

3)Contact page with map integration and clear communication channels

4)Clean navigation and responsive layout for all devices

5)Admissions MVP page to simulate real enrollment flow

6)Dynamic content fetched from a CMS (Sanity)

The project emphasizes UI/UX simplicity, performance, and a structure that can later scale into a full school management or CMS-driven platform.

Demo

🔗 Live Project: https://school-woad-nu.vercel.app/

Code

GitHub Repository:
https://github.com/revansh1710/school/tree/main/school

How I Built It

Frontend

Next.js for routing, SSR, and performance

Tailwind CSS for rapid and consistent UI styling

Content Layer (CMS)

Sanity powers all dynamic content

Structured schemas allow easy updates for:

Pages

Sections

Text content

Media assets

Real-time content updates without redeploying the app

Admissions MVP

The admissions page is designed as a minimum viable workflow that demonstrates how schools can begin digitizing their enrollment process.

It includes:

A structured form UI for student details

Clear call-to-action for parents

UX focused on simplicity and trust

Architecture ready to connect with a backend or database

This MVP validates the flow before implementing a full admissions management system.

Deployment

Deployed on Vercel with seamless CI/CD

Quantum Mechanics, Infinity, and the Thrilling Rewards of Lifelong Learning in Software Development

Kaushik Patil — Sun, 11 Jan 2026 10:28:25 +0000

In the ever-evolving world of software development, every new challenge feels like stepping into the unknown—a concept that resonates deeply with quantum mechanics. Just as physicists grapple with uncertainty to uncover universal truths, developers tackle complex problems to create something meaningful. Both fields demand an open mind, relentless curiosity, and a willingness to embrace uncertainty.

What makes this journey rewarding isn’t just the knowledge gained but the excitement of discovery and the joy of overcoming obstacles.

The Paradox of Learning: Struggle and Reward
Let’s face it: learning something new is rarely easy. Whether it’s picking up a new framework, debugging a stubborn piece of code, or understanding complex architecture, the process can be frustrating. You might spend hours on a single issue, only to realize the problem was a missing semicolon or a misconfigured dependency.

But here’s the magic: every struggle has a reward.

The aha moment when the solution clicks.

The satisfaction of seeing your code run flawlessly.

The confidence boost that comes from conquering what once seemed impossible.

Each challenge tackled adds a new layer to your skill set, much like peeling back the layers of the quantum world reveals profound truths about the universe.

Quantum Mechanics and the Infinite Potential of Learning
In quantum mechanics, the concept of infinity is ever-present. Whether it's the boundless states of a particle in superposition or the infinite dimensions of Hilbert space, possibilities are endless. Similarly, in software development, the more you learn, the more you realize there’s an infinite amount still to discover.

This can feel daunting, but it’s also exhilarating. Imagine the impact of knowing your learning journey has no limits. Every new tool, language, or concept you master opens doors to more innovation, creativity, and problem-solving.

Embracing Challenges: The Key to Growth
The most significant breakthroughs in software development come when we step out of our comfort zones. Here’s what I’ve learned through my journey:

Every challenge is an opportunity.

Struggling with a new concept? It’s an opportunity to grow. Working through a tough debugging session? That’s where the learning happens.

The process is just as rewarding as the result.

The rewards aren’t just tangible, like a successful project or a new job opportunity. They’re also intangible—the resilience, confidence, and problem-solving mindset you build along the way.

Uncertainty drives innovation.

Just as quantum mechanics thrives on uncertainty, so does software development. Uncertainty forces us to ask questions, explore alternatives, and create something new.

A Personal Story
I remember struggling with a particularly complex API integration during my recent full stack project. The documentation was sparse, the errors cryptic, and the deadline looming. I spent days researching, experimenting, and failing. But when I finally cracked it, the feeling was indescribable.

Not only did I gain a deep understanding of the API, but I also walked away with a newfound respect for perseverance and a sharper problem-solving mindset. That experience taught me that the most challenging moments often lead to the most rewarding outcomes.

The Never-Ending Journey
Software development, much like quantum mechanics, is an infinite journey. There will always be something new to learn, a problem to solve, or a challenge to overcome. And that’s what makes it so exciting. The rewards of this journey aren’t just in the knowledge gained but in the thrill of discovery, the joy of creation, and the endless possibilities that lie ahead.

So, to my fellow developers and lifelong learners: embrace the challenges. Dive into the unknown. The rewards—both tangible and intangible—are worth every bit of effort.

Final Thought
In the infinite landscape of software development, every bug fixed, every framework mastered, and every sleepless night debugging are steps toward something extraordinary: the joy of discovery and the promise of infinite growth.

AI: A Child in the Digital Age – Shaping Its Future with Data and Ethics.

Kaushik Patil — Sat, 10 Jan 2026 13:10:32 +0000

AI as a Child in Development, Learning from Data (Environment):

Just like a child’s early experiences shape their understanding of the world, AI is shaped by the data it's trained on. If the data is rich, diverse, and of high quality, the AI can learn valuable insights and make meaningful predictions.

On the other hand, if a child is exposed to negative influences, they might develop harmful behaviours. Similarly, if AI is trained on biased, incomplete, or harmful data, it can develop into a system that makes biased or unethical decisions.

Guidance and Supervision (Human Oversight):

Children need parents, teachers, and mentors to provide them with guidance, correct their mistakes, and show them what’s right and wrong. Likewise, AI needs ethical oversight, continuous monitoring, and correction from human developers and users.

Without proper guidance (i.e., good algorithm design, ethical considerations, diverse data), AI can easily go off course, just like a child might make poor decisions without supervision.

Potential for Growth:

With the right nurturing, education, and support, a child can grow into a well-rounded adult with skills, empathy, and moral integrity. AI, too, has the potential to improve over time, becoming more accurate, more useful, and even more empathetic (in a figurative sense) in fields like healthcare, customer service, or personalized learning.

However, just like children need time to mature, AI requires continuous learning and improvement. The development process involves trial and error, similar to how children learn through experience and feedback.

Negative Outcomes (A Bad Influence):

If AI is exposed to bad data—analogous to a child being exposed to a harmful environment—it can become a “bad example” in society. This happens when AI systems reinforce harmful stereotypes, make unfair decisions (such as biased hiring), or even cause harm by making erroneous conclusions in critical fields like medicine or law.

For example, if AI is trained using biased data in criminal justice systems, it might wrongly recommend harsher sentences for minority groups, perpetuating systemic inequality—just as a child might grow up adopting the negative behaviours of their surroundings.

Influence on Society:

Just as a grown person can have a positive or negative impact on society depending on their upbringing, education, and values, AI can either enhance or disrupt the world around us. If designed responsibly, AI can solve complex problems in areas like climate change, healthcare, and transportation.

But if AI isn’t properly guided, it could harm society by invading privacy, reinforcing discrimination, or spreading misinformation. Like a child growing up with bad influences, AI could become a “bad actor” in society, leading to unintended or dangerous consequences.

Data Quality is Critical:

Just as a child’s future depends on the knowledge and environment they are exposed to, AI's future depends on the quality and diversity of the data it is trained on. Good data leads to better AI systems; bad data can lead to poor and potentially harmful outcomes.

Ethical Development Matters:

Like a child learning right from wrong, AI needs ethical frameworks and governance to ensure it grows in a way that benefits society. Developers need to be mindful of biases, fairness, and transparency.

Continuous Learning and Adaptation:

Just as people never stop learning, AI models need to be continually updated, retrained, and monitored to stay relevant and ethical. This requires human supervision to ensure AI systems evolve positively over time.

Responsibility Lies with Us:

Parents are responsible for raising children, and similarly, AI developers and regulators are responsible for ensuring AI evolves into a positive force in the world. We must teach AI the right things, monitor its behaviour, and correct it when it goes astray.

Conclusion

With the right development, AI can indeed become a “great individual” that contributes positively to society, solving real-world problems and improving human life. But if we fail to develop AI responsibly, it could become a “bad example,” leading to bias, harm, and inequality just like a child raised in a toxic environment.

In the end, the onus is on us—the “guardians” of AI—to shape its growth, just as a child’s future is shaped by their caregivers. By ensuring AI is trained on diverse, unbiased data and governed by strong ethical principles, we can help AI become a powerful force for good in the world.

Cosmoscope – Exploring the Universe from Your Browser

Kaushik Patil — Mon, 29 Sep 2025 06:50:24 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Cosmoscope is an interactive space-themed web application that brings astronomy concepts to life.
I built it as a full-stack project with a focus on education, interactivity, and clean UI/UX.

Demo

Frontend URL:https://classy-buttercream-310228.netlify.app/
Github:https://github.com/revansh1710/k-2001

Cosmoscope is designed as a single-page dashboard with a space-inspired aesthetic.
It integrates data visualization, orbit simulation, astronomy APIs, and Strapi-powered content.

The project has two major parts:

Frontend: React + Vite + KendoReact UI + TailwindCSS

Backend: Strapi (deployed to Strapi Cloud) with PostgreSQL

Deployed on:

Frontend: Netlify

Backend: Strapi Cloud

KendoReact Components Used

TabStrip – main navigation between tabs (Orbits, Planets, NASA Photo, Quiz, ISRO, etc.)

TabStripTab – individual tab content holders inside TabStrip

AppBar – for the top header/navigation bar with branding and logout button

Card – used extensively for dashboard panels (controls panel, quick actions, selected planet info, etc.)

TileLayout – used for rearrangeable tiles in the sidebar (Mission panel, info, etc.)

ExpansionPanel – collapsible panel for extra information sections in sidebar

📊 Data Display

Grid – tabular display for Planets and (previously) Missions

GridColumn – defines each column in the Grid (planet name, radius, orbit, etc.)

GridNoRecords – displays a message when there’s no data or filtered list is empty

🖱 Inputs & Editors

DatePicker – to pick epoch date for orbit simulation

DropDownList – quick selection of planets in the sidebar

AutoComplete – search box for filtering planets

Slider – controls the orbit animation (playback slider)

ProgressBar – shows orbit simulation progress in percentage

MaskedTextBox – for coordinate input field

Button – Kendo-styled buttons used in dialogs and actions

✨ Key Features
🔑 User Authentication

Custom authentication system (not using Strapi’s default plugin).

Tokens stored securely in localStorage for API calls.

🪐 Dashboard with TabStrip Navigation

The dashboard is the heart of Cosmoscope. It uses a KendoReact TabStrip to organize content:

Orbits Tab

Orbit Visualization:
A custom SVG-based orbit map that animates planets around the sun.

Planet Data Grid:
A powerful KendoReact Grid showing:

name

radius_km

orbit_radius_km

gravity_m_s2

density_kg_m3

Bar Chart:
Uses recharts to visualize planet radii.

Interactive Controls:
Epoch date picker, slider to control orbit playback, quick planet search, and progress indicator.

Details Tab

Card-based gallery of all planets with descriptions.

NASA Photo Tab

Integrates NASA’s Astronomy Picture of the Day (APOD) API.

Fetches and displays the daily featured space image with explanation.

🖥️ Responsive & Polished UI/UX

A dark, nebula-inspired theme with starry backgrounds.

Clean panels, cards, sliders, and charts that feel “cosmic” yet remain functional.

Side controls panel with:

Orbit playback slider

Planet quick-select

Notification button

Progress indicator

Integrated logout button in the sticky top AppBar.

🔭 Tech Stack
Layer Technology
Frontend React (Vite), KendoReact, TailwindCSS, recharts
Backend Strapi (Cloud deployment), PostgreSQL
APIs NASA APOD
Auth Custom JWT-based auth stored in localStorage
Deployment Frontend: Netlify · Backend: Strapi Cloud
⚙️ Development Journey

✅ Set up custom register/login endpoints in Strapi.

✅ Implemented secure JWT auth and protected dashboard routes.

✅ Built animated orbit visualization with SVG and slider-controlled playback.

✅ Integrated KendoReact Grid for tabular planet data with sorting, paging, and search.

✅ Connected to NASA APOD for dynamic space imagery.

✅ Deployed Strapi to Strapi Cloud and frontend to Netlify.

Forem: Kaushik Patil

Turning Daily Habits into Magic: A Gemini-Powered Eco Dashboard for Kids

What I Built

Demo

Code

How I Built It

Prize Categories

I Built a Creature That Refuses to Do Anything… and It Made Me Rethink Everything

What I Built

Demo

Code

How I Built It

Prize Category

Prize Category Submission

Building a Modern School Website with Next.js & Sanity — DEV Weekend Challenge Submission

The Community

What I Built

Demo

Code

How I Built It

Quantum Mechanics, Infinity, and the Thrilling Rewards of Lifelong Learning in Software Development

AI: A Child in the Digital Age – Shaping Its Future with Data and Ethics.

Cosmoscope – Exploring the Universe from Your Browser

What I Built

Demo

KendoReact Components Used

[Optional: Code Smarter, Not Harder prize category] AI Coding Assistant Usage

[Optional: RAGs to Riches prize category] Nuclia Integration