Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API

Create a nav bar component in React by setting up a component folder, writing a function component, exporting it by default, and embedding Bootstrap navigation markup into the app.

Learn to integrate a Bootstrap nav bar into a React component, fix syntax by self-closing tags, and replace class with className to resolve console warnings while customizing the menu.

Customize the nav bar by removing the disabled button and the dropdown, then change the button color to Bootstrap primary blue using Font Awesome icons and remove the outline.

Create a home, about, and contact pages by scaffolding a pages folder and reusable components, using a snippet extension to generate skeleton React code, and implement navigation to switch views.

Install the react-router-dom npm package to enable routing, using npm install react-router-dom with the --save flag to add it to dependencies for future installations.

Add routing by importing the routing package, wrap the app in a layout, and configure routes for home, about, and contact with exact matching and dynamic loading.

Implement navigation with NavLink to prevent full page reload and deliver a true single-page application experience. Highlight the active menu items automatically and ensure mobile-friendly behavior.

Design and style the about us header using bootstrap borders, containers, and responsive text alignment. Learn to apply text-uppercase, center alignment, and padding utilities to craft a polished header section.

Design and populate the about us content section using bootstrap elements to add paragraphs, shadows, padding, and rounded corners for a responsive, readable layout.

Create a Bootstrap 5 contact form by adapting about page markup, using labels and ids for focus, and including name, phone, email, message, a reach-time select, and a submit button.

Style a contact form with Bootstrap and custom CSS, center the container, set 60% width on desktop, and switch to full width on mobile with a 768px media query.

Design a footer component for all pages using container-fluid full width, a primary background with gradient, and a responsive height with viewport height units and white text.

Design a responsive footer with three sections—quick links, newsletter, and contact address—using Bootstrap's 12-column grid: three equal four-column blocks on large screens, stacking to full width on small devices.

Learn to build footer quick links using flexbox, display links in a vertical stack, apply text-white, and tune alignment with flex-direction, justify-content, and align-items for responsive layouts.

Design the footer newsletter by implementing a bootstrap input with form-control, a placeholder for the newsletter, and a subscribe button, aligning vertically with flex column and justify-content center, tuning height.

Build a responsive footer contact address with bootstrap 5 flex layout, including street, city, state, and a map icon, applying padding for mobile view; complete the footer section.

Design and implement the home page layout by creating a hero section, featured posts, latest posts, and a portfolio, then iterating the layout for a polished homepage.

Design a responsive home page hero slider using Bootstrap carousel, select high-contrast images from Unsplash, enable captions and crossfade, and fine-tune image height and text styling for mobile.

Design a responsive home page featured post section with a three-card grid and a 12-column Bootstrap layout, 4 cards on large and medium screens, equal image sizes, and proper styling.

Design and implement the home page latest post section using a grid layout, a full-width button, and adjusted padding to style the latest posts.

Design a home page portfolio section with Bootstrap, arranging images in a container, row, and columns, using gaps and padding to control spacing, and exploring dynamic images.

Add a home link to the navigation bar by setting the home path to /, applying an uppercase class for all menu items, and introducing a call to action section.

Design a prominent call to action section on the home page using bootstrap, a container-fluid with a highlighted background, centered content, and a view all posts button for mobile-friendly navigation.

Create an all posts page and all posts component, and link it to the navigation menu so users can view every post.

Design the all posts page by reusing Bootstrap markup from the home or contact sections and fetching posts from a remote API to display title, description, and a more button.

Learn how a ready-made back-end rest api serves post data in json, and fetches it to render dynamic posts on the frontend instead of hardcoded content.

Learn to use react hooks useState and useEffect to call a posts REST API with fetch, store results in state, and render posts on page load for a bootstrap-based frontend.

Loop through post data from the API using map to render each post’s title and body, updating a state variable and incorporating a loading indicator with a ternary operator.

Show a loading spinner while fetching data from a REST API in React by using useState to track loading and a ternary to center the spinner.

Create a central config file that exports an API base constant to replace hardcoded values and update in one place.

Use dynamic routing to navigate from a post list to a post detail screen, passing post and user data, and fetch the post and user information via API.

Install axios, then fetch post and user data from a REST API using axios in a react page, storing results in state and handling sequential calls.

Design a post detail page with a nine-column content area and a three-column author sidebar on a 12-column grid using cards. Refine layout to display post and user data clearly.

Master destructuring and state handling in React by extracting post and user data from API responses and assigning them to state variables for title, body, name, email, phone, and website.

Display post and user information on screen by loading the post image and showing the title, body, and user details. Apply simple styling, remove borders, and adjust margins and padding.

Style the post detail and all posts images with a custom css height, and refine it with media queries to maintain desktop height while shortening it on mobile.

Implement dynamic mailto and tel links to open email client and phone dialer, refine website links, and fetch top featured and latest posts from the backend while planning push functionality.

Create post functionality by building a form, preventing default submit, capturing title and body in state, posting via fetch, and showing a loading indicator with a success alert.

Implement Bootstrap alert messages that appear after actions, such as post creation, to show success or error. Build a reusable alert function using alert types like success and danger.

Add edit and delete buttons to all-posts screen, style with Bootstrap grid and flex, use uppercase labels, and enable navigation to detail and edit screens with pre-populated post data.

Reuse the create post screen to support both editing and creating posts by loading post data when an id exists, populating the form, and submitting via the same flow.

Test create and edit post functionality, verify data population on load, confirm request body data handling, and outline the delete workflow via REST API.

Enable delete post functionality by turning the link into a button, calling an API delete with the post id, and showing a success alert with a yes/no confirmation.

Implement a delete confirmation flow that prompts the user with a yes-or-no choice and proceeds with deletion when confirmed. Reload the page to display the updated data.

Learn how to reload all posts after deletion by handling the delete success callback and navigating to the posts list or homepage using useNavigate in a React app.

Implement a back button on the post detail screen by using the navigate hook, making the button full width and invoking navigate(-1) on click to return to the previous page.

Build login and signup screens with simple forms, collecting full name, contact number, email, and password, and connect them via the navigation bar.

Implement a user registration post call with axios, sending first name, last name, email, phone, and password via a JSON body on form submit, with loading state and response handling.

Learn to save user data, display a success alert, and navigate after registration by debugging inputs, handling events, and clearing the form.

Bind sign up form fields to state variables and clear input data after registration, ensuring the input fields reflect the cleared values and smoothly transition to the login screen.

Simulate a user login via an api call by posting email and password, navigate to posts on success, and hide login and signup menu items after authentication.

Learn how to store authenticated user data and a token in localStorage, and set up Redux to share the user state across components after login.

Learn how redux centralizes global state management to share data across components through actions and reducers, using dispatch with type and payload to update the user state consistently.

Define a user reducer to manage the user state, set an initial empty state, and handle login and logout actions with types and payloads.

Explore passing data with props and replace prop drilling by using the context API to share data globally across components, creating and consuming context with use context and use effect.

Implement a global user context with a reducer, load the token from local storage, dispatch login data, and guard routes by redirecting to login or posts based on the session.

Dispatch login data to the reducer after authentication and set the token via the user context. Toggle menu visibility and show a logout button based on token.

Implement logout functionality by clearing local storage, dispatching a logout action, and navigating the user to the login screen, while updating the state to hide post-login menu items.

Build a dynamic menu that shows items based on user session using React Redux and the Context API, with create visible only when logged in and home, about, contact shown.

Implement get all posts for the current logged-in user by retrieving user data from state, passing the user id to the API, and updating navigation to show my posts.

End-to-end testing validates that the app fetches a user's posts via the correct API, and supports create, edit, and delete operations for logged-in users only.