Build a Travel Blog App with React and Chakra UI MERN [2023]

Install and run the first React app with npm start, explore the project structure (node_modules, public, source), review index.html, App.js, and index.js, and view locally at localhost:3000.

Remove unused files from the create react app scaffold to keep your workspace clean, then start the app to see compile errors from missing assets and prepare for Git setup.

Set up and initialize git for the Travel Bay mern project, configure gitignore for node_modules, and push the public repository to GitHub.

Explore building a travel blog app interface with a responsive navigation bar, React routing, API-driven block filtering, and dark or light modes in Chakra UI, including mobile hamburger support.

Install dependencies for travel blog app using Chakra UI getting started. Add React Redux, EmailJS, Formik, React Router DOM, React Icons, and an HTTP library; npm populates node_modules.

Set up Chakra provider and navbar in a React and Chakra UI MERN travel blog app, organize code with components, redux, and screens folders, and run the app locally.

Build a responsive navbar in a travel blog app using React and Chakra UI by importing components, setting up icons, menus, color modes, and routing.

Create a navbar with a home link and a logo hover effect using useState to toggle hover and adjust logo color for light and dark modes. Prepare for React Router.

Set up React Router with BrowserRouter, wrap with Chakra provider, and build a responsive navbar with dynamic, array-mapped links and a blog block menu with nested routes.

Refine the navbar layout with flex and Chakra UI's HStack, hide mobile elements, and add a social media button group plus a color-mode toggle (moon/sun) for light and dark themes.

Finalize the navbar with Chakra UI, enable dark and light modes, configure routing, and push the MERN travel blog app to the remote repository with git push and sync changes.

Create a backend structure for the travel blog app by building a server with models, routes, and a db connection using Mongoose, Express, dotenv, bcrypt, and jsonwebtoken.

Install and open MongoDB Compass, create a new connection using your application's connection string from the .env file, and verify data visibility for the travel blog project.

Build the first blog post route in MERN travel blog app by wiring an Express router, importing the blog post schema, and exposing the get blog post by category route.

Explore how the server entry point connects to the database, exposes blog post routes through the api, and tests a get request at localhost:5000/api/blogposts to return an empty array.

Seed the travel blog database by importing blog post data from a JSON file into MongoDB using Compass, then test the end-to-end MERN stack flow from API to front end.

Set up Redux Toolkit to manage blog posts, create slices and reducers, and wire actions for fetch, create, update, and delete with loading and error handling.

Import the blog post into the redux store, set up redux in index.js, and wrap the app with the provider from react-redux to enable redux on the blog screen.

Render a blog screen by mapping posts, formatting the category heading, and applying responsive image styling, while configuring concurrently to run the server and client.

Set up the blog screen route in app.js, defining routes for home, block, category, and elements; note the placeholder page items and a 404 until the all route is implemented.

Build a travel blog list screen using React and Chakra UI, laying out post title, author, date, category link, and read more with responsive flex and dividers, ready for pagination.

Add the .env file to gitignore to avoid pushing sensitive database credentials to remote repositories, especially public ones, safeguarding your app from exposure.

Develop pagination and filtering to fetch blog posts by category (Europe) and navigate pages using next and back buttons, while wiring routing and the Redux store for the front end.

Learn to implement blog post slice pagination with redux store in a React and Chakra UI MERN app, managing status 200 and 201, next/previous pages, and resetting blog post state.

Implement blog post actions for pagination by dispatching status and data to the redux store and wiring next and previous page clicks with currying functions and category and page items.

Learn to implement pagination on the blog screen using redux state, useEffect, and next/previous page actions, while filtering blocks by region and managing API status.

Explore how Redux devtools and React devtools help debug a React and Chakra UI MERN app by inspecting components, actions, payloads, and the current state.

Push our code to the remote repository and fix a bug by correcting the category to post category, then stage, commit, and sync changes using version control.

Builds a single post screen using Chakra UI and React Router params to fetch a blog post by id with Redux actions, handling loading states and errors.

Debug the single blog post route in a React and Redux setup by wiring the route with an ID, fetching the post via the endpoint, and validating with Postman.

Push your code to the remote repository via source control by staging changes, committing, and performing a pull and push, then you'll be ready for the next section.

Register for EmailJS, create a Gmail service, and copy the service ID, template ID, and public key into your env file and code; test by sending a message to Gmail.

Identify how to securely fetch EmailJS credentials from the environment file via a small backend route, avoiding exposure in the repository for front-end use.

Fetch email credentials via use state and use effect, wire emailjs with service ID, template ID, and public key, then send emails with a toast notification and navigate home.

Fix contact form submission to prevent page refresh and show error states. Correctly handle on submit; test with data, confirm an email is sent, and return to the home screen.

The contact screen walkthrough wires the email text into the template and passes it down, then tests by restarting the app to confirm the text appears.

Stage and commit the contact screen, then push to the remote repository and pull to synchronize, preparing the MERN travel blog app for the next section.

Update the EmailJS template to use the actual name from the application by renaming from_name to name and removing the from field, ensuring correct name and text are sent.

Explore building a responsive footer and an admin workflow: login with a Redux token to create posts via API and publish them through the admin console.

Combine the Redux store slices and create login and logout actions, post to the API with application/json headers, and save user data to local storage.

Create and wire an admin screen into App.js for the travel blog app, explore the login flow, route handling, local storage dark mode, and plan a footer navigation with logout.

Create a responsive footer for a travel blog app using chakra ui, including a subscribe form and social icons, while managing login/logout with redux and react-router navigation.

Build an admin console with Chakra UI to manage login state and guard admin routes. Implement a tabbed interface for creating and editing blog posts using forms and components.

Build an image upload component for the new post tab, converting images to base64 (jpeg, png, jpg, webp) and updating the post image in the React MERN admin console.

Builds an admin console for creating a new blog post, with title input, category select, content, image upload, and publish action. Uses Redux for error handling and prepares backend integration.

Walks through debugging and testing the admin console in a travel blog app, adding a new blog post, image upload, and publishing workflow while verifying API calls and UI feedback.

Enable a conditional admin console link in the navbar, shown when user info exists via redux useSelector(state.user); link routes to /admin console with an icon of size 30.

Push your work to the remote repository by staging, committing, and pushing with git, while using force with lease to avoid overwriting others on GitHub.

Build edit blog post tab in a React and Chakra UI MERN app, implementing error alerts, a loading spinner, and pagination, while mapping posts and reusing the block screen layout.

Map Redux blog posts into a post edit component, passing id, title, content, image, author, category, and created date as props for the travel blog app.

Edit a travel blog post interface with a responsive Chakra UI layout, including image upload, title input, category select, and content textarea, with save and remove actions wired to Redux.

Fix the post edit interface by adjusting color scheme and layout for contrast and responsiveness, and debug the update flow to allow optional content while keeping title and image required.

Add the accordion icon to indicate collapsible sections, notice the smooth collapse animation, refresh to confirm, and prepare this change before pushing to the repository.

Debug a delete post bug by correcting the post list to return all posts with find, not a single object, and test by creating and removing a post.

Stage six edited files, commit changes, and push to the remote repository to keep your travel blog app in sync with the remote history.

Explore building a responsive home screen for a travel blog app with React and Chakra UI, featuring dark and light mode, minimal coding, and a mobile to desktop layout.

Learn to build a responsive home screen for a travel blog app using chakra ui components and community presets, featuring a blue header and a hero image.

Create and customize an about screen for your travel blog app using Chakra UI, exploring component styling, layout, and deployment basics within a MERN stack project.