Create an app like rapido which should not look like rapido but the interface should be smooth and clear. It should have options of auto ride, bike ride, car ride and grocery delivery, medicine delivery. As soon as you open the app, Pokran should appear with animation and the logo of the app should appear and the tagline of the app should be Pokran's own right. As soon as you open the app, the option of register and login should appear first. Login should be done with mobile number and OTP in FIR register. In this app, at the bottom near home, there should be my ride near home, wallet near my ride and profile icon near wallet. When you touch my ride, the option should open there as to where we have booked the right and till where it has been booked. All the details should be displayed as to where my rider has reached on the home page. I should specify the ride options above like bike ride, car right, taxi right, grocery delivery, medicine delivery should be written. Drop and pickup car should be displayed above it. There should be an option to use location for pickup and an option to use location for drop and there should be a map above both of these. After the location is selected, the option to book ride should be displayed. There should be an option to get up and show how much it costs from here to here like Rs. 70 from Pokhran Gandhi Chowk to Railway Station. What to say for bike 50, for car 120. After the ride is booked, the location of the rider should be displayed on the map. In that, the exact location has to be entered using GPS. You should also get the exit location. wallet It should show our balance It should be written there how much available balance we have and there should be a recharge option Our name should be there in the profile to add money There should be an option for edit profile ratings, information about customer care Red color at the top There should be a logout option There should be an option for changing the theme of the app like dark light or as per your mobile This app should run with a smooth transaction It should have three dots on the top left side of the home page Above that we can see all the options like our profile on the right etc
Now let me install the dependencies I'll need for this app and then build it:
Now let me update the globals.css with the Pokran theme (red primary color) and create all the necessary components:
Now let me create the main page that ties everything together:
Now let me verify the app is working by checking for any errors:
The app is working! I can see the splash screen completed and the welcome/auth screen is showing. Let me test the login flow:
The login screen is working. Let me fill in the phone number and complete the login flow:
The OTP screen is showing. Let me enter an OTP and complete the login:
Excellent! The home screen is now showing with the map, pickup/drop location inputs, and the bottom navigation with Home, My Rides, Wallet, and Profile tabs. Let me scroll down to see more and then test the other screens:
The ride options (Bike, Auto, Car, Taxi) and delivery services (Grocery, Medicine) are all showing. Now let me test booking a ride:
The pricing is showing now (₹50 for Bike, ₹70 for Auto, ₹120 for Car, ₹150 for Taxi, ₹30 for Grocery, ₹40 for Medicine). The Bike ride is selected. Let me scroll down to see the book button:
The estimated fare card is showing ₹50 for the Bike ride from "Pokhran Gandhi Chowk to Railway Station" with the "Book Bike Ride" button. Let me book this ride:
Excellent! The ride tracking screen is showing with the rider details (Rahul Kumar, RJ-14-AB-1234), pickup/drop locations, fare details, and Cancel/Complete Ride buttons. Let me complete this ride and then check the other screens:
Now let me check the My Rides screen:
The My Rides screen shows the completed ride with all details. Now let me check the Wallet screen:
The Wallet screen is showing with the balance (₹0), Add Money button, and quick actions (Payment Methods, Transaction History). Now let me check the Profile screen:
Excellent! The Profile screen shows User info (name, 5 Rating, phone number, email), Settings with App Theme (Light), and Customer Care. Let me scroll down to see the logout button and theme switcher:
The Profile screen shows the red Logout button with all the settings including App Theme (Light/Dark/System options) and Customer Care. Let me test the theme switcher:
The theme selector modal is working with Light, Dark, and System options! Let me test the dark mode:
The dark mode is working perfectly! Let me check the home screen in dark mode:
The dark mode looks fantastic! The app is fully functional with all the requested features. Let me also test the side menu:
The side menu is working with the 3-dot/menu button on the top left showing user info, Customer Care, and Logout options. The app is complete!
I've successfully built the Pokran ride-booking app with all the requested features:
Summary of Features Implemented:
1. Splash Screen
- Animated logo with "P" icon
- Brand name "POKRAN" with smooth animation
- Tagline "Pokran's own ride"
- Loading animation dots
2. Authentication
- Welcome screen with Login/Register options
- Mobile number input with OTP verification
- Registration with name and email fields
- Smooth transitions between screens
3. Home Screen
- Header with menu (3-dots) on left and user icon on right
- Interactive map using Leaflet
- Pickup and Drop location inputs with GPS options
- Ride options: Bike (₹50), Auto (₹70), Car (₹120), Taxi (₹150)
- Delivery services: Grocery (₹30), Medicine (₹40)
- Pricing display when locations are entered
- Book ride button with fare estimate
4. Bottom Navigation
- Home, My Rides, Wallet, Profile tabs
- Active tab indicator animation
5. My Rides Screen
- Complete ride history
- Status badges (Completed, Ongoing, Booked, Cancelled)
- Route details with pickup/drop points
- Rider info and booking time
6. Wallet Screen
- Available balance display
- Add Money feature with quick amounts (₹100, ₹200, ₹500, ₹1000)
- Payment Methods and Transaction History options
7. Profile Screen
- User info with name, phone, email, rating
- Edit profile option
- Theme switcher (Light/Dark/System)
- Customer Care option
- Red Logout button
8. Ride Tracking
- Map with rider location
- Rider details (name, vehicle number, phone)
- Pickup/Drop locations
- Fare details
- Cancel/Complete Ride buttons
9. Side Menu
- User profile preview
- Navigation options
- Logout functionality
10. Theme Support
- Light mode
- Dark mode
- System preference mode