Build Full-stack React Native Apps with Node.js Backend

Learn the structure of a React Native app with Expo, including key folders and config files, and how to run and reload on iOS and Android emulators.

Explore how React Native core components like View, Text, TextInput, and Button drive mobile interfaces, styled with StyleSheet, and how proper structure and onPress handling are implemented.

Learn how to style React Native components using style props and style objects, using camelCase properties, and applying padding, borders, and spacing to text inputs and buttons.

Use the useState hook to capture text input and manage a to-do list in a functional React Native component. Bind the input with onChangeText and add items with onPress.

Render the todoList by mapping items to text components, apply todoItem styles, and wrap in a ScrollView to enable scrolling, using a unique key for each item.

Create a reusable header component in React Native for use across screens. Use props to render a dynamic title, such as todo list, styled with a StyleSheet.

Explore styling React Native apps with flexbox layouts, platform-specific styles, and assets like images, fonts, and icons, then build a news app layout with image cards and a favorites button.

Learn how flexbox powers layout in React Native, using flex-direction, justifyContent, and alignItems to control the main and cross axes, with practical news app development.

Learn to style a React Native app differently for Android and iOS by using the Platform API, conditional colors, and a reusable header component.

Build a three-section card component in React Native, featuring an image, a title with a fav icon, and a description, structured with three wrappers and shadows for a polished layout.

Display images in React Native using the Image component, loading locally with require from the assets folder and remotely via a web URI, then style for full-width visuals.

Learn to add custom fonts in a React Native app by downloading Ubuntu from Google fonts, installing expo-font, loading with loadAsync, and applying Ubuntu bold and Ubuntu regular via fontFamily.

Learn how to add icons in a React Native card using expo vector-icons and materialIcons, render the favorite-border icon, and place it in the same row as the title.

Explore how to add multiple screens, implement stack, tab-based, and drawer navigation, and set up bottom tabs for home and fav screens.

Create four screens for a news app—news list, details, favorites, and about—and implement navigation, refactor header and card into NewsListScreen, and test with expo.

Configure stack navigation with React Navigation to move from NewsListScreen to NewsDetailsScreen by creating AppNavigator, installing dependencies, and rendering it in App.js.

Learn to move between screens using the navigation prop in a stack navigator, navigate to NewsDetails from a tappable card, pass navigation to the card, and customize screen titles.

Add bottom tab navigation to switch between the home and favorites screens, with a stack navigator under the tabs. Configure icons and headers via screenOptions and material icons.

Master state management in a React Native app using Redux to fetch real data. Learn to set up a Redux store, create actions and reducers, and handle HTTP requests.

Redux is a predictable state container for JavaScript apps with a central store; actions trigger reducers to update state across components, and it's not tied to React or React Native.

Install redux, react-redux, redux-thunk, and devtools, then set up a redux store with createStore, combineReducers, and applyMiddleware, and wrap the app with provider for fetching news data.

Define Redux reducers as pure JavaScript functions that take the current state and an action, initialize an initial state with articles and favorites, and export a default reducer.

Define redux actions as JavaScript objects with type and payload, export FETCH_ARTICLES and ADD_FAVORITES, create fetchArticles actions, and handle them in a reducer with a switch statement to update articles.

Learn to fetch news data with the fetch API, obtain an API key from newsapi.org, and dispatch async actions in Redux to update the store via reducers.

Trigger the fetchArticles action in the NewsListScreen with useDispatch and useEffect, then select articles with useSelector and follow the data flow into the store.

Display the News API articles using a React Native FlatList, rendering each item as a card with image, title, and description.

Fix flat list display by truncating long titles and descriptions with length checks, slice, and ellipses, and resolve navigation header behavior to show back button on detail screens.

Explore debugging React Native apps with the React Native Debugger to inspect state, actions, and news data. Configure ports and enable remote debugging to monitor console, network, and performance.

Add a toggle favorite action to add or remove news items by URL, updating the reducer accordingly. Leverage the payload and the existing articles and favorites state to determine changes.

Dispatch and test a toggleFavorites action in the NewsListScreen card by passing the URL, wiring useDispatch, and updating the favorites state with useSelector and FlatList for the favorites screen.

Toggle the favorites icon in a React Native app by using useSelector to read favorites, using some to compare article URLs, and conditionally rendering a filled or bordered icon.

Build the NewsDetailsScreen by implementing null checks, using route params or redux to fetch article data, and rendering a title, image background with author, and description with a favorites toggle.

Explore the back-end for React Native apps with node.js, a runtime for executing JavaScript outside the browser, covering node scripts, module system, event module, http server, and npm.

Learn to install Node.js, verify Node and npm versions, and execute Node scripts from the terminal using app.js and console.log.

Export and import node modules using module.exports and require across files, as shown with arithmetic.js and app.js, to access functions like addNumbers and oddEvenChecker.

Learn to read files in Node.js using the core file system module, compare readFile and readFileSync, and discuss asynchronous versus synchronous behavior, paths, errors, and converting buffers to strings.

Explore the node event module as a core event-driven concept, using an EventEmitter instance to register and emit events with args, and observe on and emit behavior.

Create a Node.js web server with the http module, listen on port 3000, and handle routes like '/' and '/api/movies' to return plain text or JSON data.

Learn how to use npm packages like nodemon to automatically restart a Node.js app on file changes, configure npm init and package.json, and run with a start script.

Explore building a web server with Express.js to create a RESTful API in Node.js, handle HTTP requests, test endpoints with Postman, and use route parameters and environment variables.

Build a web server using express.js by installing express with npm, creating an index.js, defining app.get routes, and running with nodemon on port 3000.

Learn to manage port numbers with environment variables using dotenv, loading variables into process.env in express apps and using a default port when unset.

Learn to test endpoints using Postman by sending requests to the local API at http://localhost:3000/api/listing and inspecting the JSON responses.

Learn to implement route parameters in a Node.js Express API to return a single item by id, including parsing the id, finding the item in an array, and handling 404.

Use a post request to create a resource at api/listing by parsing JSON with express.json, building an object from req.body, and appending it with validation.

Update a resource using put by creating an app.put endpoint, validating the id exists, and updating type and description from the request body, demonstrated with Postman and id 1.

The lecture shows deleting a resource with a delete request in an Express.js RESTful API, including existence checks and using splice to remove the item.

Add a MongoDB database to your app and connect using Mongoose. Explore setting up schema and models and performing crud operations on json-like documents stored in collections.

Set up a cloud MongoDB Atlas cluster on the free tier, create a read-write user, whitelist your IP, and obtain a Node.js connection string to link your app.

Install mongoose, import it, and connect to MongoDB with mongoose.connect using a connection string, your username, password, and the house_app database; handle success with then and errors with catch.

Learn to visualize your database with MongoDB Compass by downloading and installing, connecting via a connection string, and replacing the db name with house_app, then verify admin and local databases.

Define the data shape for a house listing by creating a Mongoose schema in models/house.js, specifying required title and address, plus homeType, description, price, image, and year built.

Create a mongoose model named House using the HouseSchema and export it via module.exports for database interaction. This prepares you to build routes in the next video.

Create a house listing data endpoint with express router, wiring api/houses to a house model to save listings via post and req.body title, address, home type, description, price, image.

Learn to implement input validation with express-validator in a Node.js backend, creating a validate array for title, description, address, and price (numeric), and returning 422 with custom error messages.

Fetch data with a get request in a Node.js backend using Mongoose. Retrieve all houses or a single item by id with find and findById, returning results via res.send.

Update an existing item with a put request using mongoose, locate by id, validate input with express-validator, assign new values, and save the updated document.

Handle delete requests in a restful API at api/houses/:id using findByIdAndRemove in Express.js, validate with express-validator, and return the deleted item.

Build the mobile app to consume the house listing API using tabs navigation and Redux, add a post request to create data, and prepare authentication-focused sections in upcoming videos.

Initialize the React Native app with Expo CLI, create a client project, and outline folders for components, Redux, navigation, and four screens (home list, home details, about, add home).

Set up navigation with react-navigation by installing core packages and building stack and bottom tab navigators for home list, home details, add home, and about screens, wrapped in a navigation container.

Add icons to the tabs bar in the app by configuring AppNavigator with @expo/vector-icons and materialIcons, using screen options and route-based logic.

Build a reusable card component in a React Native app, featuring a title, image background with price and year overlay, and a description, with styling and asset integration.

Install and render the react-native-floating-action button in a React Native Expo app, configure right-position, onPressMain logging, and refine with container flex 1, animated false, and showBackground false.

Navigate between screens by passing the navigation prop, using navigation.navigate to move to add home and home details screens, and wiring TouchableOpacity on the card to trigger transitions.

Build the add home screen by crafting a scrollable form with title, image URL, home type, price, year built, address, and description fields, plus an add home button.

Build the home detail screen in a full-stack React Native app, featuring a scroll view with a title, image, and property rows, and set up Redux data fetching.

Add redux to a react native app by installing redux, react-redux, redux-thunk, and dev tools; create the store, reducers, and actions, then wrap the app with the provider.

Create and wire up Redux store by adding a default reducer and initial state, then import redux-thunk, define fetch houses actions, and a reducer switch to update the houses array.

Fetch and display house listing data from a running Node.js backend in a React Native app using the Fetch API, Redux dispatch, and useEffect to populate the state.

Display the fetched houses on the home list screen with useSelector and FlatList. Pass title, image, price, yearBuilt, and description to the card, truncating long text for a clean UI.

Pass the clicked card's house id to the homeDetails screen, fetch the house from state with useSelector and find, and render its title, image, homeType, price, yearBuilt, address, and description.

Create an add home form in React Native with Formik handling values and onSubmit, plus fix Android network warnings by using system IP and enable keyboard avoiding.

Enable robust form validation in a React Native app with yup and formik. Define a yup schema with required fields, min/max lengths, and numbers, and display errors on blur.

Create a home action and reducer to post a listing. Dispatch a fetch post request to the back-end with title, image, home type, price, year built, address, and description.

Dispatch the createHome action from the add home screen using useDispatch, sending form data via a post request, and handling the promise with then and catch and alerts.

Demonstrate how to display a loading spinner during API calls by using React's useState and React Native's ActivityIndicator, showing the loader centered on the screen while posting and fetching data.

Build an authentication system by setting up an express app, database with schemas, and validation with express-validator. Secure routes with jsonwebtoken and hashed passwords, and implement client-server token flow.

Initialize the node project, install express and nodemon, and create an express server in index.js. Define auth routes for register and login under api/users and test with postman.

Set up a MongoDB database by creating a cluster, configuring a user and IP access, and connecting with mongoose to define a user schema with name, email, and password.

Register a new user by importing the user model, constructing it from the request body (full name, email, password), and saving via async/await in a try/catch.

Add validation to your express app with express validator, creating checks for full name (min 2 chars), valid email, and password (min 6 chars), and return errors via validation results.

Hash passwords securely using bcrypt.js by generating a salt and hashing the password before storing it, and return only the id, full name, and email while preventing duplicate emails.

implement a login route that verifies email existence and password with bcrypt, returns 404 for invalid credentials, and adds login validation to ensure email and password are provided.

Generate and sign a jsonwebtoken on login, encoding the user id and email, then attach the token in headers and body for client use.

Protect routes with a JWT-based middleware that reads an auth-token from request headers, verifies it with a secret key from environment variables, attaches user data, and calls next.