🚀 User Management System

🌟 Inspiration

The inspiration for this project came from the desire to code and put our knowledge to use for the betterment of society. Given that school has yet to start and that we had time to spare, H4G felt like a timely opportunity for us to put our knowledge to meaningful use. Since Muhammadiyah Welfare Home (MWH) is dedicated to providing care and support for boys residing on its campus, fostering a nurturing environment to help them thrive, we felt that working on their prompt was the best way forward!

🔥 What It Does

This React-based User Management System allows admins to:
✅ Authenticate users using Firebase Authentication
✅ Manage user roles (Admin, Regular User)
✅ Suspend users without deleting their accounts
✅ Store and retrieve user data in Firestore
✅ Provide a seamless and real-time experience using Firebase’s real-time database updates

🛠️ How We Built It

We used the following technologies to build this system:

Frontend: React
Authentication: Firebase Authentication (Email/Password-based login)
Database: Firestore for a clean and responsive design
Cloud Services: Firebase for hosting and backend integration

The project follows a component-based architecture in React, ensuring modularity and reusability. Firebase Authentication handles secure user login/logout, while Firestore acts as the database for storing user information and managing permissions dynamically.

🚧 Challenges We Ran Into

Building this system came with its fair share of challenges:

User Suspension Mechanism: Finding an effective way to suspend users required a combination of Firestore role management and Firebase Authentication rules.
Real-Time Updates: Ensuring that user status changes (such as suspension) reflect immediately in the UI without needing a manual refresh.
Security & Role-Based Access: Implementing secure authentication flows while preventing unauthorised access to admin functionalities.
Firestore Data Structure: Designing an efficient and scalable Firestore schema for managing users efficiently.

🎉 Accomplishments That We're Proud Of

Despite the challenges, we successfully:
✅ Implemented a robust user authentication system
✅ Created a role-based access control system for admin and regular users
✅ Developed a user suspension feature without affecting stored data
✅ Integrated real-time UI updates with Firebase Firestore
✅ Built a scalable and responsive UI for a seamless user experience

📚 What We Learned

This project taught us several valuable lessons:

Firebase Authentication & Firestore Integration: Deep understanding of how Firebase handles user authentication and real-time database interactions.
Optimising Firestore Queries: Structuring data efficiently to minimise read/write operations and improve performance.
React Environment and Javascript: Better understanding on how to use React and coding in Javascript to produce the web application.