"preciso criar um app em react next js como conexão backend ao Hostinger.
Generated Prompt
## APPLICATION OVERVIEW This application is a web app built with React and Next.js, designed to serve as a user-friendly interface for managing alarms, companies, and sensors. The app will feature user authentication and a simple navigation system, making it easy for users to access and manage their data efficiently. ## CORE FEATURES 1. **User Authentication**: A secure login screen requiring email and password for user access. 2. **Home Screen**: A main dashboard displaying a summary of alarms, companies, and sensors, with easy navigation. 3. **Persistent Navigation Menu**: Located at the bottom of the screen, the menu will include icons and labels for Home, Alarms, Companies, and Sensors for quick access. 4. **Notification Icon**: A bell icon in the top right corner to alert users of any notifications or updates. 5. **Settings Icon**: An adjustable gear icon in the top right corner that leads to the user settings page. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with plenty of white space and a focus on typography to enhance readability. - **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast for better visibility. - **Layout**: - Login screen with a centered form for email and password inputs. - Home screen featuring a top navigation bar for notifications and settings, with a fixed bottom menu for core app features. - **Typography**: - Font choice: Use a sans-serif font such as 'Inter' or 'Roboto' for a modern appearance. - Hierarchy: Utilize larger font sizes for headings and smaller sizes for body text, maintaining clear visual distinction. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for type safety and better maintenance. - **Styling**: Tailwind CSS for utility-first styling, allowing rapid design adjustments. - **UI Components**: Use shadcn/ui for pre-built, customizable UI components. - **State Management**: Consider using React Context API or Zustand for state management where needed. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new Next.js project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui). 2. **Create Authentication Flow**: Develop the login screen with form validation and integrate with backend authentication via Hostinger. 3. **Build Home Screen**: Design the home layout to include sections for alarms, companies, and sensors, ensuring responsiveness. 4. **Implement Navigation**: Create a bottom menu with appropriate icons and label text for easy navigation, along with the notification and settings icons at the top. 5. **Testing**: Conduct thorough testing for user flows, ensuring a smooth experience across devices. 6. **Deploy**: Deploy the application to a hosting service, ensuring backend connectivity with Hostinger. ## USER EXPERIENCE Users will be greeted by a straightforward login screen where they can enter their credentials. After logging in, they will be directed to the home screen, where they can easily navigate through the persistent bottom menu. Notifications and settings will be accessible from the top right, promoting a seamless user journey throughout the application. The minimalist design will enhance usability, allowing users to focus on managing their alarms and sensors without distractions.
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!
