Smart Goal Planner -Phase 2 project

My Phase 2 React Project: Smart Goal Planner

Introduction
In Phase 2 of my software engineering journey, I built a project using React that helped me learn how to manage state, handle forms, and interact with APIs. This post shares what I built, what I learned, and challenges I faced.

_ About the Project_
The Smart Goal Planner is a simple app that allows users to:

1. Add savings goals
2. Track deposits
3. View progress with a progress bar
4. Delete or edit goals

It uses:

• React (for building components)
• JSON Server (for mock backend)

• useState and useEffect
  _
  ** Lessons Learned_**
  Here are a few things I learned:

• How to lift state up and pass props between components.

• How to fetch data using useEffect and display it.

• How to manage controlled forms in React.

• How to map over arrays to dynamically render items.

• Styling using CSS and adding hover effects.

Challenges
One challenge I faced was getting the useEffect to only fetch once. I learned that I had to include the correct dependency array. I also struggled with form validation but overcame it using basic JavaScript logic.

Final Thoughts
This project helped me get more confident with React. I'm excited to build more projects and dive deeper into the React ecosystem!

Link to Project
View My Project Here

_ Source Code_
GitHub Repo