React Native, Redux & Express - Full Stack React Native

Install node js on Mac OS by downloading from nodejs.org, running the Mac installer, and verifying with node --version, npm --version, and npx --version.

Install typescript after ensuring NodeJS is installed, then install globally via the terminal. If you encounter errors, prepend sudo and enter your password, then verify with tsc -v.

Install homebrew on macOS by copying and running the command in the terminal, entering your password, and waiting for the install to finish. Verify the installation with brew -v.

Install MongoDB on Mac OS via brew tap and brew update, using the community edition; start the MongoDB server, run mongoose, and explore default databases and port.

Install MongoDB Compass by downloading the DMG, dragging it to applications, opening the app, connecting to the MongoDB port, and viewing a visual representation of your database.

Explore what TypeScript is and why it adds types to JavaScript, including static versus dynamic typing, strong typing, type checking, safer bug-free code, and how it compiles to JavaScript.

Discover JavaScript's primitive and object types, with a focus on string, number, boolean, Bigint, undefined, symbol, and null, and understand how primitive values differ from objects.

Explore type inference in TypeScript by distinguishing primitive and object types, assigning types to variables with const and let, and using no emit on error to control compilation.

Master basic data types in TypeScript, including string, number, and boolean, using const and let. Learn how union types and reassignments affect available methods.

Define object and array types, including string, number, boolean, and array of strings, then create a reusable user type for multiple users.

Define reusable TypeScript types with the type keyword, declare optional properties like gender, and reuse the user type in multiple places to ensure error-free compilation.

Explore how to define and type functions in TypeScript, including birth year parameter, return types, and handling void, any, and object parameters with practical examples.

Explore how to define and implement interfaces in TypeScript, modeling an audio player with current song and length, play next and play previous function types, and a class-based blueprint.

Master how generic types in TypeScript let functions and components work with various data types, using angle brackets to define custom types and applying them in practice with useState.

Discover why the any type in TypeScript disables type checking, risks runtime errors, and how to avoid it by using generics or void for safer code.

Learn how to quickly provision a backend for your React Native app by downloading the server zip, installing dependencies, configuring MongoDB, Mailtrap, and Cloudinary, and running the dev server.

Guide to setting up a node typescript project with express, including creating folders, initializing npm, configuring tsconfig.json, and compiling index.ts to run a server on port 8000.

Understand what package.json, package-lock.json and node_modules do in a project, including dependencies and dev dependencies, and how npm install recreates node_modules using package.json.

learn how to set up a basic express server by importing express, creating an app, defining a home route with a get handler, and listening on port 8000.

Configure a professional TypeScript project with tsconfig options: commonjs module, ES2016 target, noImplicitAny, strict mode, esModuleInterop, and baseUrl; organize code in src, output to dist, and automate restarts with ts-node-dev.

The plan builds a crud application with create, read, update, delete. Define a root route and handle get, post, put, patch, and delete on nodes identified by unique ids.

Learn to set up a post route, test with Postman, and read JSON data from the request body using express.json and express.urlencoded middleware to return JSON.

Learn how Express middleware reads incoming data, parses JSON chunks, attaches them to request.body, and passes control with next; apply middleware to specific routes or globally using app.use.

Learn how Express middleware handles incoming data from multiple clients, including axios.post, fetch, and HTML forms, by reading request.body and preparing to store it in a database.

Set up MongoDB with mongoose in a Node project: install mongoose and types, connect to a local database via URI, handle deprecation warnings, and organize code with a db/index.ts.

Define a mongoose schema as a blueprint for documents with title and description fields, both string and trimmed, including validation and sanitization. Create the model and save nodes asynchronously.

Learn how to type a Mongoose schema with TypeScript, define node document and incoming body interfaces, enforce title as string and optional description, and create records.

Explore how MongoDB auto-generates unique _id and version-tracking __v fields for each document, and learn how to use the ID to update records in the database.

Update a document with a patch route using a unique id, fetch by id, conditionally update title and description, save, and return the updated node.

Learn how to update a document by ID using mongoose, find by ID and update, return the new document, and test changes with Postman.

Learn how to delete documents by ID using a delete route, find by ID and delete, and return JSON responses for success or not found.

Learn to read documents from a MongoDB collection in an Express app by implementing two controller methods using find and find by id, returning notes as JSON.

Explore the HTTP methods post, put, patch, and delete, and learn how to retrieve data, create records, update fully or partially, and remove resources.

Refactor your code using the mvc pattern to separate models, views, and controllers. Create a notes controller, wire imports, and type request handlers for maintainability, leveraging react views.

Refactor your Express API by introducing routers, exporting a dedicated router, and prefixing endpoints, while applying middleware at the router level and modularizing controllers and models.

Learn how React, a JavaScript library for building user interfaces, enables reusable components, state management, and fast rendering via the virtual DOM.

Learn to bootstrap a React app with veet, choose React with TypeScript, install dependencies via npm i, and run npm run dev to serve the app on localhost.

Learn JSX, a JavaScript syntax extension that looks like HTML but isn’t, and how React renders it behind the scenes. Master props, className, camelCase, and embedding JavaScript in curly braces.

Build a React app from the ground up by creating a basic app component, exporting it, and rendering jsx into a root div with ReactDOM, using strict mode.

Learn to build a basic React app with TSX, rendering a title, input, and text area, and style it with a CSS approach while introducing Tailwind CSS for scalable styling.

Explore Tailwind CSS setup for a React Native, Redux, and Express project by installing Tailwind CSS, PostCSS, Autoprefixer; initialize config, update content, and apply styles in JSX/TSX, CSS, and components.

Explore why Tailwind CSS uses utility classes to style elements, enabling custom designs with on-demand compilation, documentation search, and easy config customization.

Learn to design a responsive note form UI using Tailwind CSS in a React Native project, including inputs, textarea, spacing, borders, and a centered submit button.

Learn to build a note items UI by rendering node text, providing edit and delete actions, and styling with utility classes, while using React fragments and wrappers correctly.

Create a reusable node item component in a components folder using TSX and TypeScript, export default, type its props, and render the title with an optional prop.

Refactor and modularize a button into a reusable app button component in a React Native project, using TypeScript props for title, type, color, and an optional onClick.

Understand how React state stores input values, updates via useState and setTitle on change, and renders real-time validation like 'title is too short' for submission to a backend API.

Understand how the useState hook stores a default value and returns a value plus an updater function to enable dynamic rendering and efficient updates via the virtual DOM.

Manage form state from a single place by storing title and description in one object, using a unified handleChange with input name attributes, and logging updates.

Convert the wrapper to a form and prevent its default submission. Submit the form data, including title and description, to the backend with axios.post using async and await.

Enable cross-origin requests by adding the courses middleware to the backend API, install the package, configure app.use(course), and test the React frontend on localhost communicating with Express backend.

Render new notes by mapping the nodes state to display each node with id, title, and description, then post to the backend create method and reset the form.

Learn how the useEffect hook controls rendering with a dependency list and an empty array, and fetch notes from a backend API while understanding the virtual DOM.

Fetch all notes from the backend API, format each node as id, title, and description, and render them in the frontend using useEffect with async fetch from localhost:8000.

Wires the edit button to refill the form with the selected node’s title and description, stores the node id, and patches node/{id} to update the node.

Update the ui by syncing the frontend with the backend api, and update a single node by id to change its title and description and re-render the nodes.

Use the map method to update item data and render list items in React; learn how IDs, titles, and descriptions are mapped to JSX elements with unique keys.

Delete nodes in a React Native app with a confirmation modal, a delete request to the backend, and a UI update via filtering.

View note details in a React Native app by conditionally rendering descriptions with optional props, handling view clicks, and managing selected notes via state for a clean, dynamic UI.

Hide notes by toggling the node description visibility, updating the button title, and conditionally rendering view or description text based on the note content.

Build your podcast application using the basic mern stack you've practiced with a to-do list and note-taking app; in the next video, write the server for the podcast app.

Set up a project by creating a server, initializing npm with defaults, installing express and types, configuring ts-node and tsconfig, and wiring the entry index.ts for development.

The plan outlines building an API-driven audio app with authentication for uploading audio, playing tracks, and managing favorites and playlists, plus signup, signin, and user database setup.

Install mongoose and dotenv, set up a db folder with index.ts, connect mongoose to a local MongoDB URI via process.env.mongo_uri, and log db connected or connection failed.

Use a dot env file and dotenv to store sensitive info such as mongo uri, username, and password, read via process.env with proper import order for local and live servers.

Create a utils/variables.ts to manage environment variables, destructure process.env with string types, export mongoUri, and use it in the connect method to ensure a warning-free database connection.

Discover how to use path alias with tsconfig paths and tsconfig-paths to replace relative imports with absolute paths, configure tsconfig.json, and streamline builds in a React Native full stack project.

Define a robust user model with TypeScript and mongoose, including name, email, password, verified status, avatar, tokens, and social relations (followers, followings) with proper references and timestamps.

Register an auth route to create users via the user schema, wiring express.json and express.urlencoded, and implement a post create handler in the auth router using name, email, and password.

Extend the express request with a typed user body, define a user.ts interface for name, email, and password, and import it in routes using a path alias.

Implement Express middleware to validate name, email, and password with Yup, destructuring request.body, trimming inputs, returning errors or calling next, and connect front-end Formik validation.

Develop a user validation schema with the Yap library to validate name, email, and password. Enforce trimming, required fields, length constraints, email format, and a regex-based password rule.

Build a reusable Express middleware validator that checks req.body against a given schema (name, email, password), handles empty bodies and errors, and calls next on success.

Discover http response status codes from 200 to 422, including 200, 201, 400, 401, 403, 404, and 422, and set these statuses in Express before sending JSON responses.

Move user creation logic into a dedicated controller file and export a create method, updating imports and using status codes like 422 for errors and 201 for success.

Learn how to validate user emails in a full stack React Native app using token or OTP delivery, and test email routes with Mail Trap for safe development.

Learn to set up mail trap inbox and configure nodemailer in a Node.js project to send test emails with OTPs using environment variables and a transporter.

Define an email verification token schema and document, linking an owner to a user, storing a token with createdAt and a one-hour expiry, with MongoDB TTL checks.

Generate a six digit OTP and attach it to a user token sent by email for backend verification. Hash tokens before storage to protect sensitive data.

Hash passwords and email verification tokens before saving users with a pre save event, then use a compare token method to verify tokens.

Explore using free email templates, convert them for dynamic content with a generate template function, and plan sending images as attachments for password reset and OTP emails.

Learn to craft an HTML email with attachments in a full stack React Native app, including dynamic usernames, a Spotify welcome message, and inline images via content IDs.

The lecture demonstrates refactoring mail logic by creating a dedicated mail transporter using node mailer and a send verification mail flow with a profile including name, email, and user id.

Implement password hashing and secure password comparison within the user schema, updating to password handling and preparing for OTP-based email token validation.

Create a verify email endpoint. Validate the token against the user id, update the user as verified, and remove the token after success.

Learn how to use Postman environment variables to store a base URL, create a Spotify environment, assign a default URL, and reference it with double curly braces across requests.

Learn to validate email verification requests by building a validation schema that ensures a valid token and a proper ObjectId for user id, using transform and custom validation with Mongoose.

Learn how to implement a re-verification email flow by creating a route to regenerate tokens, remove old tokens, validate users, and send a new verification mail.

Implement a forget password route that finds the user by email, generates a tokenized reset link, sends it to the user’s email, and outlines token verification and password update flow.

Create a password reset token schema, generate secure tokens with crypto, store tokens with expiration, and build a reset link via environment variable to email via a forget password route.

Set up a verify password reset token route and controller to validate the token and user ID, respond with token validity or unauthorized when invalid, and prepare for middleware refactor.

Transform password reset validation into middleware, wire it into the auth router, and implement grant valid in the controller to respond with valid true.

Implement and secure an update password flow by validating the reset token and user, updating the password, removing the token, and emailing a success notification with a sign-in link.

Create a public route in a Node.js app by serving static files from a public folder with express.static, validating reset tokens, and showing the update password form.

Create a reset password form in public folder, replace index.html, and wire script.js and styles.css to show loader, error, and success messages while validating token and user id with api.

Extracts token and user ID from the reset password URL and validates them via a POST to auth/verify, using DOMContentLoaded and a getById helper in plain JavaScript.

Learn to update a user password with a front-end form using token validation, password checks, and a fetch request to the update-password endpoint, with real-time error and success messages.

Learn how authentication verifies a user’s identity and how authorization grants access to resources based on permissions, using tokens to secure actions in the app.

Sign in using JSON web tokens by validating email and password, signing a token with a secret key, saving it to user tokens, and returning a profile with the token.

Extract the bearer token from the authorization header, verify the jwt with the secret using a middleware, and return the user profile when authorized via the ease-auth route.

Create a must auth middleware that verifies the jwt, extracts the payload id, matches it with the stored token in database, attaches the user to the request, and calls next.

Fix middleware type errors by extending express with a request.user interface via declare global, defining user fields including optional avatar and id handling.

Secure private routes with edge auth and must auth middleware, demonstrating public vs private endpoints, token-based authorization, and preventing unauthorized access via an authorization header.