Sign In Page (JSON)
(Authentication · User Account · Help & Support · Settings · Safety)
ROLE & OBJECTIVE
You are a senior web application architect and UX/UI designer.
Design and generate a production-ready, responsive web application
named HostelHunt.
The app must work seamlessly on:
● Desktop
● Tablet
● Mobile (fully responsive)
Use modern web standards, clean UI, accessible components, and
scalable architecture.
Do not omit, rename, or simplify any feature, text, field, or section.
1️⃣ Authentication System (Web)
✅ Sign In Page (JSON-Driven UI)
Create a Sign In page that exactly follows this structure:
{
"signInPage": {
"logoPosition": "top-centered",
"heading": "Welcome Back",
"subText": "Sign in to continue your hostel hunt",
"fields": [
"Email Address",
"Password"
],
"options": {
"rememberMe": true,
"forgotPasswordLink": true
},
"buttons": {
"primary": "Sign In",
"secondary": "Continue with Google"
},
"divider": "OR",
"footerText": "Don’t have an account? Sign Up"
}
}
Functional Requirements
● Email + password validation
● “Remember Me” checkbox
● Forgot Password link (modal or page)
● Google OAuth sign-in
● Footer link navigates to Create Account
● Accessible labels & keyboard navigation
✅ Create Account Page (JSON-Driven UI)
{
"createAccountPage": {
"logoPosition": "top-centered",
"heading": "Create Your Account",
"fields": [
"Full Name",
"Email Address",
"Password",
"Confirm Password"
],
"checkbox": "I agree to the Terms & Conditions and
Privacy Policy",
"buttons": {
"primary": "Create Account",
"secondary": "Continue with Google"
},
"divider": "OR",
"footerText": "Already have an account? Sign In"
}
}
Functional Requirements
● Password match validation
● Terms & Privacy checkbox required
● Google OAuth sign-up
● Error handling & inline feedback
● Footer link navigates to Sign In
2️⃣ Post-Login Web App Layout
🧭 Global Layout
● Top navigation bar
● User avatar dropdown
● Sidebar (desktop) / Drawer (mobile)
● Protected routes after authentication
👤 User Header (Dashboard)
Display:
● Profile Picture (editable)
● Full Name
● Unique User ID → AB-C-12345
● Email Address
● Reference Number (same as User ID)
3️⃣ Account Management
✏️ Edit Profile Page
Editable fields:
● Full Name
● Contact Email
● Phone Number
● WhatsApp Number
● Address
● City
● Bio / About Me
Button:
● Save Changes
Validation:
● Email format
● Phone number format
● Required fields
📂 Core Account Sections
● In-App Messages
● Booking History
● Help & Support
4️⃣ Help & Support (Web)
📞 Contact Options
Display clearly with clickable actions:
Call Us
● Primary: 0329-2540110
● Secondary: 0308-7106290
Email Us
● General: [Link]@[Link]
● Support: [Link]@[Link]
WhatsApp
● 0329-2540110
● 0308-7106290
Live Chat
● Status: Coming Soon
5️⃣ Settings & Preferences
🎨 Appearance
● Language selector
● Default: English
🔐 Privacy & Security
● Toggle: Share Location (On / Off)
● Privacy Notice:
We only collect essential data and never share your data with third
parties.
● Change Password
● Delete Account (confirmation modal)
6️⃣ FAQs Section
Display as a clean, searchable accordion list:
● How do I search for hostels?
● How do I contact a hostel owner?
● Can I add my hostel to the platform?
● How do I edit my hostel information?
● Draft vs Published hostels?
● How to manage room availability?
● Can I add multiple rooms?
● How do favorites work?
● Is my data secure?
● How do I report an issue?
7️⃣ Support Resources — User Guide
🎯 Purpose
Discover, compare, and book hostels confidently.
🔘 Action Buttons
● Discover
● Compare
● Book
● Review
⚙️ Essential Setup
● Create a verified account
● Add profile photo & phone/WhatsApp
● Enable location for nearby recommendations
● Allow browser notifications
🔍 Finding the Right Hostel
● Filters (type, price, facilities, city)
● Map view for comparison
● Gallery, menu, distance & credentials
● Room details (capacity, pricing, availability)
● Share hostel via link or QR code
📝 Booking & Communication Workflow
● Check Availability → Request Booking
● Add extra requirements
● In-app messaging
● Call / WhatsApp quick actions
● Track via Account → Booking Requests
8️⃣ Trust, Safety & Reviews
● Never pay before physical visit + contract
● Visit with a companion
● Check verified reviews
● Submit post-stay reviews
● Report issues instantly
9️⃣ Pro Tips
● Use Favorites as shortlist
● Share links for approvals
● Scan QR codes at hostels
● Enable email & push notifications
● Monitor notification center
🔟 Safety Guidelines
Checklist style:
● Verify hostel details
● Check ratings
● Visit before committing
● Confirm amenities
● Keep emergency contacts
● Report suspicious activity
● Read T&Cs
● Secure belongings
Button:
● Got it
1️⃣1️⃣ Need More Help Section
Available 24/7
● Primary: 0329-2540110
● Secondary: 0308-7106290
● General Email: [Link]@[Link]
● Support Email: [Link]@[Link]
Button:
● Call Now
1️⃣2️⃣ Web Theme & Colors (MANDATORY)
🎨 Primary Color System
● Primary Color: #47697E
● Dark Shade: used for headers, buttons
● Light Shade: backgrounds
● Ultra-Light: page surfaces
Usage Rules
● Primary buttons → dark shade
● Secondary buttons → outlined
● Background → ultra-light
● Text contrast must meet WCAG AA
✅ FINAL OUTPUT EXPECTATIONS
● Responsive web UI
● SEO-friendly structure
● Component-based architecture
● JSON-driven forms
● OAuth-ready authentication
● API-ready data models
● Accessibility compliant (ARIA, keyboard support)
Side bar
ROLE & CONTEXT
Act as a senior web application UI engineer and UX architect
with deep expertise in responsive dashboards, sidebar
navigation, Material-inspired design systems, and modern web
animations.
Design and implement a production-ready, responsive sidebar
navigation system for the Hostel Hunt web application.
The sidebar must be clean, modern, scalable, accessible, and optimized
for desktop & mobile web.
🎨 DESIGN SYSTEM & COLORS (MANDATORY)
Use the following primary color system consistently across the sidebar
UI:
● Primary Base Color: #47697E
● Primary Dark (900): Used for active states, highlights, headers
● Primary Light Variants: Used for hover states and backgrounds
● App Background: Ultra-light primary tone
● Text: High contrast (dark on light, white on dark)
Design should visually follow Material Design principles, but
implemented using standard web technologies (CSS variables
/ Tailwind / SCSS).
🧱 SIDEBAR LAYOUT REQUIREMENTS
● Fixed left sidebar
● Sticky positioning (scrolls independently from main content)
● Height: 100vh
● Smooth open/close animation
● Collapsible:
○ Expanded mode: Icons + labels
○ Collapsed mode: Icons only
● Slim mode shows hover tooltips
● Subtle section dividers for visual grouping
🔐 TOP SECTION — BEFORE LOGIN
Displayed when the user is not authenticated.
Components:
1. App Logo (top aligned)
2. Heading Text
○ “Welcome to Hostel Hunt”
3. Input Field
○ Placeholder: Name
4. Input Field
○ Placeholder: Email
5. Primary Action Button
○ Text: Sign In / Create Account
○ Full width
○ Uses primary color
○ Hover + focus states
👤 TOP SECTION — AFTER LOGIN
Displayed when user is authenticated.
Components:
1. Profile Image
○ Circular
○ Small size
2. User Name
3. User Email
4. QR Code / Barcode
○ Used for web check-in
○ Click opens a modal
QR / Barcode Modal:
● Centered overlay modal
● Enlarged QR / Barcode
● Download button
● Close icon
● Background dim overlay
🧭 MAIN NAVIGATION MENU
Each item includes icon + label.
● Dashboard / Home
● Search Hostels
● Favorites
● My Bookings
● Account / Profile
● Messages
○ Shows unread badge
● Payments
○ Wallet
○ Cards
○ Invoices
Behavior:
● Active item highlighted
● Hover animation
● Keyboard accessible
● Divider separating sections
➕ MORE MENU SECTION
Secondary navigation group.
● Settings
● Help & Support
● Notifications
○ Includes web push notification toggle
● Refer & Earn
● Language Switcher (dropdown)
● Terms & Policies
⚙️ BOTTOM FIXED SECTION
Pinned to bottom of sidebar.
● Dark / Light Mode Toggle
● Logout Button
● App Version (example: v1.0.0)
📱 RESPONSIVE & WEB-SPECIFIC FEATURES
● Desktop
○ Sidebar visible by default
○ Collapsible toggle
● Tablet / Mobile
○ Sidebar hidden by default
○ Opens with hamburger menu
○ Overlay mode
● Animations
○ Smooth CSS transitions
○ No layout shift
● Performance
○ Lightweight
○ No unnecessary re-renders
♿ ACCESSIBILITY REQUIREMENTS
● Proper contrast ratios
● ARIA labels for:
○ Sidebar
○ Navigation
○ Modal
● Keyboard navigation support
● Focus indicators
📦 DELIVERABLE EXPECTATIONS
Generate:
● HTML structure
● CSS (or Tailwind / SCSS)
● JavaScript logic
● Optional: React / [Link] component version
● Clean, readable, production-ready code
🎯 FINAL GOAL
Create a modern web-app sidebar that feels:
● Professional
● Fast
● Intuitive
● Scalable
● Student-friendly
Pages
Home · Listings · Details · Filters · Users · Barcodes · Admin
ROLE & EXPECTATION
You are a senior full-stack web architect and UX strategist.
Extend the HostelHunt web application with the following core discovery, listing, detail,
filtering, user-access, barcode, and admin systems.
All features must be:
● Responsive (desktop / tablet / mobile)
● Optimized for performance
● SEO-friendly where applicable
● Permission-aware (Guest vs Logged-in User vs Admin)
1️⃣ Home Screen (Web)
🗺️ Map Section
● Interactive map (Google Maps / Mapbox equivalent)
● Displays exact hostel locations
● Guest users:
○ Map visible
○ Hostel pins blurred or hidden
● Logged-in users:
○ Full, precise hostel pins visible
● Clicking a pin highlights the corresponding hostel card
🧱 Hostel Cards Below Map
● Grid layout
● 2 cards per row
● Maximum 4 cards visible initially
● Infinite scroll or “Load more” after first set
🔍 Global Search Bar
Search supports:
● Hostel name
● City
● Features (WiFi, Mess, AC, etc.)
Search updates results in real time.
2️⃣ Hostel Cards (Grid View)
Each hostel card must display:
● Hostel type logo
○ Boys / Girls / Co-ed
● Main hostel image
● Hostel Name
● Location (City + area)
● Short description (1–2 lines)
● Rating stars (average rating)
● Share Hostel button (link / QR)
● Entire card clickable
Interaction
● Clicking card → opens Hostel Full Detail Page
3️⃣ Hostel Full Detail Page
🔝 Top Information Section
● Image slider (multiple photos)
● Hostel name
● Full address
○ Copy address button
○ Share address button
● “View on Map” button
🧾 Barcode / QR Code
● Unique auto-generated barcode per hostel
● Options:
○ Save
○ Share
○ Scan
● Scanning barcode:
○ Opens hostel detail page
○ OR saves hostel to user account
💰 Fees & Rules
Display clearly:
● Admission fee
● Security fee (if any)
● Gate timing (if applicable)
● Visiting hours
● Allowed / Not allowed rules
🏷️ Facilities Section
Show as icons + labels:
● Mess (with timing)
● WiFi
● Laundry
● Security
● Parking
● Gym
● Study Room
● AC
● Hot Water
● Any additional facilities
📞 Contact Section
Buttons:
● Phone Call
● WhatsApp Message
(Disabled for guest users → prompts login)
🛏️ Rooms Section
For each room:
● Room images
● Price
● Capacity
● Availability status
⭐ Reviews Section
● Average rating
● User reviews list
● “Add Review” option (login required)
📍 Nearby Section
Auto-generated nearby places:
● Schools
● Universities
● Bus stops
● Markets
Each includes:
● Name
● Distance indicator
4️⃣ Filters System (Advanced)
Filters apply instantly (no Apply button).
Sorting
● Relevance
● Price: Low → High
● Price: High → Low
● Near Me
City Filter
● All
● Islamabad
● Bahawalpur
● DG Khan
● Faisalabad
● Gujranwala
● Gujrat
● Lahore
● Multan
● Rawalpindi
● Sahiwal
● Peshawar
● Quetta
● Karachi
● Gilgit
● Muzaffarabad
● Sargodha
Type
● All
● Boys
● Girls
Price Range
● Slider-based selection
Mess
● All
● Included
● Not Included
Facilities (Checkboxes)
● WiFi
● Laundry
● Security
● Parking
● Gym
● Study Room
● AC
● Hot Water
5️⃣ User Access System
👤 Guest Mode
Guests can:
● View hostel list
● View hostel cards
● View blurred map
Guests cannot:
● View exact locations
● Save hostels
● Leave reviews
● Contact hostels
● Scan barcodes
🔐 Login Required For
● Viewing exact hostel location
● Saving hostels
● Leaving reviews
● Contacting hostels
● Scanning hostel barcodes
6️⃣ Barcode / QR System
● Each hostel has a unique auto-generated barcode
● Barcode stored in admin panel
● Users can:
○ Scan barcode → open hostel details
○ Save scanned hostel to favorites
7️⃣ Admin Panel (Web Dashboard)
🛠️ Hostel Management
● Create / Read / Update / Delete hostels
● Add:
○ Rooms
○ Fees
○ Photos
○ Facilities
● Auto-generate barcode per hostel
📊 Analytics Dashboard
For each hostel:
● Total views
● Shares
● Contact clicks
● Saves / favorites
📝 Reviews Management
● View reviews
● Moderate / remove inappropriate reviews
8️⃣ Additional Improvements & Advanced Features
🤖 Smart Recommendations
● “Hostels near your university”
● Based on:
○ Location
○ User behavior
○ Search history
📦 Offline Mode
● Saved hostel cards accessible offline
● Cached images + basic details
⏱️ Real-Time Availability
● Hostel owners toggle room availability
● Updates reflect instantly
🚨 Safety Features
● Emergency contact button
● Quick access from hostel detail page
🌐 Multi-Language Support
● English (default)
● Urdu
● Language switch persists across sessions
✅ FINAL DELIVERY REQUIREMENTS
● Component-based web architecture
● API-ready data models
● Role-based access control
● High performance & lazy loading
● Clean UI with accessibility support
● SEO-optimized pages
Advanced featrures
✅ ADVANCED FEATURES FOR YOUR
WEB APP
(All additions perfectly fit your existing structure)
🔥 1. AI-Enhanced Features
AI Search Enhancer
● Smart search that understands natural language
“hostel near COMSATS with laundry + low budget”
● Auto-suggest hostels based on:
○ user behavior
○ city trends
○ peak seasons
○ preferred facilities
AI Chat Assistant
● Answers hostel questions
● Helps compare hostels
● Guides through booking steps
● Helps solve queries inside Help & Support
AI Review Analyzer
● Summarizes hostel reviews into:
○ Pros
○ Cons
○ Safety rating
○ Cleanliness score
○ Owner responsiveness score
🔥 2. Hostel Verification System
(Advanced Trust Layer)
Add these to increase trust:
● Verified Hostel Badge
● KYC verification for hostel owners
● Verified Documents Upload:
○ CNIC
○ Rental license
○ Business ownership proof
● On-site verification (Admin marks as Verified)
This drastically reduces scams.
🔥 3. Advanced Booking & Inquiry
System
You already have requests — enhance it:
Smart Booking
● Real-time availability toggle (you already listed)
● Live bed/room availability per room
● Auto-expire old booking requests
Advanced Inquiry Flow
● Add custom questions on hostel owner's side:
○ “Preferred move-in date”
○ “Do you need mess?”
○ “Do you want balcony/AC?”
Inquiry-to-Booking Pipeline
1. User sends inquiry
2. Owner replies
3. User confirms → becomes a “Soft Booking Request”
4. Owner approves → “Reserved for 24 hours”
5. If not visited → auto-expires
🔥 4. User Reputation System
Help filter out bad-behavior users:
● Users gain “Trust Score”
○ Completing profile
○ Positive review ratings
○ Verified phone & WhatsApp
● Hostel owners see a small tag:
“Trusted User • 85%”
🔥 5. Location & Map Features
(Advanced)
You already show a map; upgrade it:
Heatmaps
● Areas with many hostels
● Areas with high reviews
● Areas with cheap hostels
Safety Layer
● “Safe Area” indicator based on:
○ police station proximity
○ lighting
○ crowds
○ reviews mentioning “safe”
Distance Intelligence
● Auto-calc distance:
○ University → Hostel
○ Bus stop → Hostel
○ Market → Hostel
● Add walking time, driving time, bike time
🔥 6. Hostel Comparison Tool
Let users select 2–3 hostels and compare:
● Prices
● Rooms
● Facilities
● Ratings
● Owner response time
● Distance
This feature increases user engagement and conversion.
🔥 7. Payment-Ready Framework (Future
Proof)
Even if not launching payments now:
Prepare the structure for:
● Token-based reservation (small fee)
● Full payment (future)
● Refund logic
● Transaction history
● Payment dispute center
🔥 8. Gamification (Boost Engagement)
Add simple game-like rewards:
● Completing profile → 10 points
● Leaving review → 5 points
● Verifying email → 5 points
● Sharing hostel link → 2 points
● Referral → 30 points
Points unlock:
● Early access to new hostels
● Exclusive filters
● Priority inquiry visibility
🔥 9. Advanced Notifications Center
You already have notifications — upgrade:
Notification Types
● Booking status
● New message
● Price drops
● New hostel in city
● Nearby hostels when user moves location
● Safety alerts (e.g., area warnings)
Notification Channels
● Web push
● Email
● WhatsApp (optional in future)
🔥 10. Analytics for Hostel Owners (Pro
Dashboard)
Upgrade the admin owner dashboard:
Owner Metrics
● Profile views
● Inquiries received
● Inquiry conversion %
● Room occupancy chart
● Most saved hostel
● Traffic by city
● Peak inquiry times
Hostel Performance Score
Auto-generated rating based on:
● Reviews
● Response time
● Profile completeness
● Availability accuracy
🔥 11. Offline Mode for Web (PWA
Upgrade)
You already have offline saved cards — expand it:
● Cached hostel images
● Cached hostel details
● Offline reviews (synced when online)
● Offline map snapshot
● Add to Home Screen installable version
🔥 12. Security Upgrades
Enhance your Privacy + Security section:
Backend Security
● JWT + rotating refresh tokens
● Rate limiting
● Anti-spam for reviews
● Auto-flag suspicious activity
● IP monitoring for fake accounts
User Account Protections
● Login alerts
● Device management
● 2FA (OTP, WhatsApp, email)
🔥 13. Super Admin Tools (Internal Only)
Add these to administrative control:
● Suspend hostel instantly
● Suspend user
● Review filter (AI spam detection)
● Duplicate hostel detection
● Fraud detection alerts
● Monthly report export (CSV/PDF)
🔥 14. SEO + Shareability Enhancements
People search hostels on Google. Add:
● SEO-optimized hostel pages
● WhatsApp share card preview
● Social share previews
● Canonical URLs
● Sitemap auto-generation
🔥 15. Future-Proof Extra Features
For later growth:
● Student ID verification for discounts
● University-partner hostels list
● “Find roommates” module (optional future)
● Safety check-in system (“I’ve reached my hostel safely”)
⭐ FINAL RESULT
Your idea is already strong. With these advanced upgrades, it becomes a full professional
hostel marketplace with:
● AI
● trusted verification
● advanced map + booking + comparison
● admin + owner analytics
● future-proof systems (payment-ready, PWA, offline mode)
Firebase
1️⃣ Firebase Initialization (DO NOT
CHANGE KEYS)
📁 src/firebase/[Link]
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: "AIzaSyDlI6EsutDTLWTLAO3Ns32GKfq3KmWCprk",
authDomain: "[Link]",
projectId: "hostelhunt-project",
storageBucket: "[Link]",
messagingSenderId: "763390331865",
appId: "1:763390331865:web:6b9c97b122555ac24f27c8",
measurementId: "G-V17C8Y8BSC"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
export { auth };
2️⃣ Auth Service (ALL AUTH LOGIC IN
ONE PLACE)
📁 src/firebase/[Link]
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut,
GoogleAuthProvider,
signInWithPopup,
onAuthStateChanged,
updateProfile
} from "firebase/auth";
import { auth } from "./firebase";
// Google Provider
const googleProvider = new GoogleAuthProvider();
/* ======================
SIGN UP (EMAIL)
====================== */
export const signUpUser = async (name, email, password) => {
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
);
await updateProfile([Link], {
displayName: name,
});
return [Link];
};
/* ======================
SIGN IN (EMAIL)
====================== */
export const signInUser = async (email, password) => {
const userCredential = await signInWithEmailAndPassword(
auth,
email,
password
);
return [Link];
};
/* ======================
GOOGLE AUTH
====================== */
export const signInWithGoogle = async () => {
const result = await signInWithPopup(auth, googleProvider);
return [Link];
};
/* ======================
LOGOUT
====================== */
export const logoutUser = async () => {
await signOut(auth);
};
/* ======================
AUTH STATE LISTENER
====================== */
export const onAuthChange = (callback) => {
return onAuthStateChanged(auth, callback);
};
3️⃣ Auth Context (GLOBAL USER STATE)
📁 src/context/[Link]
import { createContext, useContext, useEffect, useState } from
"react";
import { onAuthChange } from "../firebase/authService";
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const unsubscribe = onAuthChange((currentUser) => {
setUser(currentUser);
setLoading(false);
});
return unsubscribe;
}, []);
return (
<[Link] value={{ user, loading }}>
{!loading && children}
</[Link]>
);
};
export const useAuth = () => useContext(AuthContext);
Wrap your app:
<AuthProvider>
<App />
</AuthProvider>
4️⃣ Sign Up Page (Create Account)
📁 src/pages/[Link]
import { useState } from "react";
import { signUpUser, signInWithGoogle } from
"../firebase/authService";
export default function SignUp() {
const [form, setForm] = useState({
name: "",
email: "",
password: "",
confirm: "",
agree: false,
});
const handleSubmit = async (e) => {
[Link]();
if ([Link] !== [Link])
return alert("Passwords do not match");
if (![Link])
return alert("You must accept Terms & Privacy Policy");
try {
await signUpUser([Link], [Link], [Link]);
alert("Account created successfully");
} catch (err) {
alert([Link]);
}
};
return (
<form onSubmit={handleSubmit}>
<input placeholder="Full Name" onChange={e =>
setForm({...form, name:[Link]})} />
<input placeholder="Email Address" onChange={e =>
setForm({...form, email:[Link]})} />
<input type="password" placeholder="Password" onChange={e =>
setForm({...form, password:[Link]})} />
<input type="password" placeholder="Confirm Password"
onChange={e => setForm({...form, confirm:[Link]})} />
<label>
<input type="checkbox" onChange={e => setForm({...form,
agree:[Link]})} />
I agree to Terms & Privacy Policy
</label>
<button type="submit">Create Account</button>
<button type="button" onClick={signInWithGoogle}>
Continue with Google
</button>
</form>
);
}
5️⃣ Sign In Page
📁 src/pages/[Link]
import { useState } from "react";
import { signInUser, signInWithGoogle } from
"../firebase/authService";
export default function SignIn() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleLogin = async (e) => {
[Link]();
try {
await signInUser(email, password);
} catch (err) {
alert([Link]);
}
};
return (
<form onSubmit={handleLogin}>
<input placeholder="Email Address" onChange={e =>
setEmail([Link])} />
<input type="password" placeholder="Password" onChange={e =>
setPassword([Link])} />
<button type="submit">Sign In</button>
<button type="button" onClick={signInWithGoogle}>
Continue with Google
</button>
</form>
);
}
6️⃣ Route Protection (CRITICAL)
📁 src/components/[Link]
import { Navigate } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
export default function ProtectedRoute({ children }) {
const { user } = useAuth();
return user ? children : <Navigate to="/signin" />;
}
Usage:
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
7️⃣ Guest vs Logged-In Logic (Your App
Requirement)
if (!user) {
// Hide exact map pins
// Disable contact buttons
// Disable reviews
}
Firebase user object controls everything.
8️⃣ Logout Button
import { logoutUser } from "../firebase/authService";
<button onClick={logoutUser}>Logout</button>
9️⃣ Firebase Console CHECKLIST
(IMPORTANT)
In Firebase Console → Authentication:
✅ Enable Email/Password
✅ Enable Google Provider
✅ Add your domain in Authorized Domains
✅ Set password strength
✅ Enable persistent login
✅ RESULT
You now have:
✔ Fully working Firebase Authentication
✔ Email + Google Sign In/Up
✔ Persistent login
✔ Guest vs Auth user control
✔ Secure & scalable setup
✔ Ready for HostelHunt features (maps, reviews, saving, admin)
Tab 6
Primary
(MaterialColor) se (900: [Link])
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'HostelHunt',
navigatorKey: navigatorKey,
theme: ThemeData(
primarySwatch: MaterialColor(0xFF47697E, {
50: [Link],
100: [Link],
200: [Link],
300: [Link],
400: [Link],
500: [Link],
600: [Link],
700: [Link],
800: [Link],
900: [Link],
}),
scaffoldBackgroundColor: [Link],
visualDensity: [Link],
),
home: SplashScreen(nextScreen: MainNavigationScreen()),
debugShowCheckedModeBanner: false,
);
}