Build a Full-stack Mobile App [MERN, React-Native, Node.js ]

Create a super simple express server from scratch, initialize npm, set up index.js, install express, listen on port 5000, and test a root route returning a json message.

Structure a Node.js server by moving app.js and index.js into a server folder, exporting the app, and using a .env file to define the port.

Define and test authentication routes using express router, building sign in and sign up handlers, wiring controllers, and exposing api/auth endpoints on a local node server.

Create record routes for a MERN app by implementing a records router and a record controller with get all, get by id, update, and delete operations, then register in app.js.

Install postman and test endpoints by sending get, post, put, and delete requests to localhost. Use body parser in app.js to parse json and urlencoded data.

Install Morgan and a resource sharing middleware, wire them into app.js, and run the server in development mode to see request logs with URL, status, and time.

Define mongoose models for a user and records in MongoDB, including a record schema with fields like user, date, mean temp, max temp, wind, image src, and description. Configure the user schema with name, email, and password, enforce required and unique validations, and install mongoose to enable convenient database work.

Set up a MongoDB project on a free M0 cluster, create a user and IP access, and connect your server with Mongoose using a secure URI.

Implement server-side authentication with sign up and sign in routes and a user model, including password hashing and MongoDB interactions; test with Postman for creating, updating, retrieving, and deleting records.

Check user uniqueness on the server by querying the database for an existing email or name, using findOne with async/await, and return a 409 conflict if found.

Implement server-side user creation in the authentication flow: check for existing users, create and save a new user with name, email, and bcrypt-hashed password, handling errors and returning 201 created.

Implement the sign-in flow on the server by validating user existence, verifying passwords with bcrypt, issuing a JSON web token as a bearer token with five-day expiry.

Guard routes in a MERN app by implementing a passport-jwt middleware to protect records with a bearer token from the authorization header, using a JWT strategy and Express.js.

Develop the record controller to fetch all user records and a specific record by id using the record model, with async find operations, error handling, and 200 responses.

Build image uploads in a full-stack mobile app by configuring Multer, storing files with unique moment-based names, and validating image types within a five megabyte limit.

Finish implementing create and update record endpoints by wiring the image upload middleware, protecting routes with password, and saving records with user, image src, description, mean temp, max temp, wind.

Complete the development of the server side, configure relative upload paths, and test with Postman on localhost 5000, preparing you to build the client side with React Native and Expo.

Set up client-side development with a choice of simulators (Xcode or Android Studio), install Expo CLI globally, and explore Expo dev and Xpogo options to run apps on devices.

Explore Expo overview as a free, open source platform built around React Native. Compare Expo with React Native CLI, noting Expo's pre-built components, real-time preview, and managed workflow.

Start an expo project for a mobile app by installing dependencies with npm, creating a client folder, running the project, and testing via QR code on iOS and Android simulators.

Explore the sign up and sign in screens for the full-stack mobile app, detailing name, email, and password fields, server data transmission, and token-based login.

install react navigation native and peer dependencies, wrap the app in a navigation container, and configure a stack navigator to enable default, sign up, and sign in screens.

Outline the user flow for registration and login in a full-stack mobile app with MERN, React Native, and Node.js, covering sign up, sign in, authentication checks, and token handling.

Create a sign up screen in a React Native app using Native Base. Implement a flexbox layout with safe area and a sign up form (name, email, password) and logo.

Master signup form validation using the formic library and Yap, enforcing required name, valid email, and a minimum eight-character password, via a render-prop approach.

Abstract the sign up form into a reusable component with conditional validation for name or email and a password field, enabling seamless sign in and sign up flows.

Configure a custom axios API client in a React Native MERN app, installing axios, Expo secure store, and async storage to auto-attach tokens and handle 401 unauthorized responses.

Learn to build an authentication service by implementing signup and sign-in requests with an API client, handling tokens in secure storage, and managing async flows with error handling.

Test and finish the auth section by implementing asynchronous sign-up and sign-in flows with server validation and navigation. Enhance error handling with toasts and fix navigation and api endpoints.

Create a home screen business card for a MERN stack mobile app, featuring welcome text, date, weather data, outfit reflection, and navigation to weather, camera, and records.

Design a four-day weather forecast screen by creating reusable screen title and weather section components, using a mock data array and flat list, and wire navigation to home.

Replace mock data with dynamic user and weather data by decoding the sign-in token and storing the username, then fetch forecasts via the weather API with Redux Toolkit.

Create a weather data handler that fetches from a weather API, processes and formats the response. Store current day and forecast data via Redux for app-wide access.

Finish the home and forecast screens by implementing loading skeletons, error sections, and dynamic weather icons. Learn to manage loading states and map icons with a dictionary for React Native.

Finish implementing the home screen record functionality by adding today's clothing choices and saving the day's record to the server to guide outfits based on temperature, wind, and weather conditions.

Learn to create and update records in a full-stack mobile app (MERN, React Native, Node.js) using a Record Controller, date-based lookup, and integrated weather data.

Build a camera screen with Expo Camera, requesting permission and displaying a framed preview. Capture images as base64 data URIs, preview, retake, toggle front/back, and save to the server.

Add camera service functionality to capture, compress, and send photos to the server by building form data, leveraging expo image manipulator, and posting to the record API.

Learn to build a record list screen for a mobile app, displaying a user’s records with temperature and wind speed, using a reusable record item component and a back-to-home button.

Develop and fetch all records for a specific user by adding a get all records service, a Redux thunk, and a record list screen with loading states and UI rendering.

Build and test the record details screen by displaying date, weather data, description, and user image. Enable navigation, delete functionality, and a fullscreen image preview while passing data via props.

Finish the details screen by implementing a delete button with a confirmation alert, wiring up redux thunks to delete a record, and providing user feedback via a toast.

Implement token-based authentication with a validate token endpoint, redux-based user state, and a root navigator that shows loading while checking the token and routes to sign in or app.

Deploy the back end to a remote render service and configure environment variables for MongoDB and keys and base URLs. Enhance the mobile UI with safe area view and skeletons.

Deploy the client side of a full-stack mobile app using expo, configure app.json with weather look, icon, and splash, and test via a QR code from your expo account.

Celebrate the journey of building a full-stack mobile app from scratch, exploring technologies, libraries, and design and architecture, while inviting feedback and sharing this course.