Muhammadiyah Welfare Home Online Shop

Inspiration

The inspiration for this project stemmed from the need to streamline the process of providing essential items to the boys under the care of the Muhammadiyah Welfare Home. Observing the challenges faced by administrators in managing inventory and ensuring timely delivery of necessities, we wanted to create a solution that would simplify operations and empower both staff and contributors to support the boys more effectively.

What I Learned

Throughout this project, we gained valuable insights into designing user-friendly platforms that cater to diverse user roles. We enhanced our skills in web development, particularly in creating seamless e-commerce experiences. Additionally, we learned the importance of prioritizing usability for administrators while maintaining an intuitive interface for end users.

How I Built the Project

1. Planning and Requirements Gathering:

   • Identified the key functionalities needed: product browsing, cart management, order tracking, and inventory oversight.
   • User roles (admins and general users) were clearly defined.

2. Technology Stack:

   • Frontend: React, Javascript, HTML and CSS for a responsive interface.
   • Backend: Node.js and Express.js for server-side logic.
   • Database: MySql for storing product information, user data, and order details.

3. Development Process:

   • Implemented user authentication to differentiate between admins and general users.
   • Built a product catalog with categorized items for easy browsing.
   • Developed cart and checkout functionalities for seamless ordering as well as viewing of order history.
   • Created admin dashboards for inventory, order and user management.

4. Testing and Deployment:

   • Conducted rigorous testing to ensure smooth functionality for all features.

Challenges Faced

• Defining User Roles: Creating an interactive UI with distinct layouts tailored for both admins and users posed a considerable challenge.
• Inventory Management Logic: Developing a system to track inventory updates in real time that is stored in a database. Retrieving from and updating the database using frontend buttons was difficult.
• Time Constraints: Programming the many features needed within the timeframe given, as well as ensure that they are fully functional without bugs. We had to learn how to use Mysql to store data and retrieve data as well.

Conclusion

This project not only provided a meaningful solution for the welfare home but also allowed us to grow as a developer. It was fulfilling to create a platform that directly supports a noble cause, making daily operations more efficient while ensuring the boys receive the items they need.

Built With

• express.js
• javascript
• mysql
• node.js
• react