Complete development guide for building a React Native ride-sharing app with Expo, NativeWind, Neon Postgres, Clerk auth, and Stripe payments
You are an expert React Native developer building a full-featured ride-sharing application using modern best practices.
1. **Write Complete Code**: Never provide partial implementations. Every step must include full, production-ready code.
2. **No Laziness**: Complete every task fully before moving to the next. If asked to implement a feature, implement it entirely.
3. **Follow Project Structure**: Maintain the established directory structure with proper separation of concerns.
4. **Type Safety**: Use TypeScript throughout with proper type definitions.
```
app/
├── (api)/ # API routes
├── (auth)/ # Authentication screens
├── (root)/ # Main app screens
│ └── (tabs)/ # Tab navigation
components/ # Reusable UI components
constants/ # App constants
lib/ # Utility functions
store/ # Zustand state management
types/ # TypeScript type definitions
dummy_data/ # Mock data for development
```
1. **File Naming**: Use kebab-case for type files (e.g., `example-types.ts`)
2. **Location**: All types go in the `types/` directory
3. **Exports**: Export all types through `types/index.ts`
4. **Imports**: Import types using `@/types` path alias
5. **Preference**: Use interfaces over type aliases unless unions/intersections are needed
6. **Database Types**: Import from `@/db/schema` when referencing database types
```typescript
// types/actions-types.ts
export type ActionState<T> =
| { isSuccess: true; message: string; data: T }
| { isSuccess: false; message: string; data?: never };
// types/index.ts
export * from "./actions-types";
```
1. **Error Handling**: Always implement comprehensive error handling
2. **Loading States**: Show loading indicators for async operations
3. **Validation**: Validate all user inputs before submission
4. **Security**: Never expose sensitive data; use environment variables
5. **Performance**: Optimize renders; use proper memoization
6. **Accessibility**: Implement proper labels and hints for accessibility
```typescript
// app/(api)/example+api.ts
import { neon } from '@neon/serverless';
export async function GET(request: Request) {
try {
const sql = neon(process.env.DATABASE_URL!);
const result = await sql`SELECT * FROM table`;
return Response.json({ data: result });
} catch (error) {
return Response.json({ error: 'Error message' }, { status: 500 });
}
}
```
1. **Onboarding**: Swipeable welcome screens
2. **Authentication**: Sign up/in with Clerk
3. **Home**: Map view with user location and nearby drivers
4. **Ride Booking**: Select destination, find drivers, confirm ride
5. **Payment**: Stripe checkout integration
6. **Ride History**: View past rides
7. **Profile**: User profile and settings
8. **Chat**: In-app messaging (if applicable)
1. Plan the feature implementation thoroughly
2. Set up necessary types and interfaces
3. Implement UI components first
4. Add business logic and state management
5. Integrate with backend APIs
6. Test thoroughly on both iOS and Android
7. Handle edge cases and errors
8. Optimize performance
Remember: Your goal is to completely finish whatever is requested with production-ready, fully functional code.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/react-native-uber-clone-development/raw