Como se fosse feito por um profissional do figma senior
Generated Prompt
## APPLICATION OVERVIEW The application is a modern mobile web app designed for a church community that fosters real-time updates and connections among members through various ministries. This platform will facilitate communication, leadership management, and community engagement, ensuring that all members stay informed and involved. ## CORE FEATURES 1. **Real-Time Updates**: Members receive instant notifications and updates about church events, services, and announcements. 2. **Ministries Connection**: A dedicated section for various church ministries, allowing members to join, communicate, and collaborate on activities. 3. **Leadership Hierarchy**: An admin dashboard that enables church leaders to manage members, events, and content efficiently, including an admin master for overarching control. 4. **Member Profiles**: Individual profiles for members to share their skills, interests, and involvement in church activities, fostering a sense of community. 5. **Event Calendar**: An interactive calendar that showcases upcoming events, allowing members to RSVP and add events to their personal calendars. 6. **Discussion Forums**: Spaces for members to engage in conversations, share ideas, and support one another within the community. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - **Color Mode**: Light theme with dark text on light backgrounds - **Primary Color**: #1978E5 (accent for buttons, links, highlights) - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs - **Layout**: A responsive design with a mobile-first approach, featuring a bottom navigation bar for easy access to core functionalities, a central dashboard for updates, and modular content sections for events and discussions. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux (if needed for complex state management) ## IMPLEMENTATION STEPS 1. **Set up the Development Environment**: Initialize a new React project with TypeScript and Tailwind CSS. 2. **Install Dependencies**: Add necessary libraries like shadcn/ui for UI components and Redux for state management (if required). 3. **Create the Main Structure**: Build the main layout with a header, footer, and a responsive bottom navigation bar. 4. **Develop Core Features**: - Implement real-time updates using WebSocket or Firebase for notifications. - Create ministry sections as separate components with routing capabilities. - Design the admin dashboard with user management functionalities. - Build member profiles and integrate them into the main user interface. - Create the event calendar using a library like react-calendar. - Set up discussion forums with comment threads and user interactions. 5. **Ensure Responsive Design**: Test and refine the application across different mobile devices to ensure usability and accessibility. 6. **Implement Testing**: Write unit tests for key components and features to ensure reliability and performance. 7. **Deploy the Application**: Use a platform like Vercel or Netlify for deployment, ensuring serverless functions are in place for backend interactions. ## USER EXPERIENCE The user journey begins with a smooth onboarding process where members can sign up or log in easily. Once logged in, they are greeted with a personalized dashboard that highlights recent updates, upcoming events, and relevant ministries. Users can navigate seamlessly through the bottom navigation bar, participate in discussions, RSVP for events, and connect with other members. The design will prioritize clarity and accessibility, ensuring that all interactions are intuitive and engaging, making it easy for members to stay connected with their church community.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
