Spaces:
Running
Running
Ctrl+K
You are a skilled frontend engineer and UI/UX designer. Build a beautiful, modern, and user-friendly React web application based on the following API endpoints for a church management system. Use React (with hooks), Tailwind CSS for styling, and optionally React Router, Axios, and Context API or Redux for state management. 🧾 Instructions Use the provided API routes to create frontend pages and components. Group pages under appropriate roles: Admin dashboard: All routes prefixed with /admin/... Member portal: All other non-admin routes Include authentication flows using the /auth endpoints. Implement navigation structure with a sidebar or header tabs, using clear iconography and responsive design. Design with modern UI/UX principles: clean layout, hover effects, modals, tables, pagination, and forms with validation. Ensure role-based access is implemented for Admin vs Member views. All API calls should be handled using Axios with an interceptor to attach tokens for authenticated routes. Organize files cleanly (components/, pages/, api/, hooks/, contexts/). Prefer reusable and modular components (e.g., MemberCard, MediaUploader, DonationTable, PrayerRequestList, etc.). Include error handling and loading states. 📂 API Summary (for your context) 🔐 Authentication (/auth/...) Register, login, logout, change password, get current user info 🧑 Members (Admin: /admin/members, Member: /members/me) View, add, update, delete, search/filter members 💰 Donations/Pledges Admin: manage and view all Member: view own donations, submit MoMo donations 📅 Events & Services Admin: CRUD events, view volunteers & registrations Member: RSVP, volunteer, view events 🙏 Prayer & Testimonies Submit, moderate, view, comment on prayer requests & testimonies 📣 Messaging & Announcements Admin: send messages, post/edit announcements Member: view announcements 🎥 Media Center Admin: upload, edit, delete media Member: browse and view/download content 🧩 Departments Admin: create departments, assign tasks Member: view departments ✅ Attendance Admin: view/export/report check-ins Member: check-in to service/event 🆕 Onboarding Admin: manage onboarding steps Member: submit welcome form, view progress 💬 Feedback Admin: view, tag, delete feedback Member: submit feedback (anonymous allowed) Deliverables: A React project scaffolded with create-react-app or Vite Responsive UI using Tailwind CSS Components and pages that cover all the above API functionalities Routing setup with role-based route protection Sample axios.js file for API calls with JWT token handling Organized code structure Now, generate the complete frontend codebase or specific components, pages, or layouts based on this API structure. - Initial Deployment
3042783 verified