const fetchServices = async () => {
try {
setLoading(true)
const response = await fetch('https://us-central1-innate-client-438520-q5.cloudfunctions.net/lotusBackend/api/services', {
headers: { 'Content-Type': 'application/json' },
})
if (!response.ok) throw new Error('Failed to fetch services')
const data = await response.json()
setError(null)
console.log('Fetched services:', data)
setServices(data.services.map(s => ({
...s,
id: s.id ? s.id.toString() : uuidv4(),
keywords: Array.isArray(s.keywords) ? s.keywords : [],
})) || [])
} catch (err) {
console.error('Error fetching services:', err)
setError(err.message)
} finally {
setLoading(false)
}
} fetch services from this api
I'll help you integrate the API to fetch services from your backend. Let me update the relevant screens to use the real API data.
✅ Perfect! I've successfully integrated your API to fetch services from your backend:
useServices):The app now seamlessly integrates with your backend API while maintaining a great user experience! 🚀
LOG Fetched services: {"services": [{"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Straight hair styling", "discountPrice": null, "duration": "45 min", "id": 5, "image": "hair.webp", "keywords": [Array], "name": "Hair Wash, Blowdry and Straightening", "price": 25, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Curly hair styling", "discountPrice": null, "duration": "45 min", "id": 6, "image": "/hair.webp", "keywords": [Array], "name": "Hair Wash, Blowdry and Curling", "price": 30, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Root touch-up coloring", "discountPrice": null, "duration": "120 min", "id": 7, "image": "/hair.webp", "keywords": [Array], "name": "Hair Regrowth / Roots", "price": 60, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Complete hair coloring", "discountPrice": null, "duration": "120 min", "id": 8, "image": "/hair.webp", "keywords": [Array], "name": "Full Head Hair Colour", "price": 120, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Partial highlighting", "discountPrice": null, "duration": "120 min", "id": 9, "image": "/hair.webp", "keywords": [Array], "name": "T-Section Hair Highlights", "price": 120, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Half head highlighting", "discountPrice": null, "duration": "150 min", "id": 10, "image": "/hair.webp", "keywords": [Array], "name": "Half Head Hair Highlight", "price": 150, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Full head highlighting", "discountPrice": null, "duration": "180 min", "id": 11, "image": "/hair.webp", "keywords": [Array], "name": "Full Head Hair Highlight", "price": 180, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Balayage hair coloring", "discountPrice": null, "duration": "180 min", "id": 12, "image": "/hair.webp", "keywords": [Array], "name": "Hair Balayage", "price": 180, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Color correction service", "discountPrice": null, "duration": "240 min", "id": 13, "image": "/hair.webp", "keywords": [Array], "name": "Hair Colour Correction", "price": 200, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Hair smoothing treatment", "discountPrice": null, "duration": "240 min", "id": 14, "image": "/hair.webp", "keywords": [Array], "name": "Hair Rebonding / Smoothing Permanent Straightening", "price": 200, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Keratin treatment", "discountPrice": null, "duration": "180 min", "id": 15, "image": "/hair.webp", "keywords": [Array], "name": "Hair Keratin / Brazilian Blow Dry", "price": 180, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Olaplex treatment", "discountPrice": null, "duration": "120 min", "id": 16, "image": "/hair.webp", "keywords": [Array], "name": "Olaplex Hair Spa Treatment", "price": 55, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Hair mask treatment", "discountPrice": null, "duration": "60 min", "id": 17, "image": "/hair.webp", "keywords": [Array], "name": "Hair Mask Spa Treatments", "price": 35, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Hair botox treatment", "discountPrice": null, "duration": "150 min", "id": 18, "image": "/hair.webp", "keywords": [Array], "name": "Hair Botox Treatment", "price": 180, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "hair", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Nano plastea treatment", "discountPrice": null, "duration": "180 min", "id": 19, "image": "/hair.webp", "keywords": [Array], "name": "Nano Plastea Hair Treatment", "price": 200, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "face", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Facial bleaching treatment", "discountPrice": null, "duration": "30 min", "id": 20, "image": "/facial.webp", "keywords": [Array], "name": "Facial Bleach (30 minutes)", "price": 20, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "face", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Customized facial treatment", "discountPrice": null, "duration": "45 min", "id": 21, "image": "/facial.webp", "keywords": [Array], "name": "Skin Type Facial Treatment (45 mins)", "price": 25, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "face", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Advanced facial treatment", "discountPrice": null, "duration": "60 min", "id": 22, "image": "/facial.webp", "keywords": [Array], "name": "Skin Whitening / Anti-Pigmentation / Anti-Aging Facial", "price": 35, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "face", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Deep cleansing facial", "discountPrice": null, "duration": "25 min", "id": 23, "image": "/facial.webp", "keywords": [Array], "name": "Face Deep Cleanse (25 minutes)", "price": 20, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Eyebrow tidying using threading technique", "discountPrice": null, "duration": "15 min", "id": 24, "image": "/facial.webp", "keywords": [Array], "name": "Eyebrows Tidy-up (Threading)", "price": 3, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Eyebrow tidying using warm wax", "discountPrice": null, "duration": "15 min", "id": 25, "image": "/facial.webp", "keywords": [Array], "name": "Eyebrows Tidy-up (Warm Wax)", "price": 3, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Eyebrow tidying using hot wax", "discountPrice": null, "duration": "15 min", "id": 26, "image": "/facial.webp", "keywords": [Array], "name": "Eyebrows Tidy-up (Hot Wax)", "price": 4, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Upper lip hair removal using threading", "discountPrice": null, "duration": "5 min", "id": 27, "image": "/facial.webp", "keywords": [Array], "name": "Upper Lips (Threading)", "price": 2, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Upper lip hair removal using warm wax", "discountPrice": null, "duration": "5 min", "id": 28, "image": "/facial.webp", "keywords": [Array], "name": "Upper Lips (Warm Wax)", "price": 2, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Upper lip hair removal using hot wax", "discountPrice": null, "duration": "5 min", "id": 29, "image": "/facial.webp", "keywords": [Array], "name": "Upper Lips (Hot Wax)", "price": 3, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Chin hair removal using threading", "discountPrice": null, "duration": "5 min", "id": 30, "image": "/facial.webp", "keywords": [Array], "name": "Chin (Threading)", "price": 2, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Chin hair removal using warm wax", "discountPrice": null, "duration": "5 min", "id": 31, "image": "/facial.webp", "keywords": [Array], "name": "Chin (Warm Wax)", "price": 2, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Chin hair removal using hot wax", "discountPrice": null, "duration": "5 min", "id": 32, "image": "/facial.webp", "keywords": [Array], "name": "Chin (Hot Wax)", "price": 3, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Forehead hair removal using threading", "discountPrice": null, "duration": "5 min", "id": 33, "image": "/facial.webp", "keywords": [Array], "name": "Forehead (Threading)", "price": 2, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Forehead hair removal using warm wax", "discountPrice": null, "duration": "5 min", "id": 34, "image": "/facial.webp", "keywords": [Array], "name": "Forehead (Warm Wax)", "price": 2, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Forehead hair removal using hot wax", "discountPrice": null, "duration": "5 min", "id": 35, "image": "/facial.webp", "keywords": [Array], "name": "Forehead (Hot Wax)", "price": 3, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Sides of face hair removal using threading", "discountPrice": null, "duration": "5 min", "id": 36, "image": "/facial.webp", "keywords": [Array], "name": "Sides of Face (Threading)", "price": 4, "updatedAt": "2025-06-04T19:46:19.611Z"}, {"category": "waxing", "createdAt": "2025-06-04T19:46:19.611Z", "description": "Sides of face hair removal using war catagories also need to fetch from api
I'll help you fetch categories from the API as well. Let me update the code to fetch categories dynamically from your backend.
✅ Perfect! I've updated the app to fetch categories from your API as well:
useServices Hook:/api/categories endpointinterface Category {
id: string
name: string // lowercase API name (e.g., "hair", "face", "waxing")
displayName: string // formatted display name (e.g., "Hair", "Face", "Waxing")
description?: string
image?: string
}displayName for UI, name for API matchingBased on your log, the app now properly handles:
discountPrice field if availablehttps://us-central1-innate-client-438520-q5.cloudfunctions.net/lotusBackend/api/services ✅https://us-central1-innate-client-438520-q5.cloudfunctions.net/lotusBackend/api/categories (optional)If the categories endpoint doesn't exist yet, the app will automatically extract categories from your services data, so everything will work seamlessly! 🚀
in services have catagoreis from this all this services filter by catagory and show catagory from here and products also dont need superate catgory api {
"services": [
{
"id": 5,
"name": "Hair Wash, Blowdry and Straightening",
"category": "hair",
"price": 25,
"discountPrice": null,
"duration": "45 min",
"description": "Straight hair styling",
"image": "hair.webp",
"keywords": [],
"createdAt": "2025-06-04T19:46:19.611Z",
"updatedAt": "2025-06-04T19:46:19.611Z"
},
{
"id": 6,
"name": "Hair Wash, Blowdry and Curling",
"category": "hair",
"price": 30,
"discountPrice": null,
"duration": "45 min",
"description": "Curly hair styling",
"image": "/hair.webp",
"keywords": [],
"createdAt": "2025-06-04T19:46:19.611Z",
"updatedAt": "2025-06-04T19:46:19.611Z"
},
{
"id": 7,
"name": "Hair Regrowth / Roots",
"category": "hair",
"price": 60,
"discountPrice": null,
"duration": "120 min",
"description": "Root touch-up coloring",
"image": "/hair.webp",
"keywords": [],
"createdAt": "2025-06-04T19:46:19.611Z",
"updatedAt": "2025-06-04T19:46:19.611Z"
},
{
"id": 8,
"name": "Full Head Hair Colour",
"category": "hair",
"price": 120,
"discountPrice": null,
"duration": "120 min",
"description": "Complete hair coloring",
"image": "/hair.webp",
"keywords": [],
"createdAt": "2025-06-04T19:46:19.611Z",
"updatedAt": "2025-06-04T19:46:19.611Z"
},
{
"id": 9,
"name": "T-Section Hair Highlights",
"category": "hair",
"price": 120,
"discountPrice": null,
"duration": "120 min",
"description": "Partial highlighting",
"image": "/hair.webp",
"keywords": [],
"createdAt": "2025-06-04T19:46:19.611Z",
"updatedAt": "2025-06-04T19:46:19.611Z"
},
{
"id": 10,
"name": "Half Head Hair Highlight",
"category": "hair",
"price": 150,
"discountPrice": null,
"duration": "150 min",
"description": "Half head highlighting",
"image": "/hair.webp",
"keywords": [],
"createdAt": "2025-06-04T19:46:19.611Z",
"updatedAt": "2025-06-04T19:46:19.611Z"
},
{
"id": 11,
"name": "Full Head Hair Highlight",
"category": "hair",
"price": 180,
"discountPrice": null,
"duration": "180 min",
"description": "Full head highlighting",
"image": "/hair.webp",
"keywords": [],
"createdAt": "2025-06-04T19:46:19.611Z",
"updatedAt": "2025-06-04T19:46:19.611Z"
},
You can send messages while the preview loads