DEV Community: Minoosh

My ChatGPT Year 2025

Minoosh — Tue, 23 Dec 2025 19:07:55 +0000

My ChatGPT Year 2025 looked like this: coffee, coding, sticky notes.

It was surprisingly accurate. Well.... not that hard to guess this. I work on projects almost every day. I code, I learn, I debug. I ask a lot of questions. ChatGPT has become part of my daily workflow, and honestly, a very good teacher.

Still, seeing such an accurate picture (with coffee and sticky notes!) made me pause.

If I’m predictable enough for an AI to describe my desk so well, it’s not because it’s watching me. It’s because patterns are easy to form when we repeat things every day. (At least I am happy that I have changed my habit of drinking coffee to other hot drinks recently and chatgpt does not know about it yet ... haha)

That brought back something I occasionally think about:
data and awareness.

I don’t find this scary, but I do think it’s important to stay conscious. I’ve always cared about understanding influence and manipulation. Sometimes that mindset makes me feel like I’m swimming against the river. But I prefer that to drifting without noticing.

AI is powerful and helpful. But awareness still matters.

For me, this is the kind of data I’m careful not to share with AI:
passwords, tokens, or access keys

financial information
exact location or daily routines
sensitive health or legal details (which I used to share! : / )
deeply personal vulnerabilities that could be misused

Some data is harmless. Some data deserves protection.
Using AI doesn’t mean turning off your thinking.
It means using it with intention.

A Small Trick for Smarter, More Reliable Inputs in React

Minoosh — Wed, 29 Oct 2025 23:43:19 +0000

Have you ever forgotten to add an id to an input and later realized your label doesn’t work? It’s a small mistake, but it breaks accessibility and can easily happen when you’re moving fast.
Here’s a quick way to make sure it never happens again.

export default function Input({ 
  label, 
  id, 
  name, 
  ...props 
}) {
  const inputId = id || name || label?.toLowerCase().replace(/\s+/g, '-');

  return (
    <div>
      {label && <label htmlFor={inputId}>{label}</label>}
      <input id={inputId} name={name} {...props} />
    </div>
  );
}

This line does the magic:

const inputId = id || name || label?.toLowerCase().replace(/\s+/g, '-');

It simply checks:
If an id exists, use it.
If not, use the name.
If neither exists, generate one from the label (e.g. "First Name" → "first-name").
So even if you forget the id, your input will still stay linked to its label... no broken accessibility, no silent bugs.
This pattern isn’t something all developers use, but it’s a clean habit that makes your components more reliable and professional. It’s small details like this that separate quick prototypes from solid, production-ready code.

How I Improved My Form Handling, Validation, and EmailJS in React

Minoosh — Wed, 22 Oct 2025 22:54:15 +0000

I’ve been working on my React project today and focused on handling forms properly. I combined React Hook Form, Zod validation, and EmailJS to create a real working contact form that actually sends emails.
If you’re a junior developer who’s trying to understand how all these pieces fit together, I hope this post helps you save a few hours of confusion

Step 1: Setting up React Hook Form + Zod
First, I installed the necessary libraries:

npm install react-hook-form zod @hookform/resolvers sonner

Then, I imported everything in my ContactForm.jsx file:

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { toast } from "sonner";

I created a simple validation schema using Zod:

const contactSchema = z.object({
  name: z.string().min(1, "Name is required").max(100),
  email: z.string().email("Invalid email").max(50),
  message: z.string().min(1, "Message is required").max(1000),
});

Zod lets you describe what valid data looks like in plain English, and React Hook Form handles the rest automatically.

Step 2: Building the form

export default function ContactForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(contactSchema),
  });

  const onSubmit = async (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
      <input
        type="text"
        {...register("name")}
        placeholder="Your name"
        className="border rounded p-2 w-full"
      />
      {errors.name && <p className="text-red-500">{errors.name.message}</p>}

      <input
        type="email"
        {...register("email")}
        placeholder="Your email"
        className="border rounded p-2 w-full"
      />
      {errors.email && <p className="text-red-500">{errors.email.message}</p>}

      <textarea
        {...register("message")}
        placeholder="Your message"
        className="border rounded p-2 w-full"
      />
      {errors.message && <p className="text-red-500">{errors.message.message}</p>}

      <button
        type="submit"
        disabled={isSubmitting}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        {isSubmitting ? "Sending..." : "Send"}
      </button>
    </form>
  );
}
export default function ContactForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(contactSchema),
  });

  const onSubmit = async (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
      <input
        type="text"
        {...register("name")}
        placeholder="Your name"
        className="border rounded p-2 w-full"
      />
      {errors.name && <p className="text-red-500">{errors.name.message}</p>}

      <input
        type="email"
        {...register("email")}
        placeholder="Your email"
        className="border rounded p-2 w-full"
      />
      {errors.email && <p className="text-red-500">{errors.email.message}</p>}

      <textarea
        {...register("message")}
        placeholder="Your message"
        className="border rounded p-2 w-full"
      />
      {errors.message && <p className="text-red-500">{errors.message.message}</p>}

      <button
        type="submit"
        disabled={isSubmitting}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        {isSubmitting ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

At this point, validation was already working. If I left any field empty or entered an invalid email, friendly red error messages appeared.

Step 3: Sending real emails with EmailJS

I created a free account on EmailJS, added my email template, and grabbed the following values from my dashboard:

Service ID
Template ID
Public Key

These are all safe to use in the frontend.

Then I installed the library:

npm install @emailjs/browser

And updated my onSubmit function:
import emailjs from "@emailjs/browser";

const onSubmit = async (data) => {
  try {
    const templateParams = {
      from_name: data.name,
      from_email: data.email,
      message: data.message,
    };

    await emailjs.send(
      "your_service_id",
      "your_template_id",
      templateParams,
      "your_public_key"
    );

    toast.success("Message sent successfully!");
    reset();
  } catch (error) {
    console.error("Error sending message:", error);
    toast.error("Failed to send message. Please try again later.");
  }
};

When I hit submit, I saw a toast saying "Message sent successfully!" and then I got the actual email in my inbox 🎉
That was a big confidence boost.

What I Learned Today

data only exists inside onSubmit. React Hook Form passes the form data there after validation.
Zod plus React Hook Form makes validation clean and readable.
EmailJS works safely from the frontend when using the public key.
Async/await plus try/catch make form submissions easy to handle.
Adding a loading state and toasts improves UX.

Final Thoughts

This was a big step toward writing more professional React code. Forms are no longer intimidating. Now I understand the flow:

User types → Validation → onSubmit → EmailJS → Success toast → Reset form.

That’s a simple but powerful pattern that I’ll reuse again and again.
If you’re just starting with React forms, play around, log your data, and celebrate small wins. They add up fast.

✍️ I’m a self-taught front-end developer learning React and sharing my journey. If you’ve gone through something similar, I’d love to hear about it in the comments!

🌍 My Journey with React Leaflet: Learning to Build an Interactive Map

Minoosh — Thu, 09 Oct 2025 04:31:02 +0000

Recently, I started learning how to make an interactive map for a web app I am working on, using React Leaflet.
The idea is to let users click anywhere on the map to add a marker. Later, they’ll be able to write a title, a description, and even add a photo for that spot.
In the future, each spot will be reviewed by an admin before it shows up on the map.

🧩 What I Have Done So Far

I created a React map using MapContainer, TileLayer, and Marker_added Popup and useMapEvents later on_.
The map displays the location of a city, when I type a city name, it finds its coordinates using OpenStreetMap’s Nominatim API.

💻 My Coding Challenges
I faced many small but confusing problems while building this project.

At first, I didn’t really understand how this useMapEvents:

function AddMarkerOnClick() {
    useMapEvents({
      click(e) {
        const { lat, lng } = e.latlng;
        setMarkers((prev) => [...prev, { lat, lng }]);
        setLastMarker({ lat, lng });
        setShowModal(true);
      },
    });
    return null;
  }

I couldn’t figure out why the click was written inside an object, or how React Leaflet knew what it meant. But then I learned that this object simply tells the map what actions to listen for. The click event is already built into the map library. Once I realized that, it all made sense.

Now, whenever I click on the map, a marker appears exactly where I clicked.
It feels great to see it working — even though it’s simple, it’s a huge step forward!

🧠 Working on the Modal

Next, I started building a modal that opens when a user adds a marker. Inside the modal, users can type the title and description for that place.
The tricky part was making sure that when the modal opens, the rest of the page becomes inactive and that my close button doesn’t disappear behind the overlay.

It took me a while to understand how positioning and z-index work together, but I finally got it right. Now, the modal appears on top of everything, and the background stays dimmed and unclickable.

🌱 What I Learned

Even though these might sound like small technical details, each one helped me understand how React components, Tailwind styling, and CSS positioning actually work together.

Every small “why doesn’t this work?” moment is actually a step toward becoming a better developer. Today once again I felt I really enjoy this journey.

Today I Learned: Layouts and the Z-Index Trap in React

Minoosh — Thu, 18 Sep 2025 00:32:57 +0000

Sometimes, what seems “simple” in front-end development can surprise you in the best way — a little challenge, a little learning. Today, I ran into a couple of tricky issues while building my React app with a sticky Navbar and shared Layout. Here’s what happened and what I learned.

Layouts make life way easier

I wanted my Navbar and Footer to show up on every page without having to copy them into every component. That’s where a Layout component really saved me.

export default function Layout({ children }) {
  return (
    <div className="font-sans">
      <Navbar />     {/* stays the same across pages */}
      {children}     {/* page-specific content */}
      <Footer />     {/* stays the same across pages */}
    </div>
  );
}

Then, for each page route, I just wrapped it in the Layout:

<Route path="/team" element={<Layout><Team /></Layout>} />

✅ The best part? I don’t have to copy <Navbar /> or <Footer /> everywhere. Any update I make to them automatically shows up on all pages — clean, efficient, and it feels so good seeing it just work.

2.The z-index surprise

Even with the Layout set up, I noticed a small hiccup: my Navbar wasn’t clickable in some areas.
I had this CSS:

<section className="absolute top-0 left-0 w-full z-10">...</section>

I thought, “z-10? That should put me on top of everything!” — not quite. But it was actually a great little puzzle.
Here’s why:
z-index only works within the same stacking context.
If a parent or sibling element has position set and a higher z-index, it can cover your Navbar, even if your Navbar has z-10.
Transparent elements can also block clicks if they’re sitting above your Navbar.
How I fixed it:
Made sure no parent element created a higher stacking context.
Bumped the Navbar z-index up:
z-[9999]
Adjusted parent elements so the stacking order made sense.
✅ After that, my Navbar links were fully clickable, and the Layout worked perfectly — such a satisfying little win!

*** Lessons Learned ***

Layout components are a total lifesaver — putting shared stuff like Navbar/Footer in one place makes your life so much easier.
z-index doesn’t automatically put you on top — understanding stacking contexts and parent/sibling elements is key.
Even invisible or transparent elements can block clicks — good reminder to always check the layering.
💡 Small CSS hiccups can be tricky, but each one is a chance to learn and improve. Today reminded me that debugging UI is just as rewarding as writing the code itself — and seeing it all work perfectly at the end is the best feeling!

Solved: Why Tailwind CSS Wasn't Working with My Vite React App

Minoosh — Wed, 17 Sep 2025 18:20:05 +0000

Hey fellow developers! 👋

Just solved a classic frontend setup puzzle and thought I'd share in case anyone else is wrestling with the same issue.

I was setting up Tailwind CSS in a React + Vite project and hit that frustrating wall where the styles just wouldn't apply. You know the feeling - you've followed the docs, everything looks right, but that beautiful blue bg-blue-500 just renders as plain white?

Turns out I'd missed three crucial things:

The content array in tailwind.config.js was empty (facepalm moment) - Tailwind needs to know which files to scan for class names!
PostCSS configuration - Vite uses it automatically but needs that postcss.config.js file to play nice with Tailwind
Import order matters - Those @tailwind directives need to be in your main CSS file (index.css, not App.css)
The fix was simple once I stepped back and checked the fundamentals:

Proper content paths: ["./index.html", "./src/*/.{js,ts,jsx,tsx}"]
Complete PostCSS setup with tailwindcss and autoprefixer
And of course, the classic "have you tried turning it off and on again?" (restarting the dev server)
Sometimes it's the obvious things that trip us up! What's your most recent "aha!" moment with CSS tooling?

🧹 Cleaning Git History & Repo Setup: My Dev Struggles Today

Minoosh — Wed, 10 Sep 2025 21:36:52 +0000

Today I thought I’d have a smooth coding day, but instead, I spent hours wrestling with Git and GitHub 😅.
After fixing my secret-handling yesterday, I tried to push my project again and ran into new challenges.

The Problems:

Old commits still had my token: Even though I removed it locally, it was still in the history. GitHub push protection wasn’t letting me push until it was completely gone.
Git history cleanup: I had to use git filter-repo to actually remove the file from all previous commits. That felt scary because it rewrites history.
Two project folders: To stay safe, I worked in a cloned folder called chef-ai-clean. But then I had both chef-ai and chef-ai-clean on my computer and kept confusing which one was the “real” project.
Remote issues: I deleted the old repo on GitHub and created a new one. That meant I had to re-add the remote and figure out why my first push was failing.
What I Learned
git filter-repo is the right way to clean secrets from history (not just deleting the line).
Fresh clones are safer when rewriting history.
Renaming folders is fine. I just moved the old one aside and renamed chef-ai-clean back to chef-ai.
The first push needs:
git push -u origin main
The -u is important because it sets the tracking branch, so afterwards I can just run git push.

The Win:

After a lot of trial and error, I finally have:
A clean repo on GitHub
Secrets safely ignored by Git
A local folder with the right name (chef-ai)

Chef-ai-project: Keeping API Tokens Safe in React

Minoosh — Wed, 10 Sep 2025 04:20:56 +0000

Today I ran into a small but important problem in my React project. I’m building an app where you enter a list of ingredients, and an AI (Mistral) suggests a recipe.
At first, I just hardcoded my Hugging Face API token in ai.js like this:
const hf = new HfInference("MY_TOKEN_HERE");
It worked locally… but GitHub blocked my push 😅. Apparently, secret scanning doesn’t like exposed tokens.
What I Did
Environment variables
I created a .env file:
VITE_HF_API_KEY=your_huggingface_token_here
and added it to .gitignore. Now the token is private and safe.
Using it in Vite/React
const hf = new HfInference(import.meta.env.VITE_HF_API_KEY);
Calling the AI safely
I made an async function to get recipes and added error handling:
export async function getRecipeFromMistral(ingredientsArr) {
// join ingredients, call AI, return recipe
}
Takeaway
Even small projects are a great way to practice security and good habits. I learned that environment variables + .gitignore keep secrets safe while letting the app work normally.
Little wins like this make me feel more confident as a developer 😄.

Building My First React Portfolio: Challenges, Learning, and Growth

Minoosh — Sun, 31 Aug 2025 06:00:19 +0000

Recently, I started working on my portfolio website with React and Tailwind. I wanted it to have a minimal black and white theme with some subtle animations to keep it clean but not boring. It’s still in progress, but it already feels rewarding to see it come together.
Lately, I’ve run into some more complex challenges while building it. Learning when to break things into smaller components, and how to pass props cleanly without overcomplicating state, has been a big part of my growth.
One tricky area has been handling responsiveness and layout across different screen sizes. Tailwind makes a lot of it easier, but I’ve realized that once animations and layouts get more custom, keeping everything consistent across breakpoints takes extra care.
I’ve also gained a much better understanding of how hooks and props work. Form handling, for example, was a challenge at first. I spent around 4 hours setting up a third-party email handling service, but I finally got it working and can now successfully receive messages in my inbox. And of course, there are always bugs here and there.
Even though these issues slowed me down, I’ve noticed that each time I push through, I come out with a clearer understanding of React’s patterns and how to balance good design with clean code.
I’m getting more and more interested in React, and I’m already thinking about tackling a more complex project once I finish my website.

3 Weeks into React – Still Excited!

Minoosh — Wed, 30 Jul 2025 16:31:00 +0000

Hey everyone! Just wanted to share a quick update — I started learning React about 3 weeks ago, and I’m still super excited about it. 🎉

It’s been a mix of fun, confusion, and those little “aha!” moments that keep me going. There's so much to learn, but every day I feel like I’m getting just a bit better.

Right now, I’m working on a project called Chef Claude — it’s helping me understand React in a hands-on way

If you’re also learning React or remember what it was like in the beginning, feel free to say hi or share your tips. 😊

Thanks for reading!

The Power of Reaching Out: A Coffee Chat That Reignited My Motivation

Minoosh — Tue, 15 Jul 2025 17:27:04 +0000

A few days ago, I was thinking about how to expand my network and connect with people in the tech industry. That’s when I remembered an old friend I hadn't seen in almost two years. He works in IT at a university here in Vancouver. I reached out, and to my delight, we met up yesterday.

What followed was an incredibly insightful and encouraging conversation.

He generously shared his journey with me—how he navigated his path, the unexpected opportunities he found, and the mindset shifts that helped him grow. One key takeaway was how valuable short certificates can be when paired with focused goals. He also reminded me not to limit my job search to traditional tech companies—there are many organizations out there with tech roles that fly under the radar.

We also talked about volunteering as a way to build experience and connections, the importance of tailoring your resume for every role, and staying consistent with applications. One piece of practical advice stood out: don't waste time applying to job postings that are more than a couple of days old—by then, they might already be gone.

I left our conversation with a spark of energy and a fresh sense of direction. I know I still have a long road ahead of me—so much to learn, so much to build—but I’m genuinely excited about it all.

Sometimes, all it takes is a simple coffee chat with someone you trust to reframe your perspective.

My Latest Frontend Project: A Budget Tracker App!

Minoosh — Thu, 10 Jul 2025 22:21:01 +0000

Hey everyone! 👋

I wanted to share a quick update on my frontend development journey. I’ve been learning JavaScript, HTML, and CSS for a while now, and recently I completed a small but meaningful project — a Budget Tracker App

Why I Built It

I wanted to challenge myself with something more practical — a project that deals with data, categories, and monthly summaries, without making things overly complicated. It also gave me a great opportunity to dive deeper into:

Functional programming _ keeping the code clean
keeping the logic and the UI separate
DOM manipulation
Problem-solving with real-world logic

What the App Does

The Budget Tracker App allows users to:

Add monthly expenses (with category and amount)
Edit or delete any expense
View a summary of expenses per category
See the total expense for the current month

What I Learned

This project helped me:

Understand the value of structuring code
Practice updating the UI based on data changes
Break down complex problems into smaller, manageable tasks
Improve my debugging and testing workflow

You will find the project here in my GitHub:
https://github.com/MinooshVejdani/budget-tracker

🌱 What’s Next?

I’m just getting started with React, and I’m excited to rebuild this app using React components. This will help me see the contrast between vanilla JS and modern frameworks — and sharpen my skills even more.
Thanks for reading! I’m loving the learning journey so far. If you’ve worked on similar projects or have feedback, I’d love to connect!

Happy coding! 👩‍💻✨