Soko-huru

Soko Huru: Building a Digital Marketplace with React and JSON Server

⸻

Introduction

In the era of digital transformation, marketplaces are shifting from physical stalls to online platforms. For our Phase 2 project at Moringa School, we developed Soko Huru, a React-based single-page application that allows buyers to view and purchase products from different sellers. This blog highlights the technologies we used, the best practices we followed, and the lessons learned along the way.

⸻

Technologies Used

1. React (Frontend Framework)
   • We used React to build a responsive and interactive UI.
   • Client-side routing was implemented using react-router-dom to handle multiple views (home, products, login, etc.).

2. JSON Server (Mock Backend)
   • A lightweight mock backend using json-server enabled us to perform full CRUD operations.
   • It simulated real-world APIs at endpoints like /sellers, /products, and /buyers.

3. Git and GitHub
   • Git was essential for version control and collaboration.
   • GitHub was used for pushing changes, managing branches, and handling merge conflicts during team development.

⸻

Key Features of Soko Huru
• User Authentication (for buyers): Includes login and signup pages using controlled forms.
• Product Listings: Buyers can browse products posted by sellers.
• View Sellers: Displays seller info and associated products.
• Add/Delete Products: Admin/seller view allows adding and removing goods.
• Full CRUD Support: For both buyers and sellers, including data updates and deletions.

⸻

Best Practices Followed
• Component Reusability: The UI was broken down into small, reusable components (e.g., ProductCard, SellerList, NavBar).
• Controlled Forms: All form inputs were tied to React state for better control and validation.
• Data Fetching with useEffect: Ensured that data loads dynamically when the component is mounted.
• State Management with useState: Used React hooks to update and reflect real-time changes across components.

⸻
Challenges and Lessons Learned
• Merge Conflicts in Git: Managing branches taught us how to resolve code conflicts effectively.
• API Errors: Debugging failed fetch requests helped us better understand HTTP status codes and server behavior.
• Modular Thinking: Breaking features into components helped improve readability and maintainability.

⸻

What’s Next?

In future versions, we’d like to:
• Add payment integration (e.g., M-Pesa API).
• Add filtering/search functionality for a better shopping experience.

⸻

Conclusion

Soko Huru was not just a project — it was a real-world simulation of building a working web app using modern JavaScript tools. The skills gained in this project — from API integration to frontend routing — laid a strong foundation for becoming a full-stack developer.