Summary
This course teaches you to build a feature-rich, state-of-the-art Uber clone using Expo's latest features, including Expo Router, API routes, and a real-time PostgreSQL database. You'll learn to implement complex features like splash screens, onboarding, authentication with Clerk and email verification, maps integration, custom navigation, payment processing with Stripe, and much more. The course emphasizes clean code practices, TypeScript, linters, and efficient IDE setup using WebStorm, providing a comprehensive guide to advanced mobile app development.
Key Insights
Configure Expo Router for file-based navigation, including root layout and route groups.
Expo Router is set up using a file-based system. A root `layout.tsx` handles global configurations like fonts and splash screens. Route groups like `(auth)` and `(tabs)` are created to organize navigation flows.
The onboarding flow is designed to be modular and easily customizable.
The use of separate component files for buttons, data constants, and screen layouts makes the onboarding process modular, allowing for easy modification of content and UI elements.
Implement conditional rendering for authentication status using Clerk's `useAuth` hook.
The application's root layout routes are protected using Clerk's `useAuth` hook, conditionally rendering the main app content or redirecting users to the authentication flow based on their login status.
Sections
Introduction and Course Overview
Build a 15-screen, state-of-the-art Uber clone with Expo's latest features.
The course focuses on building a comprehensive Uber clone featuring 15 screens, utilizing advanced Expo features like Expo Router, API routes, PostgreSQL database, Zustand for global state, and more. It aims to equip learners with the skills to build any mobile application.
Learn to implement common app features and Uber-specific functionalities.
Key features covered include splash screens, onboarding flows, authentication, device sensors, maps integration, custom UI components (tabs, modals, bottom sheets), Stripe payments, live driver location tracking, ride searching, destination selection, booking, route directions, ride history, and user profiles.
Utilize a modern tech stack: React Native, Expo Router, Zustand, NativeWind, Clerk, PostgreSQL.
The course utilizes a robust technology stack including React Native fundamentals, Expo Router for file-based navigation, Zustand for global state management, NativeWind for styling, Expo API routes, Stripe for payments, custom hooks for data fetching, TypeScript for type safety, ESLint/Prettier for code quality, Clerk for authentication with email verification, and Neon PostgreSQL for the database.
Access to free resources: open-source codebase, Figma design, and Discord support.
Learners gain access to a free open-source codebase, a custom Figma design for visual reference, and a dedicated Discord server for bug resolution and community support.
Recommended prerequisite: basic to medium understanding of React Native.
A foundational understanding of React Native is recommended; a crash course is suggested for those needing to build up their skills before starting this project.
WebStorm IDE recommended for enhanced developer efficiency and features.
The course introduces and recommends using WebStorm IDE, highlighting its features like smart code completion, autocompletion, bug fixing, refactoring, integrated Git, and more, to significantly boost development speed. A 90-day free trial is offered to students.
Project Setup and IDE Configuration
Set up a new React Native project using Expo CLI.
Project initialization is done via the command 'npx create expo app@latest' within the desired project directory, establishing the foundational structure for the Expo application.
Configure Neon PostgreSQL database for backend data storage.
A Neon PostgreSQL database is set up via their dashboard, providing a scalable and managed solution for storing user accounts, ride data, and other application information.
Utilize Expo Go app for real-time mobile preview and development.
The Expo Go app on a mobile device allows for real-time viewing and interaction with the application being developed by scanning a QR code generated by the Expo start command, requiring both the phone and development machine to be on the same Wi-Fi network.
Install and configure NativeWind for Tailwind CSS styling in React Native.
NativeWind is installed along with Tailwind CSS, and configuration involves setting up Tailwind CSS (`tailwind.config.js`) and adding the NativeWind Babel plugin (`babel.config.js`) to enable utility-first CSS styling similar to web development.
Configure ESLint and Prettier for code quality and formatting.
ESLint and Prettier are set up using Expo's recommended configurations to enforce coding standards and maintain consistent code formatting across the project. IDE integration with ESLint and Prettier for on-save actions is also configured.
Customize WebStorm IDE with themes, fonts, and plugins for an improved workflow.
WebStorm is customized with themes (e.g., Catppuccin), fonts (e.g., Fira Code), and plugins (e.g., Atom Material Icons) to enhance readability and developer experience. Settings like soft wrapping and toolbar cleanup are also applied.
File Structure and Navigation Setup
Clean up the default Expo project structure, removing unnecessary files and folders.
The initial project structure is streamlined by deleting unused folders like 'hooks', 'constants', 'components', 'assets', and unnecessary route files to simplify the development environment.
Configure Expo Router for file-based navigation, including root layout and route groups.
Expo Router is set up using a file-based system. A root `layout.tsx` handles global configurations like fonts and splash screens. Route groups like `(auth)` and `(tabs)` are created to organize navigation flows.
Implement a splash screen using the `app.json` configuration and assets.
A custom splash screen is implemented by configuring the `splash` property in `app.json`, pointing to an image file within the project's assets directory, which appears during application startup.
Set up custom fonts (Plus Jakarta Sans) and extend Tailwind CSS configuration.
The Plus Jakarta Sans font family is integrated, and the `tailwind.config.js` is extended to include these custom fonts and color variants (primary, secondary, etc.), making them available for use in styling.
Onboarding Screens Development
Create a multi-step onboarding experience using React Native Swiper.
The onboarding flow consists of three swipeable screens, each with illustrations, titles, and descriptions. React Native Swiper is used to manage the horizontal swiping functionality.
Develop a reusable custom button component with dynamic styling and icons.
A `CustomButton` component is created to handle various button appearances (color variants, icons) and actions. It accepts props like `title`, `onPress`, `bgVariant`, `textVariant`, and `iconLeft`/`iconRight` for maximum flexibility.
Implement navigation logic for onboarding: 'Skip', 'Next', and 'Get Started' actions.
Users can skip onboarding via a top-right button or advance through screens using swipe gestures or the 'Next'/'Get Started' button. Reaching the end navigates the user to the sign-up screen.
Define onboarding data structure and content including titles, descriptions, and images.
An array of onboarding data is stored in `constants/index.ts`, containing objects for each screen with IDs, titles, descriptions, and image sources, which are then mapped to render the UI elements.
The onboarding flow is designed to be modular and easily customizable.
The use of separate component files for buttons, data constants, and screen layouts makes the onboarding process modular, allowing for easy modification of content and UI elements.
Authentication Flow (Sign Up & Sign In)
Build reusable input field components for forms with labels, placeholders, and icons.
A `InputField` component is created to handle form inputs, featuring dynamic styling based on focus state, optional icons, secure text entry for passwords, and integration with form state management.
Implement sign-up screen with email verification using Clerk authentication.
The sign-up screen includes fields for name, email, and password. Clerk's `useSignUp` hook handles the registration process, including sending a verification code to the user's email.
Integrate Clerk's email verification process with a modal popup.
A modal component is used to prompt the user for the verification code sent to their email. Upon successful verification, the user is navigated to the main application.
Develop 'Sign In' and 'Sign Up' screens with similar UI structures for consistency.
The sign-in screen mirrors the sign-up screen's structure but omits the name field and reverses the 'Don't have an account?' link to navigate to the sign-up screen, ensuring a consistent user experience.
Implement conditional rendering for authentication status using Clerk's `useAuth` hook.
The application's root layout routes are protected using Clerk's `useAuth` hook, conditionally rendering the main app content or redirecting users to the authentication flow based on their login status.
Ask a Question
*Uses 1 Wisdom coin from your coin balance
