DEV Community: Hari Lamichhane

What do you think of this?

Hari Lamichhane — Mon, 23 Jun 2025 04:34:19 +0000

Hey guys,

I wanted to share an open-source chat app that we built last week as part of the T3 Clone Competition. It’s a minimal AI chat app inspired by t3.chat, with most of the core features replicated:

Google + Anonymous auth with chat linking
Multi-model support (OpenAI, OpenRouter)
Real-time updates with Convex
File uploads (PDF, image, text)
Chat branching and shareable threads
Syntax highlighting, markdown support
Bring-your-own-key support (keys never touch the server)

The branching + share feature was the trickiest—it required snapshotting and spinning up isolated threads when someone replied to a shared chat.

You can try it live at 👉 https://ch4t.codse.com
And the source code is open at 👉 https://github.com/codse/chat

Not perfect (still missing image generation and smoother streaming), but it was a fun deep dive into real-time UX.

What do you think? What would you improve or build next?

What do you think of this?

Hari Lamichhane — Mon, 23 Jun 2025 04:34:19 +0000

Hey guys,

I wanted to share an open-source chat app that we built last week as part of the T3 Clone Competition. It’s a minimal AI chat app inspired by t3.chat, with most of the core features replicated:

Google + Anonymous auth with chat linking
Multi-model support (OpenAI, OpenRouter)
Real-time updates with Convex
File uploads (PDF, image, text)
Chat branching and shareable threads
Syntax highlighting, markdown support
Bring-your-own-key support (keys never touch the server)

The branching + share feature was the trickiest—it required snapshotting and spinning up isolated threads when someone replied to a shared chat.

You can try it live at 👉 https://ch4t.codse.com
And the source code is open at 👉 https://github.com/codse/chat

Not perfect (still missing image generation and smoother streaming), but it was a fun deep dive into real-time UX.

What do you think? What would you improve or build next?

I’d really appreciate it if you took a moment to give it a ⭐ on GitHub!

10 Common React Mistakes New Developers Make (and How to Fix Them)

Hari Lamichhane — Thu, 05 Jun 2025 10:16:17 +0000

Hey React developers,

After working with dozens of developers and reviewing lots of React code, I’ve noticed a pattern. Many developers write code that works fine during development but leads to subtle bugs and frustrating user experiences in production.

These issues often show up when real users interact with the app, leading to bounce rates, lost user trust, or even lost revenue.

In this post, I’ll break down 10 common mistakes I see (and have made myself), plus practical ways to fix them. The goal: move from "it works on my machine" to "this feels great for everyone."

1. Not Using URL Query Parameters

The Mistake:

const [search, setSearch] = useState('');

State is stored in memory only.

Why It’s a Problem:

Refreshing the page resets filters.
You can’t share a filtered view.
The URL doesn’t reflect the UI state.

How to Fix It:

Use useSearchParams for simple cases:

const [searchParams, setSearchParams] = useSearchParams();
const search = searchParams.get('q') || '';

Use nuqs + zod for validated, typed state:

import { useQueryState } from 'nuqs';
import { z } from 'zod';

const { q, setQuery } = useQueryState({ q: z.string().optional() });

const handleSearch = (value) => {
  setQuery({ q: value });
};

Browsers treat URLs as the source of truth, so should your UI.

2. Avoiding the `<form>` Element

The Mistake:

Using divs and onClick handlers instead of native <form> behavior.

Why It’s a Problem:

Enter key doesn’t work.
Screen readers miss semantic context.
Browser validations are skipped.

How to Fix It:

<form onSubmit={(e) => {
  e.preventDefault();
  handleSubmit();
}}>
  <label htmlFor="name">Name:</label>
  <input id="name" type="text" required />
  <button type="submit">Submit</button>
</form>

Libraries like react-hook-form still rely on <form>.

3. Too Many Independent `useState` Calls

The Mistake:

const [name, setName] = useState('');
const [email, setEmail] = useState('');

Why It’s a Problem:

It becomes hard to manage and update as the form grows.

How to Fix It:

Use an object:

const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) => {
  setForm(prev => ({ ...prev, [field]: value }));
};

Or use useReducer for complex cases:

const initialState = { name: '', email: '' };
function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    default:
      return state;
  }
}
const [form, dispatch] = useReducer(reducer, initialState);

4. Not Using Derived State

The Mistake:

const [birthDate, setBirthDate] = useState('');
const [age, setAge] = useState(calculateAge(birthDate));

Why It’s a Problem:

Duplicated state leads to stale or incorrect values.

How to Fix It:

const age = calculateAge(birthDate);

Use useMemo only for expensive calculations:

const sortedItems = useMemo(() => {
  return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

5. Misusing `useMemo`

The Mistake:

const memoized = useMemo(() => doSomething(input), [valueThatChangesOnEveryRender]);

Why It’s a Problem:

It runs on every render; this is pointless.

How to Fix It:

Only use useMemo when:

The computation is expensive.
Dependencies are stable.

const expensiveResult = useMemo(() => computeExpensiveValue(data), [data]);

6. No Loading, Error, or Empty States

The Mistake:

const { data } = useQuery(...);
return <List items={data} />;

Why It’s a Problem:

No feedback while loading.
Users see blank screens on failure.
SEO crawlers might index empty pages.

How to Fix It:

const { data, isLoading, isError, error } = useQuery(...);
if (isLoading) return <SkeletonList />;
if (isError) return <p>Error: {error.message}</p>;
if (!data?.length) return <p>No items found.</p>;
return <List items={data} />;

Use @tanstack/react-query to simplify handling these states.

7. Ignoring Accessibility

The Mistake:

Using <div> instead of <button>, skipping label, or forgetting alt text.

Why It’s a Problem:

Breaks keyboard navigation.
Screen readers can’t interpret the UI.

How to Fix It:

<label htmlFor="username">Username:</label>
<input id="username" type="text" />

<button aria-expanded={isOpen} onClick={toggle}>Toggle</button>

Add alt text to images. Test with your keyboard. Use eslint-plugin-jsx-a11y or axe.

8. Input Without Debounce

The Mistake:

<input value={query} onChange={e => setQuery(e.target.value)} />

Why It’s a Problem:

Triggers expensive updates on every keystroke.

How to Fix It:

Use a debounce hook:

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

Or use useDeferredValue (React 18+) for smoother UI transitions.

9. Multi-Step Forms That Reset on Navigation

The Mistake:

Each step owns its own state.

Why It’s a Problem:

Going back resets user input.

How to Fix It:

Store state at the parent level:

const [formState, setFormState] = useState({ name: '', email: '' });

Pass props into each step. For large apps, use react-hook-form or zustand to manage form state.

10. No Skeletons or Placeholders

The Mistake:

return isLoading ? null : <ActualList items={data} />;

Why It’s a Problem:

Blank screen. Confusing for users. Bad perceived performance.

How to Fix It:

function SkeletonList() {
  return (
    <div>
      {[...Array(3)].map((_, i) => (
        <div key={i} style={{ height: '50px', background: '#e0e0e0', marginBottom: '8px' }} />
      ))}
    </div>
  );
}

Skeletons provide users with feedback and reduce layout shifts.

Tools That Solve Most of These

Start with React’s built-in hooks for small projects. For larger apps, reach for:

@tanstack/react-query — handles fetching, caching, and background syncing.
nuqs + zod — URL query param parsing and validation.
zod / yup — validation schemas for user input.
react-hook-form — performant, scalable form handling.
zustand / valtio / jotai — global state without boilerplate.
eslint-plugin-react-hooks / jsx-a11y — catch common bugs early.

Final Thoughts

Poor UX often begins with minor oversights in code. These mistakes might not show up in local dev, but they frustrate real users. Write code that survives refreshes, plays nice with URLs, and shows empathy for edge cases.

None of this is about being perfect. It’s about being thoughtful.

I’ve also made these mistakes. That’s how I learned.

What about you? Which of these have you made? Share your story or question, I’d love to hear from you.

Make Your App Feel Better: 10 UI Tips for Beginner/Mid-Level Developers

Hari Lamichhane — Mon, 23 Sep 2024 18:07:16 +0000

Hey, devs! 👋

As a beginner or mid-level developer, you've probably focused a lot on making your app functional. But have you considered how it feels to use? In this post, we'll explore 9 often-overlooked aspects of UI design that can significantly improve your app's user experience.

Note: The examples use ReactJS and TailwindCSS for example but these principles can be applied anywhere.

1. Mind Your Margins and Padding

Uneven margins and padding are a dead giveaway that someone’s still getting the hang of design. Consistent spacing makes everything look cleaner and more professional.

Quick Fix:

Stick to multiples of 4 for margins and padding (think 4px, 8px, 12px, 16px). It gives your layout a nice rhythm and looks way more polished.



.container {
  padding: 16px;
}

.button {
  padding: 8px 12px;
}

You don’t need to reinvent the wheel—just keep things even, and it’ll instantly look better.

2. Handle Empty States Like a Boss

Ever opened an app and been met with a blank screen? Yeah, that’s what happens when devs forget to design for the empty state. When there’s no data to show, don’t leave users hanging.

Pro Tip:

Add helpful messages or call-to-action (CTA) buttons to guide users on what to do next.



function TodoList({ todos }) {
  if (todos.length === 0) {
    return (
      <div className="flex h-44 flex-col items-center justify-center rounded border bg-white shadow-sm">
        <p className="mb-2 text-gray-600">Nothing here yet! Why not add your first task?</p>
        <Button className="mt-2 bg-green-500 hover:bg-green-600">
          <Plus className="mr-2 h-4 w-4" />
          Add Todo
        </Button>
      </div>
    );
  }

  // Render todo list
}

Turn an empty screen into an opportunity to engage your users!

3. Always Show Loading States

If your app is doing something in the background, let your users know. Nothing is worse than wondering if a button click even worked or if the app crashed.

Pro Tip:

Use a delayed loading spinner for quick operations, so it doesn’t flash too quickly. Here’s a little trick to add a delay:



function useDelayedLoading(isLoading, delay = 200) {
  const [showLoading, setShowLoading] = useState(false);

  useEffect(() => {
    if (isLoading) {
      const timer = setTimeout(() => setShowLoading(true), delay);
      return () => clearTimeout(timer);
    }
    setShowLoading(false);
  }, [isLoading, delay]);

  return showLoading;
}

// Usage
const showLoading = useDelayedLoading(isLoading);

That way, users don’t see the spinner for super quick tasks, but they’ll get feedback when it’s needed.

4. Keep a Clear Visual Hierarchy

Not everything on your screen has the same importance, right? Make sure your UI reflects that. Use different font sizes, colors, and weights to guide users through the content.

Pro Tip:

Stick to 2-3 font sizes for your main content, and use color sparingly to emphasize key points.



.primary-text {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.secondary-text {
  font-size: 16px;
  color: #666;
}

.tertiary-text {
  font-size: 14px;
  color: #999;
}

Don’t overcomplicate things—just make sure the user knows what’s important at first glance.

5. Embrace Whitespace, Don’t Fear It

You don’t have to fill every inch of the screen with something. Whitespace (aka negative space) is your friend! It helps your app breathe and makes it easier for users to focus.

Pro Tip:

Increase space between unrelated elements and decrease it between related ones. It’s all about balance.



.section {
  margin-bottom: 32px; /* Big gap between sections */
}

.section-title {
  margin-bottom: 16px; /* Smaller gap within a section */
}

.list-item {
  margin-bottom: 8px; /* Tight gap between list items */
}

Whitespace isn’t wasted space—it’s part of the design!

6. Handle Errors Gracefully

No one likes errors, but they happen. When they do, be helpful. Instead of just saying “Error 404,” give the user context and offer ways to fix it or try again.

Pro Tip:

Make your error messages friendly, clear, and actionable.



function ErrorMessage() {
  return (
    <div className="rounded border bg-neutral-10 p-6">
      <h3 className="text-neutral-8900 mb-2 text-xl font-bold">Oops! Page Not Found</h3>
      <p className="mb-4 text-neutral-700">
        We couldn&apos;t find the page you&apos;re looking for.
      </p>
      <div className="flex flex-row-reverse justify-start gap-2">
        <Button className="rounded" variant="default">
          Retry
        </Button>
        <Button className="rounded" variant="ghost">
          <ArrowLeft className="mr-2 h-4 w-4" />
          Go Back
        </Button>
      </div>
    </div>
  );
}

Help users feel like they’re not stuck when things go wrong.

7. Add Tooltips for Long Text & Disabled States

Ever tried to read something in an app that was cut off or tried to interact with a disabled button, only to be left guessing why? This can be frustrating for users, and it’s easily avoidable. Add tooltips (title attribute) to long text or for disabled elements to provide more context.

Pro Tip:

When text is truncated or a button is disabled, a tooltip can offer users additional information, like what the full text is or why the button is inactive. This keeps the experience smooth and informative.



// Long text tooltip example
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild>
        <p
          className="w-48 truncate"
          title="This is a very long text that gets cut off but has a helpful tooltip"
        >
          This is a very long text that gets cut off but has a helpful tooltip
        </p>
      </TooltipTrigger>
      <TooltipContent>
        <p>This is a very long text that gets cut off but has a helpful tooltip</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
// Disabled button tooltip example
<button disabled title="You need to complete the form before submitting">
  Submit
</button>

Adding these tooltips makes your app feel more thoughtful and polished. Small touches like this show you care about the user’s experience.

8. Use Contextual Colors for Feedback

Colors play a crucial role in guiding users through your app. Using the right color for the right situation makes the interface more intuitive and easier to understand. For example, reddish tones for errors, greenish for success, yellowish for warnings, and blueish for informational messages.

Pro Tip:

Stick to established color conventions to avoid confusing your users. Most people recognize red as an error or danger indicator and green as a success marker, so leverage that!



// Example of contextual colors in action
              <div className="flex items-center rounded-md border border-red-200 bg-red-100/75 p-3">
                <AlertCircle className="mr-2 text-red-700" />
                <p className="text-red-800">Error: Something went wrong!</p>
              </div>
              <div className="flex items-center rounded-md border border-green-400 bg-green-100/75 p-3">
                <CheckCircle className="mr-2 text-green-700" />
                <p className="text-green-800">Success: Operation completed!</p>
              </div>

By following these color conventions, you make it much easier for users to quickly understand what's happening in your app without over-explaining.

This small detail not only helps in making your UI more intuitive but also enhances the visual hierarchy by linking colors with actions and outcomes.

9. Icons Should Enhance, Not Distract

Don’t overload your UI with icons for the sake of it. Every icon should have a clear purpose and enhance the user experience.

Pro Tip:

Keep icons simple, and recognizable, and ensure they match the action they represent.



<Icon name="trash" onClick={deleteItem} />
<Icon name="edit" onClick={editItem} />

Use icons to clarify actions, not clutter your UI.

10. Don’t Reinvent the Wheel — Use Solid UI Libraries

It’s easy to fall into the trap of thinking you have to code everything from scratch. But guess what? You don’t! There are fantastic UI libraries out there like Ant Design, Shadcn UI, Material UI, and Chakra UI that can save you a ton of time and effort. These libraries provide well-tested, accessible, and consistent components, so you can focus on what makes your app unique instead of redoing the basics.

Pro Tip:

If you’re trying to move fast or you’re working on a project with tight deadlines, leverage these libraries. But if you’re building something purely for learning, feel free to dive into the details and build your own components.



import { Button } from 'antd';

function MyApp() {
  return <Button type="primary">Click Me</Button>;
}

Using these libraries helps ensure that your app looks polished, functions well, and remains consistent, all while saving you time. You can always customize things later, but starting with a solid foundation helps you move faster.

No need to code a button from scratch when there’s already a beautifully styled, responsive one you can drop right in!

Conclusion

The key to a great UI is attention to detail. These small tweaks—consistent spacing, clear hierarchy, thoughtful empty/loading/error states, and balanced use of whitespace—make a world of difference. Whether you’re working on your first app or your 50th, take the time to polish these areas, and your users will thank you.

Got any thoughts or questions? Let me know, I’m happy to expand on these topics or chat more. Happy coding, and may your apps always feel amazing! ✨

Dear developers ...

Hari Lamichhane — Sun, 11 Aug 2024 15:14:51 +0000

Dear developers,

After 10 years in the software development world, I’ve learned a thing or two—some the hard way. I’m here to share those lessons with you so you can avoid the mistakes I made and make the most of your journey.

Before we dive in, a quick note: everything I’m sharing here comes from my own experiences and views after 10 years in the software world. This isn’t advice set, in stone—just what’s worked (or not worked) for me. Take what resonates, and feel free to leave the rest. Everyone’s journey is different!

Who Am I?

I'm a software engineer with almost a decade of experience under my belt. Over the years, I’ve had the pleasure (and sometimes the challenge) of working with hundreds of developers and clients. My expertise? Full-stack development, with a special love for ReactJS, and Laravel, and creating seamless experiences on both web and React Native.

Work: DOs and DON'Ts

DO: Apply for Jobs That Excite You

Don’t hesitate to go after that job you’re eyeing, but make sure you’re qualified for it. Chasing roles you’re not ready for can lead to frustration. Instead, focus on roles where you can grow and contribute meaningfully.

DO: Improve Your Skills

Always be learning. The tech world is constantly evolving, and so should you. Don’t be afraid to ask for help—everyone’s learning. Remember, even the most seasoned developers don’t have all the answers.

DO: Give Your Best in Every Project

Whether it’s a big project or a small task, put your best foot forward. But also, don’t be afraid to fail. Failure is a part of growth, and each mistake is a lesson in disguise.

DON'T: Overthink—Start Doing

Analysis paralysis is real. Sometimes, the best way to learn is by doing. Stop overthinking and start coding. You’ll be surprised at how much you can achieve.

DO: Find Mentors

This is something I wish I’d done sooner. Find mentors who can guide you, offer feedback, and help you navigate your career. Learn from their experiences and mistakes.

DO: Set Boundaries

Especially if you’re working from home, make sure you have clear boundaries between work and personal life. Burnout is real, and setting boundaries is key to avoiding it.

DO: Understand the Project Before Starting

Before you dive into a project, make sure you fully understand the requirements. Misunderstandings can lead to wasted time and effort. Clarify expectations and deliver on them.

DO: Provide Value

You’re part of a team, and your insights are valuable. Share what you know, help your colleagues, and contribute to the company’s success. Collaboration is key.

Personal: DOs and DON'Ts

DO: Share Your Work Online

Start sharing your projects and achievements on social media. But remember to check with your client or company if the work can be publicly shared. It’s a great way to build your personal brand.

DO: Connect with Others

Networking isn’t just for salespeople. Connect with peers, share your work, give feedback, and engage with the community. The more you interact, the more you grow.

DON'T: Ignore Self-Promotion

Self-promotion might feel awkward at first, but it’s an essential skill. Learn how to showcase your work and achievements without being boastful.

DO: Journal Regularly

Keeping a journal can be a powerful tool for reflection and growth. Write down your thoughts, lessons learned, and goals. It’s amazing how much you can learn about yourself.

DO: Understand Your Finances

Tech salaries can be lucrative, but it’s easy to lose track of spending. Make sure you understand your finances and stick to a budget. Financial stability is crucial for peace of mind.

Health & Fitness: DOs and DON'Ts

DO: Prioritize Your Health

Make time to work out and take care of your body. Sitting in front of a computer all day isn’t exactly great for your health, so get moving!

DO: Raise Concerns

If something doesn’t feel right, speak up. Whether it’s work-related stress or physical discomfort, don’t ignore it. Your health should always come first.

DON'T: Rely on Caffeine

Caffeine might be a developer’s best friend, but too much of it isn’t great for you. Instead of energy drinks, try water or electrolyte drinks to stay hydrated and focused.

DON'T: Overuse Headphones

I love my headphones as much as the next developer, but be mindful of the volume. Prolonged use at high volumes can damage your hearing.

DO: Get a Smartwatch

A smartwatch that tracks your activity can be a great motivator. It doesn’t have to be fancy or expensive—just something to remind you to move and stay active.

DO: Get Ergonomic Accessories

Invest in a good ergonomic mouse and chair. They don’t have to be expensive, but they should be functional and comfortable. Your body will thank you in the long run!

DO: Understand You’re on Your Own Timeline

Don’t compare yourself to others. Everyone’s journey is different. Focus on giving your best and continuously improving. Comparison can be harmful, so just keep moving forward at your own pace.

Freelancing: DOs and DON'Ts

DO: Understand Freelancing Is Tough

Freelancing isn’t a get-rich-quick scheme. It’s hard work, and the income can be unpredictable. Be prepared for uncertainty and have a backup plan in place.

DON'T: Quit Your Job Prematurely

Unless you have a solid backup plan or enough savings, don’t quit your day job to freelance. It’s better to start freelancing on the side until you have a steady stream of clients.

DO: Expect Difficult Clients

Not all clients are easy to work with. Some might be demanding or even disrespectful. Don’t let this get to you—learn from these experiences and move on.

Conclusion

After 10 years in the industry, I’ve learned that being a software engineer is about more than just coding. It’s about continuous learning, building relationships, and caring for yourself. Whether you’re just starting or have been at it for a while, I hope these DOs and DON'Ts help you navigate your journey. Keep coding, keep growing, and don’t forget to enjoy the ride!

If there's anything you'd like me to dive deeper into, just let me know — I'd be more than happy to expand on any of the topics!

If you found this helpful, I’d love to connect — 𝕏

Introducing Animata

Hari Lamichhane — Fri, 28 Jun 2024 11:12:22 +0000

Hello Dev Community!

We're excited to introduce Animata, our new free & open-source project designed to help you add animations to your React & Tailwind projects. Whether you're looking for inspiration, need a starting point, or want to dive deep into the world of CSS animations, Animata has got you covered.

Why Animata?

We know the struggles:

Wasting Time on Research: Scouring the web for inspiration and examples can be incredibly time-consuming. We've been there, spending hours finding that perfect animation idea.
Writing Animation Code: Crafting animations from scratch isn't just tedious; it's also prone to errors. Getting everything to work seamlessly across different browsers can be a headache.
Understanding CSS Animations: CSS animations are powerful but can be complex. Understanding the intricacies and mastering the syntax takes time and practice.

Animata was born out of these common frustrations. Our goal is to simplify the process, so you can focus on what you do best—creating amazing web experiences.

What is Animata?

Animata is a collection of pre-built, customizable animation components. It's designed to be:

Inspirational: Browse our collection to spark your creativity. Whether you're working on a personal project or a professional one, Animata provides a wealth of ideas to kickstart your animation journey.
Practical: Use our components as-is or tweak them to fit your project's needs. Each component is crafted with care, ensuring smooth performance and cross-browser compatibility **.
Educational: Dive into the code behind each animation to learn how it's done. Our detailed comments and documentation make it easy to understand the principles of CSS animations.

Key Features

Diverse Collection: Currently we have 40+ components. and we are planning to add a lot more; from subtle hover effects to complex animations.
Customization: By default, we are trying to make the components unstyled so that you can customize it to fit your project needs. However, we do add some basic styling so that the preview looks good in the docs.
Contribution-Friendly: We welcome contributions! If you have an animation you'd like to share with the community, feel free to submit it.

Get Started

Ready to give Animata a try? Here's how:

Visit our website.
Explore the components: Browse through our library and find the animation for your project.
Customize and Implement: Follow our documentation to customize and integrate the animations into your website.
Star our repo: If you find Animata useful, please consider starring our repo. Your support helps us reach more developers and continue improving the project.

We Need Your Feedback!

We're still in the beta phase, and your feedback is crucial. If you have any suggestions or run into any issues, let us know by opening an issue on GitHub or reaching out via email. Together, we can make Animata even better.

Conclusion

We hope Animata becomes your go-to resource for web animations. Our team has poured a lot of love into this project, and we can't wait to see what you'll create with it. Thank you for being part of our journey!

Happy coding! 🚀

Best regards,

The Animata Team

Github repository / Website

** - This is our ultimate goal.

DEV Community: Hari Lamichhane

What do you think of this?

What do you think of this?

10 Common React Mistakes New Developers Make (and How to Fix Them)

1. Not Using URL Query Parameters

The Mistake:

Why It’s a Problem:

How to Fix It:

2. Avoiding the <form> Element

The Mistake:

Why It’s a Problem:

How to Fix It:

3. Too Many Independent useState Calls

The Mistake:

Why It’s a Problem:

How to Fix It:

4. Not Using Derived State

The Mistake:

Why It’s a Problem:

How to Fix It:

5. Misusing useMemo

The Mistake:

Why It’s a Problem:

How to Fix It:

6. No Loading, Error, or Empty States

The Mistake:

Why It’s a Problem:

How to Fix It:

7. Ignoring Accessibility

The Mistake:

Why It’s a Problem:

How to Fix It:

8. Input Without Debounce

The Mistake:

Why It’s a Problem:

How to Fix It:

9. Multi-Step Forms That Reset on Navigation

The Mistake:

Why It’s a Problem:

How to Fix It:

10. No Skeletons or Placeholders

The Mistake:

Why It’s a Problem:

How to Fix It:

Tools That Solve Most of These

Final Thoughts

Make Your App Feel Better: 10 UI Tips for Beginner/Mid-Level Developers

1. Mind Your Margins and Padding

Quick Fix:

2. Handle Empty States Like a Boss

Pro Tip:

3. Always Show Loading States

Pro Tip:

4. Keep a Clear Visual Hierarchy

Pro Tip:

5. Embrace Whitespace, Don’t Fear It

Pro Tip:

6. Handle Errors Gracefully

Pro Tip:

7. Add Tooltips for Long Text & Disabled States

Pro Tip:

8. Use Contextual Colors for Feedback

Pro Tip:

9. Icons Should Enhance, Not Distract

Pro Tip:

10. Don’t Reinvent the Wheel — Use Solid UI Libraries

Pro Tip:

Conclusion

Dear developers ...

Who Am I?

Work: DOs and DON'Ts

DO: Apply for Jobs That Excite You

DO: Improve Your Skills

DO: Give Your Best in Every Project

DON'T: Overthink—Start Doing

DO: Find Mentors

DO: Set Boundaries

DO: Understand the Project Before Starting

DO: Provide Value

Personal: DOs and DON'Ts

2. Avoiding the `<form>` Element

3. Too Many Independent `useState` Calls

5. Misusing `useMemo`