Summary
Highlights
This section introduces React Native as a powerful tool for building cross-platform mobile applications. The course promises to teach the creation of three full-stack mobile applications from start to finish. It highlights the frustrations of new mobile engineers and positions itself as a comprehensive solution, covering React Native, Expo, Tailwind CSS, TypeScript, Google authentication, Appwrite, Zustand, and Sentry. The goal is to equip learners with the skills to get hired as mobile developers.
A crash course on React Native, explaining its core concepts, popularity, and how it functions under the hood. It draws parallels between React Native and Next.js, emphasizing file-based routing, component-driven architecture, and API routes. The section also details React Native's new architecture (JSI, Turbo Modules, Fabric) for improved performance, cross-platform compatibility, hot reloading, and a growing community. Expo is introduced as the recommended framework for getting started.
This part focuses on setting up the development environment for the movie app. It covers essential React Native components like View, TouchableOpacity, Image, FlatList, ScrollView, SafeAreaView, and TextInput. The section guides through project file and folder structure, TypeScript configuration, package management, and Expo app configuration. It demonstrates initial app setup and explains the purpose of various configuration files.
This section details the integration of Nativewind for Tailwind CSS styling in React Native. It covers the installation process, configuration of `tailwind.config.js` and `babel.config.js`, and the creation of `globals.css`. Custom themes and colors are extended within the Tailwind configuration, allowing for consistent and scalable design practices. Troubleshooting tips for ensuring styles are applied correctly are also provided.
Route creation for the real estate app is covered, following a file-based routing system similar to Next.js. Authentication routes (`signin`, `signup`) and tab-based navigation routes (`explore`, `profile`) are established within route groups. A dynamic route for property details (`properties/[id]`) is also created, demonstrating how to extract route parameters.
This segment explains file-based routing in React Native using Expo Router, similar to Next.js. It demonstrates how to create static and dynamic routes, and implement route grouping. The focus then shifts to building a custom bottom tab navigation bar, configuring `_layout.tsx` files for tab screens, defining custom icons, and applying extensive styling to create a visually appealing and functional navigation system.
A brief but important lesson on customizing the app icon and splash screen using `app.json`. It demonstrates how to path image assets for different platforms (iOS, Android, web) and how to update the app's display name. This ensures a professional first impression and compliance with platform-specific branding guidelines.
This part begins the UI development of the home screen, starting with a background image and a scrollable container. A reusable `SearchBar` component is created, demonstrating input fields and event handling. The use of `FlatList` for efficient rendering of movie data is introduced, showing how to display titles from fetched data. The section emphasizes modularity by passing functions and placeholders as props to child components.
This section guides through integrating with The Movie Database (TMDB) API to fetch movie data. It covers obtaining an API key, setting up environment variables (`.env`), and creating a reusable `fetchMovies` function. This function is designed to handle both popular movie listings and search queries, showcasing a structured approach to API calls that can be easily extended for future functionalities.
To enhance data fetching efficiency and code reusability, a custom `useFetch` hook is developed. This hook centralizes logic for API requests, managing loading, error states, and providing a refetch mechanism. It abstracts away boilerplate code, allowing components to focus solely on rendering data while the hook handles the complexities of asynchronous operations.
This part brings together the `useFetch` hook and `fetchMovies` function to display a list of movies on the home screen. It leverages `FlatList` with `numColumns` to present movies in a grid layout. A `MovieCard` component is introduced to encapsulate the rendering of individual movie details (image, title, rating, release year), showcasing how to dynamically render content and apply styling.
The search screen is developed, reusing concepts from the home screen for layout and data fetching. It introduces a search input and implements debouncing to optimize API calls, preventing excessive requests with every keystroke. The `useFetch` hook is configured for manual fetching based on user-initiated searches, and `FlatList`'s `ListEmptyComponent` is used to display appropriate messages when no results are found.
This segment introduces a custom algorithm for displaying trending movies based on user search activity. Appwrite is utilized as a Backend as a Service (BaaS) to store and analyze search metrics. The process involves setting up Appwrite, creating a 'metrics' collection, defining attributes (search term, count, movie ID, title, poster URL), and implementing functions to update and query these metrics. This demonstrates how to build dynamic and personalized app features.
Building on the trending metrics, this section focuses on displaying these movies in a visually appealing horizontal carousel on the home screen. It uses a `FlatList` configured for horizontal scrolling and introduces a `TrendingCard` component. The `TrendingCard` displays movie posters, titles, and unique ranking numbers, incorporating `MaskedView` for a creative visual effect.
This section focuses on creating a detailed movie information page. A `fetchMovieDetails` function is implemented to retrieve specific movie data from TMDB. The page uses a `ScrollView` to accommodate extensive content and custom `MovieInfo` components to display details like overview, genres, budget, revenue, and production companies in a structured format. A 'Go Back' button is implemented using `router.back()` to enhance navigation.
Basic UI for the 'Profile' and 'Saved' pages is created using `SafeAreaView` and placeholder icons and text. This section serves as an exercise for learners to extend the app further, suggesting implementation of features like saving favorite movies using Appwrite and developing a full user profile. It reinforces concepts of UI structure and component reuse.
An introduction to the second project: a full-stack real estate application. The overview highlights key features to be built, including Google authentication, dynamic routing, centralized data fetching (mimicking Tanstack Query), state management, database design, and clean code practices. The project will use Expo, Appwrite, TypeScript, and Tailwind CSS, aiming to build professionally-scaled applications.
This part details the initial setup of the real estate application using `create-expo-app`. It explains the basic file and folder structure generated by Expo, including `tsconfig.json`, `package.json`, `app.json`, and the app's routing capabilities. The `app.json` configuration, especially the 'new architecture' feature of React Native (Fabric, Turbo Modules, JSI), is deeply discussed.
Integration of Nativewind (Tailwind CSS for React Native) is detailed, covering installation, configuration of `tailwind.config.js`, `babel.config.js`, `metro.config.js`, and `globals.css`. Troubleshooting common setup issues and ensuring styles are correctly applied across the application are emphasized. Customizing the Tailwind theme with specific colors and fonts from the design is also a key focus.
This section explains how to implement custom fonts and manage global assets (icons, images) within the real estate app. It covers loading fonts using `expo-font` within the main `_layout.tsx` file and configuring `app.json` for splash screen and icon paths. Handling asset imports in TypeScript using `images.d.ts` is also demonstrated to prevent type errors.
The visual development of the sign-in screen is covered. It uses `SafeAreaView` for consistent UI across devices, `ScrollView` for content overflow, and custom components like `CustomInput` and `CustomButton`. The design includes a background image, app logo, welcome text, and a 'Continue with Google' button, showcasing interactive elements and basic form structure.
This part focuses on integrating Appwrite as the BaaS solution for authentication and database management. It covers creating an Appwrite project, linking it to the React Native app, and setting up Google OAuth. Environment variables for Appwrite project ID and endpoint are configured. The foundation for robust authentication is laid out.
Implementation of Appwrite SDK within `appwrite.ts` for handling user authentication (login, logout, `createUser`). It sets up the Appwrite client with endpoint and project ID. Functions for creating user accounts, generating avatar URLs, and managing user sessions are detailed. It emphasizes the importance of secure and efficient interaction with the backend services.
This section refines the authentication flow by developing a `useAppwrite` custom hook for generic API calls with state and error handling. It also introduces a global `AuthContext` to manage user authentication state (`isAuthenticated`, `user`, `isLoading`). This ensures user data is consistently available throughout the app and redirects users appropriately based on their login status.
Detailed guide on implementing a bottom tab navigation using Expo Router's `Tabs` component. It covers configuring `Tabs.Screen` for home, explore, and profile pages, setting custom titles and icons, and styling the tab bar for a modern, floating aesthetic. This provides a clear, intuitive way for users to navigate between main sections of the app.
The profile screen UI is built, displaying user information and a settings menu. It uses `SafeAreaView` and `ScrollView`, incorporating custom `SettingsItem` components for reusable menu entries. The `logout` functionality is integrated, showing how to clear user sessions and redirect. The section also fetches and displays real user data (avatar, name) from the global authentication state.
Development of the homepage UI begins, featuring a personalized greeting, a search component, and sections for 'Featured' and 'Recommended' properties. Custom `Card` and `FeaturedCard` components are introduced to display property details efficiently. The implementation focuses on responsive design and interactive elements, preparing for real data integration.
This part focuses on structuring the database in Appwrite for the real estate app. It involves creating collections for 'agents', 'galleries', 'reviews', and 'properties', defining their attributes (name, email, avatar, image URLs, descriptions, prices, ratings, relationships). The importance of proper data modeling, especially for relationships (one-to-many, many-to-one), is highlighted to ensure scalability and maintainability.
Database seeding is introduced as a method to populate the Appwrite database with initial dummy data for testing. It involves creating `data.ts` with predefined arrays of real estate information and a `seed.ts` file that programmatically uploads this data to the Appwrite collections. Troubleshooting permissions and attribute mismatches during the seeding process is also covered.
Implementation of functions (`getLatestProperties`, `getProperties`) in `appwrite.ts` to fetch data from the Appwrite database. `getLatestProperties` is used for featured listings, while `getProperties` handles dynamic filtering and search queries. The `useAppwrite` custom hook simplifies data fetching, integrating seamlessly with parameters for categories, search queries, and pagination.
Real-time property data is integrated into the homepage. The `FeaturedCard` and `Card` components are updated to dynamically display fetched images, names, addresses, and prices. `FlatList` is configured to efficiently render these cards, including handling empty states with a `NoResults` component. The use of indexes in Appwrite for full-text search is also demonstrated.
The explore page is developed, sharing much of its functionality with the homepage but optimizing for broader property browsing. A `SearchBar` component is implemented with debouncing for efficient search queries. A horizontal `Filters` component allows users to select property categories, with the active filter reflected in the URL search parameters, similar to web-based filtering.
Introduction to the third project: a six-screen food delivery app. This overview emphasizes building a production-ready application with features like email/password authentication, fluid tab and stack navigation, a home screen with real-time offers, a search screen with filters, a user profile, and robust cart logic with add-ons. It highlights the use of Expo, Native Wind, Zustand, Appwrite, and Sentry for a modern tech stack.