strict instructions : use typescrupt and also use editor feature to create a full comprehensive project AI Prompt: Generate Expert-Level React Native Application - "Umuganda Connect"Your Role: You are an expert-level React Native developer AI.Your Mission: Generate the complete, expert-level, and production-ready frontend codebase for the "Umuganda Connect" mobile application. This is a complex task requiring you to adhere strictly to the architecture, technologies, and intricate UI/UX design philosophy detailed below. The final output must be robust, performant, and maintainable, reflecting the highest industry standards.1. Project Overview"Umuganda Connect" is a civic-tech application designed to digitize and enhance Rwanda's community work program, Umuganda. It connects community members, local leaders, and stakeholders, providing tools for project organization, volunteer mobilization, impact tracking, and community engagement.2. Core Architectural Mandates (Strict Adherence Required)You must follow these architectural decisions without deviation:Repository Structure: A standard, single-package repository structure. Do NOT use a monorepo. The entire application source code will reside within a single src directory, organized by feature for scalability and clarity.Styling Engine: NativeWind is the exclusive choice for all styling. Implement a utility-first approach. A tailwind.config.js file must be created and configured with custom themes, colors, and shadow utilities to achieve the specified Neumorphic aesthetic.State Management (Multi-faceted Strategy):Server State: TanStack Query (React Query) is mandatory for all asynchronous data fetching and server state management. It will handle caching, mutations, and synchronization for all API calls.Global Client State: Zustand will be used for managing small-to-medium, non-server global state (e.g., theme, authentication status).Form State & Validation: React Hook Form must be used for handling all complex forms, including registration, profile editing, and project creation. It will manage form state, validation, and submission logic. Zod is NOT to be used on the frontend.Local UI State: React's built-in useState and useReducer hooks are to be used for simple, component-level state.Navigation: Use React Navigation as the core library. Critically, you must use @react-navigation/native-stack for all stack navigators to leverage native screen transitions for a 60 FPS, high-performance user experience.Core Technologies:Framework: React Native (latest stable version) with the Hermes engine enabled.Crash Reporting: Sentry.OTA Updates: Expo Application Services (EAS) Update.3. UI/UX Design Philosophy: A Synthesis of Neumorphism & GlassmorphismThe application must implement a sophisticated and visually distinct UI by combining two modern design trends. This is a critical requirement.Foundational Aesthetic: NeumorphismApplication: All foundational UI elements—backgrounds, content cards (e.g., ProjectCard), buttons, and input fields—must be styled using Neumorphic principles.Description: This creates a soft, tactile "soft UI" effect where elements appear extruded from or debossed (pressed into) the background. This is achieved with subtle, dual-toned inner and outer shadows.Accessibility Mandate: To counteract the inherent low-contrast weakness of Neumorphism, you must implement the following:High-Contrast States: Interactive elements must have visually distinct focus and press states that significantly increase contrast and clarity (e.g., by changing color and shadow intensity).Clear Affordance: Every interactive element must be accompanied by a clear icon and/or text label. Do not rely on shadow alone.High-Contrast Theme: The application's theme context must include a "High Contrast" mode that users can enable, which applies more defined borders and stronger shadows.Elevated Layers: GlassmorphismApplication: Any UI element that appears as an overlay on top of the main content must use a Glassmorphic style. This includes modals, action sheets, pop-up notifications, and floating media players.Description: This creates a "frosted glass" effect, characterized by a translucent, blurred background, a subtle 1px border, and a gentle gradient. This clearly separates the overlay from the background content and focuses the user's attention. Utilize the @react-native-community/blur library or an equivalent to achieve this effect.4. Full Project Folder Structure & File GenerationGenerate the complete code for every file listed in the following structure.codeCode/umuganda-connect-mobile ├── android/ ├── ios/ ├── src/ │ ├── api/ │ │ └── api.ts # Axios or Fetch instance setup, with interceptors for auth tokens │ ├── assets/ │ │ ├── fonts/ │ │ ├── icons/ │ │ └── images/ │ ├── components/ │ │ ├── atoms/ # Reusable, basic UI elements (Button, Input, Icon) │ │ │ ├── Button.tsx │ │ │ ├── InputField.tsx │ │ │ └── Icon.tsx │ │ ├── molecules/ # Combinations of atoms (FormField, SearchBar) │ │ │ ├── FormField.tsx │ │ │ └── SearchBar.tsx │ │ └── organisms/ # Complex, shared components (Header, BottomNavBar) │ │ ├── AppHeader.tsx │ │ ├── BottomNavBar.tsx │ │ └── GlassModal.tsx # Reusable Glassmorphism modal │ ├── contexts/ │ │ └── ThemeContext.tsx # Manages light/dark/high-contrast themes │ ├── features/ │ │ ├── auth/ │ │ │ ├── screens/ │ │ │ │ ├── SplashScreen.tsx │ │ │ │ ├── OnboardingScreen.tsx │ │ │ │ ├── LoginScreen.tsx │ │ │ │ └── PasswordResetScreen.tsx │ │ │ ├── components/ │ │ │ │ └── AuthForm.tsx │ │ │ └── hooks/ │ │ │ └── useAuth.ts # Hook to interact with auth state and services │ │ ├── projects/ │ │ │ ├── screens/ │ │ │ │ ├── ProjectListScreen.tsx │ │ │ │ ├── ProjectDetailScreen.tsx │ │ │ │ └── CreateProjectScreen.tsx │ │ │ ├── components/ │ │ │ │ ├── ProjectCard.tsx │ │ │ │ ├── ProjectFilterModal.tsx # Glassmorphism modal for filtering │ │ │ │ └── MaterialPledgeCard.tsx │ │ │ └── hooks/ │ │ │ └── useProjects.ts │ │ ├── community/ │ │ │ ├── screens/ │ │ │ │ ├── CommunityFeedScreen.tsx │ │ │ │ └── CreatePostScreen.tsx │ │ │ └── components/ │ │ │ └── CommunityPost.tsx │ │ ├── profile/ │ │ │ ├── screens/ │ │ │ │ ├── MyImpactScreen.tsx │ │ │ │ ├── ProfileSettingsScreen.tsx │ │ │ │ └── EditProfileScreen.tsx │ │ │ └── components/ │ │ │ ├── ImpactStatCard.tsx │ │ │ └── Badge.tsx │ │ └── admin/ │ │ ├── screens/ │ │ │ ├── AdminDashboardScreen.tsx │ │ │ └── ReportScreen.tsx │ │ └── components/ │ │ └── ReportChart.tsx │ ├── hooks/ │ │ └── useHaptic.ts # Centralized hook for triggering haptic feedback │ ├── navigation/ │ │ ├── AppNavigator.tsx # Main navigator (switches between Auth and Main stacks) │ │ ├── AuthStack.tsx # Navigation for login, register, onboarding │ │ ├── MainTabNavigator.tsx # Bottom tab navigator for the main app │ │ └── types.ts # TypeScript types for navigation params │ ├── services/ │ │ ├── authService.ts # Functions calling auth API endpoints │ │ ├── projectService.ts # Functions for project API endpoints │ │ └── ... (other services) │ ├── store/ │ │ └── useGlobalStore.ts # Zustand store definition │ ├── types/ │ │ ├── api.ts # Types generated from swagger.json for API responses │ │ └── index.ts # General application types and enums │ └── utils/ │ ├── constants.ts │ ├── formatDate.ts │ └── helpers.ts ├── index.js ├── metro.config.js ├── babel.config.js └── tailwind.config.js # Configuration file for NativeWind5. API Integration ContractThe swagger.json file provided below this prompt is the absolute source of truth for all API endpoints, request payloads, and response data structures. All data fetching logic (TanStack Query), service functions, and TypeScript types in src/types/api.ts must align perfectly with this contract.6. Final Instructions & ConstraintsGenerate Full Code: You must generate the complete, functional code for every file specified in the folder structure.No Test Files: Do not generate any test files or test configurations. The tests directory should be omitted entirely.No Conversational Output: Your final output must contain only the code. Do not include any explanations, apologies, or conversational text.Production Quality: The generated code must be complex, robust, and reflect the standards of a senior mobile developer building a high-stakes, production application. This includes implementing comprehensive error handling, loading states, and empty states for all data-driven screens.(I will now paste the swagger.json file content below this line
Loading...
don't do this please create a folder so that I can download a zip
Loading...
Your Role: You are a distinguished Principal Frontend Engineer AI.Your Mission: Your previous attempt was too simplistic. Your new mission is to generate the complete, final, and deeply complex frontend codebase for the "Umuganda Connect" application. The code must be of the highest production quality, demonstrating sophisticated patterns, handling all use cases, and implementing a rich, interactive user interface. The goal is to create a masterpiece of mobile engineering, not a basic prototype.MANDATE #1: From Simple to Sophisticated - The Complexity RequirementThis is the most critical instruction. You must transform the simple scaffold into a complex application by implementing the following in every relevant file:Comprehensive State Handling (Non-Negotiable):Loading States: Do not use simple spinners. Implement skeleton loaders (react-native-skeleton-placeholder or a custom-built equivalent) for all data-fetching screens. The skeletons must mimic the layout of the final content (e.g., show shimmering skeleton versions of ProjectCard).Error States: Handle all possible errors gracefully. This includes:Network Errors: Display a dedicated component when the user is offline, offering a "Retry" button.API Errors (4xx/5xx): Show user-friendly error messages based on the response from the API. Use the error object from TanStack Query.Not Found (404): Display a clean "Not Found" component.Empty States: When an API call returns an empty list (e.g., no projects, no community posts), display a well-designed empty state component with an illustration and a clear message (e.g., "No projects found. Why not create one?").Intricate Business Logic:Role-Based UI: The UI must dynamically change based on the user's role (ADMIN, LEADER, VOLUNTEER), which is available from the authentication context. For example, a LEADER sees a "Create Project" button, while a VOLUNTEER does not. An ADMIN sees a "Delete User" button, others do not. This logic must be embedded directly within the components.Transactional UI Flows: For any destructive action (e.g., deleting a post, cancelling a signup, deleting a project), you must first trigger a confirmation dialog (GlassModal). The action should only proceed after user confirmation.Code Depth and Completeness: Your goal is not to artificially inflate line counts, but to achieve a natural complexity that will result in significantly larger, more comprehensive files (e.g., 400-600+ lines for major screen components) because they handle all states, logic, interactivity, and styling thoroughly. A simple 100-line component is an instant failure.MANDATE #2: Visual and Interactive Excellence - The UI/UX RequirementThe UI must be beautiful, interactive, and delightful to use.Masterful Morphism Implementation:Neumorphism: Generate intricate NativeWind className strings that combine custom shadow utilities (defined in tailwind.config.js), gradients, and background colors to achieve a convincing and aesthetically pleasing "soft UI" effect for all base components.Glassmorphism: For all modals, action sheets, and toast notifications, implement a beautiful "frosted glass" effect using the @react-native-community/blur library. The effect must be prominent and create a clear sense of depth.Rich Interactivity (Crucial for a "Good" UI):Toasts & Notifications: Integrate and use a library like react-native-toast-message.Show a success toast after every successful mutation (e.g., "Profile updated successfully!").Show an error toast when an API call fails.The toasts themselves should adopt a Glassmorphic style.Haptic Feedback: Use a useHaptic hook to trigger haptic feedback (react-native-haptic-feedback) on all significant user interactions: button presses, toggles, successful form submissions, and pull-to-refresh actions.Micro-interactions & Animations: Use react-native-reanimated to add subtle, meaningful animations.Fade in content using useAnimatedStyle after data has loaded.Animate list items entering the screen using LayoutAnimation.Animate button presses with a subtle scale transform.Accessibility (Production Requirement):Add accessibilityLabel, accessibilityHint, and accessibilityRole props to all interactive elements to ensure the application is usable by everyone.MANDATE #3: Reiteration of Core Architecture (No Deviations)TypeScript IS LAW: The entire project must be strongly typed with TypeScript.Full Project Generation: Generate the entire project in a single output block, using the // --- START/END OF FILE --- format.No Test Files: Skip all test file generation.Stack:Structure: Standard, feature-based repository.Styling: NativeWind.State: TanStack Query (server), Zustand (global client), React Hook Form (forms).Navigation: React Navigation with @react-navigation/native-stack.Final InstructionsYou are building the final, definitive version of this application. Every file should reflect the thought and care of a principal engineer. Handle every case, polish every interaction, and build a UI that is not just functional but truly stunning and complex. The swagger.json file provided below is your inviolable API contract.