██FR█████ █INTELL███████████

🚀 Starting the *Eat-N-Split* Project (From My React Course)


This content originally appeared on DEV Community and was authored by Usama

Documenting my learning journey — this is a course project, not my original idea.

📝 Introduction

Today, I began working on the Eat-N-Split project from my React course.
This small practice app is designed to help learners understand some essential React concepts such as conditional rendering, component structure, and state management.

I’m sharing my progress here to document what I’m learning — not to claim the concept or UI as my own. This project is part of the curriculum I’m following.

🎯 What the Project Teaches

Eat-N-Split is a simple bill-splitting mini-app where you:

  • Display a list of friends
  • Show who owes whom
  • Select a friend
  • Split a bill
  • Update balances

Even though the app is small, it touches several important concepts that every React developer must master:

✔ Components & Props

✔ Mapping Lists to UI

✔ Conditional Rendering

✔ Handling State (useState)

✔ Forms & Controlled Components

✔ Clean UI Logic

🧱 Day 1 Progress: Friend List UI

In this first step, I focused only on the friend list.

Each friend in the list contains:

  • a name
  • an avatar
  • a unique ID
  • a balance (positive, negative, or zero)

Then I used a simple conditional rendering pattern for the balance:

if balance < 0 → "You owe them"
if balance > 0 → "They owe you"
if balance === 0 → "You are even"

This part helped me better understand how to display different UI states based on dynamic data.

💡 What I Learned Today

Even though this is just the starting point, it helped me strengthen some fundamentals:

🔹 How to structure a component cleanly

🔹 How to loop through arrays to render UI

🔹 How to keep logic readable inside JSX

🔹 How simple conditions can control the entire user interface

These concepts show up everywhere in React, even in advanced apps, so practicing them is extremely valuable.

🔮 What’s Coming Next?

According to the course roadmap, the upcoming steps will include:

✔ Selecting a friend
✔ Adding a new friend
✔ Splitting a bill
✔ Updating the balance using useState
✔ Making the interface fully interactive

I’m excited to continue building the app and improving my understanding of React’s data flow and state logic.

👍 Final Thoughts

I’m enjoying this project because it combines simplicity with practical hands-on React experience.
I’ll keep sharing my progress as I complete each module of the course.

If you’re also learning React, this project is a great exercise to strengthen your fundamentals.


This content originally appeared on DEV Community and was authored by Usama