Full Stack Next.js with Redux, Express & MongoDB

Install node.js and yarn, set up git bash and a code editor, create a Next.js app with create-next-app, then run yarn start to view at localhost:3000.

Enable static assets by importing images and styling with less, using a next.config.js to load asset types, and installing four dependencies (next-sace, next-images, zite, less).

Learn to add multiple pages in a Next.js app by building a navigation bar with next/link, creating weather and todo pages, and extracting a reusable header component for clean routing.

Learn to set up Redux in a Next.js app by installing packages, building a Redux folder with actions, reducers, and types, and wiring the store to the application.

Override the Next.js app component to configure redux by wrapping it in a redux provider, using getInitialProps to access and pass the initial state, and exporting with-redux store integration.

Connect redux to weather page using react-redux, map state and dispatch to props, import the set info action, and configure the store with a root reducer for dev tools verification.

Install the react developer tools chrome extension to inspect react elements and view component state values, including redux state, by opening dev tools and checking header, registered, and logging components.

Demonstrates adding redux state to a weather page, reading the user name from redux into the header, and updating it with a local input and set info action.

Explore Node.js and Express as a backend for your Next.js app, using asynchronous, non-blocking, event-driven APIs to handle multiple requests with a fast, single-threaded, scalable, no buffering server.

Create an express-backed routes folder with an index file, implement a get endpoint returning a test message, and enable environment variables with dotenv for development and production.

Map crud operations to http methods: post create, get read, put/patch update, delete delete. Outline starting a Next.js express server with routing, database connect, and port listening.

Learn how to set up a MongoDB connection using Mongoose, create a cluster, manage environment variables, and wire the connection into the server start process.

Explore setting up environment variables and connecting to MongoDB with mongoose, including enabling useCreateIndex, and manage asynchronous operations using promises and async/await with try/catch for error handling.

Define a user schema with name, age, email, and password, create and save a dummy user, and explore unique email constraints and basic MongoDB using Mongoose.

Learn how to add bootstrap 4 to a React app using React Bootstrap. Install the necessary packages and include bootstrap in the header to enable consistent styling across pages.

Fixes navigation state in a Next.js app by using a proper link element to preserve user-entered name across pages, and implements a responsive bootstrap navbar with spacing tweaks.

Explore building a register endpoint with express router and mongodb, hash passwords with a salt, generate a token, save new users, and return the token for authentication.

Create a login endpoint using email authentication and password hash verification. Return user details and an access token, without exposing the password.

Create a sign up and register flow using a Bootstrap modal, manage form data with React state, and capture name, age, email, and password as users type.

Build a login form by reusing the register code, switching to sign in with email and password, and toggling the sign-in modal from the header.

Create an async redux sign up action that posts registration data (name, age, email, password) to the register endpoint with axios, then handle the api response and update redux state.

Wire Redux sign up by connecting the register function to the form, show loading states, dispatch signup actions, and persist user info and token to local storage.

Implement redux sign up flow by swapping signup and register with a dropdown that shows a welcome message and user name when a token exists, enabling authentication in the app.

Implement redux sign in by following the sign up steps, creating the sign in action, wiring login flow and loading states, updating the header, and adding sign out.

Learn how to display and handle errors in a Redux-powered app, dispatch meaningful error messages, and persist and restore user data from local storage during authentication.

Move the app's IP address into the environment variables file to simplify updates as the project grows, and expose the API address to the client via next.config.

Learn to add todo features by creating a todo schema, building a todo router with create, read, update, delete operations, and implementing token validation middleware to secure endpoints.

Fetch all todos for a given email by querying the todo schema with the email in the request body, returning an array or empty if not found.

Learn how to implement the update todo endpoint with a put operation, updating title and done status by id, and handling response data in a MongoDB-backed Express app.

Delete a to-do by id using a delete endpoint, returning the updated list of a user's todos after async update or delete operations.

Refactor server code to allow bodies in certain requests by switching get to post, build an axios-based request utility with token interceptor, and add todo create, update, and delete flows.

Learn to implement redux read todos action, unify API responses, manage sign in/out flow, dispatch loading states, and fetch current user todos with token-based requests.

Create, update, and delete todo actions in redux, wiring API calls to a Fashanu endpoint using title, email, and done to manage todos.

Display all todos on the to-do page by mapping each todo to a React Bootstrap list group, showing title and status with color-coded completed or pending states.

Create a todo UI by using a show state and a bootstrap info button, wire a create todo form with a title, and manage additions with redux actions and concat.

Explore adding delete and update functionality for todos by adding complete and delete buttons per item and dispatching update calls with id, title, and done status.

Migrate from legacy redux implementation to the new syntax using next-redux-wrapper, remove the legacy code warning, and verify the app compiles and runs with updated redux setup.

Simplify the next.config.js by removing unused options, fix styling by referencing the main class, and upgrade the server to return todo IDs so the UI updates without a refresh.

Deploy and manage your full stack app on Hiroku, linking GitHub, configuring environment variables, and enabling manual or automatic deployments while testing registration and weather features.

Deploy your Next.js app to Vercel by importing from GitHub, configuring environment variables, and deploying; then sign in, register, and verify the app works like localhost.