brave-webapp
ShashwatPrepare a webapp CityZen 1) PAGE LOGIN • Basic details a) Email b) Password OR Continue with google OR New Here? Sign up • Name • Phone no. • Email id • Password • Etc ( if I’m missing something) 2) Directing Page Directing page a) Directing you to the main page ( loading Interface) 3) Left SideBar a) Top side – logo b) Close sidebar option c) New chat d) City Pulse For example - 📍 Ahmedabad Tonight - 9:30PM e) City Name – ( Changeable) Event Pulse - (Unsung GEM Events , Trending Events) Food Pulse - (Underrated café’s / restaurants / Spots) Budget Pulse – (Street Secrets / Modern Stores) Night Pulse – (City after 9PM - Local Favorites - Under the Radar- Offbeat Picks - Insider Finds) Destination Pulse – ( Hidden Gems / Local Favorites – Undisclosed / Top Rated Places) f) My Chats – Searchbar g) Account – Become a pro h) Settings 4) Main interface A) Make a Plan B) Explore Underrated destinations C) Plan Your Midnight D) Visit Hidden Gems E) Eat Local Favourites CHATBAR – Add files – etc - Voice recording ( CityZen can make mistakes – Cookie prefrences) Right corner – top : THREE DOTS Start a group chat Explore Outings ( for pro members) Pin chat Archive Delete chat Share Chat Move to Pulses a) City Pulse b) Event Pulse c) Destination pulse d) Food pulse e) Budget pulse f) Night Pulse 5) Traveling Offer / interface Will Provide Upto 10km Traveling fares in any city to our pro members for their subscriptions a Will also provide one time upto 10km cost for every member who books ride through us FOR EXAMPLE Here’s your hidden gem with Maps and fares THOL – 17KMS FROM YOUR LOCATION (will pay upto 10km for your ride Via any mode you choose) BOOK NOW Redirect to payment page like bms and others
Comments (0)
Sign in to leave a comment
Project Tasks20
Implement Theme & Global Styles
As a user I want to see a consistent CityZen visual identity across all pages. Implement the global design system: CSS variables for color tokens (#121212 bg, #00BFFF neon accent, #FF00FF magenta, #E0E0E0 text, #808080 muted), Inter font family, dark base theme, keyframe animations (neon pulse glow, underline-in, fade-in, drawer-in), glassmorphism card patterns (backdrop-blur, semi-transparent surfaces), and reusable button/input/badge component styles. Remove scaffold pages not needed (welcome page post login, default dashboard/ai-assistant). This task must be completed before any page implementation begins.
Implement User Profile & Settings API
As a user I want to use the backend API to manage my profile, security settings, notification preferences, and membership. Build FastAPI endpoints: GET /users/me (profile), PATCH /users/me (update name, bio, city), POST /users/me/avatar (upload), PUT /users/me/password (change password), POST /auth/otp/send & /auth/otp/verify (phone OTP), GET/PUT /users/me/notifications (preferences), GET /users/me/sessions (active sessions), DELETE /users/me/sessions/{id} (revoke), POST /memberships/upgrade (pro upgrade), DELETE /users/me (account deletion).
Implement Travel Offers Backend API
As a user I want to use the backend API to view travel offers, get live fare estimations, redeem reimbursements and book rides. Build FastAPI endpoints: GET /travel/offers (list active offers per user tier), GET /travel/estimate?origin={}&destination={}&mode={} (live fare estimation for auto/cab/bike), POST /travel/book (create booking, apply reimbursement up to 10km, redirect to payment), GET /travel/bookings (user booking history). Enforce Pro-only 10km reimbursement and one-time offer for regular users.
Implement City Pulses Backend API
As a user I want to use the backend API to fetch, create, update, and delete city pulses. Build FastAPI endpoints: GET /pulses?city={city} (list all pulses with type filter), GET /pulses/{id} (pulse detail), POST /pulses (admin create), PUT /pulses/{id} (admin update content), DELETE /pulses/{id} (admin delete), PATCH /pulses/{id}/toggle (admin toggle active). Include pulse types: Event, Food, Budget, Night, Destination. MySQL schema with Alembic migration.
Integrate AI Chat in Chat Page
As a user I want to use a Claude/GPT-powered chat interface on the Chat page that understands city exploration context and responds with curated pulse recommendations, hidden gems, and outing plans. Integrate LiteLLM routing with GPT model, Langchain for context management, streaming responses, and CityZen-specific system prompt. Connect to the Chat Backend API. The interface should feel like a smart city exploration assistant.
Build Login Page
As a user I want to sign in with email/password or Google authentication on the Login page. Implement the Login page (v2 design) with email and password fields, Google OAuth button, forgot password link, sign-up redirect link, and OTP-based phone validation UI. On successful login navigate to Directing (loading screen). Reference the existing Login v2 JSX design. Page connects to: Signup, Directing, Explore (guest browse).
Implement Chat Backend API
As a user I want to use the backend API to create, retrieve, manage and interact with AI-powered city exploration chats. Build FastAPI endpoints: POST /chats (create chat), GET /chats (list user chats with pulse filter), GET /chats/{id}/messages, POST /chats/{id}/messages (send message, trigger AI response via LiteLLM/Langchain + GPT), POST /chats/group (create group chat), PATCH /chats/{id} (pin/archive/move to pulse), DELETE /chats/{id}. Integrate LiteLLM routing for GPT responses contextualized to CityZen city exploration.
Build Landing Page
As a user I want to view the CityZen landing page to understand the app and navigate to login or signup. Implement the Landing page (v3 design) with NavBar (logo with blue neon pulse-glow animation, nav links with animated neon underline, CTA buttons), Hero section (full-viewport animated gradient headline), Features/Pulses showcase, How It Works, Testimonials, and Footer. Page links to Login and Signup. Reference the existing Landing v3 JSX design.
Implement Admin Management API
As an Admin I want to use the backend API to manage users, city pulses, travel offers, and view system stats. Build FastAPI endpoints: GET /admin/stats (overview: total users, pro members, active pulses, redeemed offers, open tickets), GET /admin/users (paginated list with role/status filters), PATCH /admin/users/{id} (suspend/role change), DELETE /admin/users/{id}, GET /admin/activity (recent admin actions feed), GET /admin/health (API status, DB, AI model, active sessions, server load). Enforce admin role-based access control.
Implement Payment Backend API
As a user I want to use the backend API to process ride booking payments with reimbursement applied. Build FastAPI endpoints: POST /payments/initiate (create payment order with fare - reimbursement calculation), POST /payments/confirm (webhook/callback for payment provider confirmation), GET /payments/{id} (payment status). Integrate reimbursement ledger logic and link back to travel booking status update.
Build Signup Page
As a user I want to create a CityZen account by providing my name, phone number, email and password. Implement the Signup page (v2 design) with name, phone number (with OTP validation trigger), email, and password fields, Google sign-up option, and redirect to Login. Reference the existing Signup v2 JSX design.
Build Sidebar Component
As a user I want to use the dynamic sidebar to browse city pulses, manage chats, change my city, and access settings. Implement the Sidebar page/component (v2 design) with: logo at top, close button with blue neon circuit-board edge animation, New Chat button, city selector (manual + GPS), city pulse sections (Event, Food, Budget, Night, Destination pulses with animated neon outline flicker), My Chats search bar, Account/Become Pro CTA, and Settings link. Reference the existing Sidebar v2 JSX design.
Build Directing Page
As a user I want to see a visually stunning loading screen after login before being directed to the Dashboard. Implement the Directing page (v2 design) featuring the animated blue neon city skyline formation, pulsing CityZen logo glow, loading progress indicator, and smooth transition animation into the Dashboard. Reference the existing Directing v2 JSX design. This page appears after Login for all authenticated personas.
Build Dashboard Page
As a user I want to view my personalized city pulse overview on the Dashboard. Implement the Dashboard page (v2 design) showing city pulse cards (Event, Food, Budget, Night, Destination), quick action buttons (Make a Plan, Explore Underrated, Plan Midnight, Hidden Gems, Eat Local), and navigation links to Chat, Explore, Travel, and Settings. Integrates with Sidebar component. Reference the existing Dashboard v2 JSX design.
Build Admin Page
As an Admin I want to manage city pulses, users, and travel offers from a dedicated admin panel. Implement the Admin page (v2 design) with: TopBar (logo, admin badge, breadcrumb, search, notifications, avatar), AdminSidebar (profile block, navigation menu with neon active states, circuit-board open animation), OverviewStatsBar (5 stat cards: Total Users, Active City Pulses, Pro Members, Travel Offers Redeemed, Open Tickets), CityPulseManager (filterable pulse list with edit/toggle/delete), PulseContentEditor (rich text editor, media upload, publish toggle), UserManagementPanel (data table with role filters), TravelOffersPanel (offer cards with redemption progress), ActivityFeed (horizontal timeline), SystemHealthBar, and AdminFooter. Reference the existing Admin v2 JSX design.
Build Travel Page
As a Pro Member I want to view travel fare offers, see live fare estimations, and book rides on the Travel page. Implement the Travel page (v2 design) with: reimbursement offer banner (up to 10km), destination card with maps integration, live fare estimation for autos/cabs/bikes, ride mode selector, Book Now CTA redirecting to Payment page, and Pro member badge/gating for regular users. Reference the existing Travel v2 JSX design.
Build Settings Page
As a user I want to manage my profile, security, appearance, and notification preferences on the Settings page. Implement the Settings page (v2 design) with: SettingsNav sidebar, ProfileSettings (avatar, name, phone OTP badge, email, bio), AccountSecurity (password change, 2FA toggle, Google auth, active sessions), AppearanceSettings (Light/Dark/Default mode tiles with neon selection state, neon animation toggle), NotificationPreferences (pulse-specific toggles), TravelAndOffers panel, MembershipUpgrade (plan comparison with Pro neon card), and DangerZone. Reference the existing Settings v2 JSX design.
Build Explore Page
As a user I want to browse and discover hidden gems, underrated destinations, and local favorites on the Explore page. Implement the Explore page (v2 design) with pulse-filtered discovery cards, hidden gems grid, underrated destinations section, upgrade prompt for guests (linking to Login), and city-based filtering. Reference the existing Explore v2 JSX design. Flows from Dashboard, Landing (Guest), and Sidebar.
Build Chat Page
As a user I want to start, manage and interact with city exploration chats powered by AI. Implement the Chat page (v2 design) with: chatbar supporting file attachments and voice recording, group chat creation, three-dot menu (pin, archive, delete, share, move to pulse), AI chat responses with CityZen branding, pulse categorization (Event, Food, Budget, Night, Destination), and mobile-responsive layout. Reference the existing Chat v2 JSX design. Page flows from Dashboard and Sidebar.
Build Payment Page
As a Pro Member I want to complete ride booking payment through a seamless payment interface. Implement the Payment page (v2 design) with booking summary (destination, distance, fare breakdown, reimbursement applied), payment method selection, order confirmation flow, and redirect back to Dashboard on success. Reference the existing Payment v2 JSX design. Flows from Travel page.
No comments yet. Be the first!