SM
Shahneel Musharraf

Auth Page - Copy this React, Tailwind Component to your project

I need a fully functional, responsive frontend for a Facebook Messenger Bulk Messaging Web App using React.js (Next.js preferred) and Tailwind CSS. This app allows users to: ✅ Authenticate via Facebook OAuth ✅ Manage Facebook Pages ✅ Send Bulk Messages ✅ Create & Use Message Templates ✅ Schedule Messages ✅ View Sent Message Logs & Analytics Key Screens & Features: 1. Authentication (Login Page) Facebook OAuth login Fetch and display connected Facebook Pages Secure, encrypted authentication 2. Dashboard (Main Page After Login) Overview of messaging activity (sent, scheduled, failed messages) List of connected Facebook Pages Quick access buttons to create new bulk messages 3. Pages Management Show list of connected Facebook Pages Allow users to select a Page for messaging 4. Bulk Messaging Page Message Composer (input field + character counter) Recipient Selection (upload CSV or fetch from Page followers) Message Scheduling (select date & time for scheduled messages) Preview Feature (see how the message will appear) 5. Message Templates Create, save, and edit message templates Add placeholders (e.g., {name}, {order_id}) 6. Message Logs & Analytics Table showing sent, scheduled, and failed messages Open rate & engagement statistics 7. Settings Page Add/Remove Facebook Pages Notification settings (email alerts for failed messages) Dark mode toggle UI & Styling Preferences: Modern, professional, and user-friendly UI Sidebar navigation with icons for easy access Tables with search & filter options Mobile Responsive Design Expected Output: A complete Next.js (or React.js) frontend with: ✅ Reusable Components ✅ Styled with Tailwind CSS ✅ API Integration Ready (using Axios) ✅ Dashboard & Bulk Messaging Functionality Additional Instructions: The UI should not be limited to just a login screen—it must include a full dashboard, message management, and scheduling features. Ensure that all components are well-structured and responsive.

Prompt
Component Preview

About

AuthPage - Secure Facebook OAuth login, fetch connected Pages, and manage user access. Built with React and Tailwind. Get instant access!

Share

Last updated 1 month ago