DEV Community

Cover image for Project Completed: Eat-N-Split — React Practice Web App
Usama
Usama

Posted on

Project Completed: Eat-N-Split — React Practice Web App

#frontend #webdev #react

past few days, i am working my practice project called Eat-N-Split — in side app you add friend, split bills, and track who owes who.

Here’s what the journey looked like. 👇

Why I Built Eat-N-Split

Because it was in the course 🫢 ops my main goal practice essential React concepts like:

  • Controlled & uncontrolled form inputs
  • Reusable components
  • Lifting state up
  • Conditional rendering
  • Updating nested state Small project big learning i love project building.

Key Features I Developed

✔️ Add New Friends

Simple form → unique ID → avatar with image.

const newFriend = {
  id: crypto.randomUUID(),
  name,
  image: `${img}?=${id}`,
  balance: 0,
};
Enter fullscreen mode Exit fullscreen mode

✔️ Select a Friend
Click a friend select button them and opens the bill-splitting form.

✔️ Split the Bill

Enter the total bill → enter your expense → pick who pays → update balances in the friend list.

✔️ Clean, Minimal UI

Lightweight CSS + reusable components = clean structure and easy readability.

What This Project Taught Me

1. Form Structure Matters

I hit the error:
“Form submission canceled because the form is not connected.”
It forced me to properly place the submit button inside the form and handle controlled inputs the right way.

2. React State Flow Is Everything

Managing who owns the state (App → FriendList → Friend) really improved my understanding of React’s data architecture.

3. Small UI Details Matter

Spacing, alignment, conditional rendering, button states — these are what make a project feel “finished.”

4. A Tiny Project Can Feel Professional

  • With just:
  • Screenshots
  • Clean README
  • Organized components
  • A proper commit history

Even a small app looks like real professional work.

🔗 Live Demo + GitHub
👉 GitHub Repo: (https://github.com/Usamaazeem03/The-Ultimate-React-Course/blob/master/07-Section8-Practice-Project/01-eat-n-split/eat-n-split/README.md)

Final Thoughts

Eat-N-Split not just a tutorial or course project — it became a milestone in my React journey.
Every bug, every fix, every small UI decision taught me something new.
Now that this project is done, I’m ready to move to more advanced ones
One project at a time. One level up at a time.
Thanks for reading! 🙌

Top comments (0)