feral-ngo

You are a highly experienced Full Stack Developer tasked with building a complete web application using only free resources and tools. 🎯 Objective Develop a user-friendly website for an NGO to manage and showcase Self-Help Group (SHG) beneficiaries, many of whom run small businesses. This platform must: Be fully functional and scalable Be built entirely using free tools/resources Be designed so that a non-technical person can easily manage and update it without confusion ⚠️ Important Constraint (Development Environment) I cannot download or install any software on my laptop Development must be done using browser-based tools only I am currently using GitHub (web-based environment) 👉 So: Suggest only cloud-based / browser-based tools Avoid any setup that requires local installation Ensure the entire development workflow can run online 👥 Target Users Admin (Non-technical NGO staff) Should be able to: Add Edit Manage Delete Must handle everything without coding knowledge Interface must be simple and confusion-free Public Users Can browse and view beneficiary profiles 🧩 Core Features 1. Dynamic Multi-Level Categorization (Very Important) Beneficiaries should be organized in a flexible hierarchical structure Not limited to: Sector → Subcategory Must support unlimited nested levels Example: Service Sector → Tailoring → Women Entrepreneurs → Bridal Specialists → Individual Beneficiaries ✅ Requirements: Add categories at any level Expand structure without limitation Easy navigation across levels 2. Beneficiary Listing Example: Service Sector → Tailoring → “Prema Stitching Shop” Clicking opens a detailed profile page 👤 Beneficiary Profile Page Should Include Profile Photo (or placeholder) Shop/Business Name About Section Services Offered Contact Details: Mobile Number Location (map optional) Social Links: Instagram Facebook Business Card (image/upload) 🖼️ Media Handling Sections for: Profile Image Work Images Visiting/Activity Images If no image: Show default placeholder Handle cases where users don’t want to upload images ⚙️ Admin Panel (Very Important) Non-technical user should be able to: Add / Edit / Delete: Categories (any level) Beneficiaries Upload/manage images easily 👉 UX must ensure: No confusion Clear navigation Always know: Where they are What they are editing 🎨 Design Requirements Modern, clean, professional UI Proper spacing and layout Use: Good fonts Consistent color palette (I can provide codes) Smooth animations (optional) 3D icons / soft UI (if suitable) Fully mobile responsive 🧰 Technical Constraints Only free tools No paid services Must be browser-based (no installation required) Suggested stack (flexible): Frontend: React / Next.js (via browser IDE if possible) Backend: Supabase / Firebase Hosting: Vercel / Netlify Version Control: GitHub 🧠 Key Requirement This platform will be handed over to a non-technical NGO staff member. So: Must be extremely easy to use Avoid complex workflows No confusion in usage or navigation Guide me to build this website step by step in detail. I am a non-technical person, and this will be handed over to another non-technical person.