React Node SEO Website With Contact Form for Beginners

Name: React Node SEO Website With Contact Form for Beginners
Rating: 4.0 (111 reviews)

Build a Local Business site with multiple pages and contact form with images upload. Extremely fast with SSR for SEO.

Created byRyan Dhungel

Last updated 10/2023

English

English [Auto],

What you'll learn

Learn to build extremely fast websites using React with NodeJs
Learn images upload with Cloudinary
Learn how to send emails using Sendgrid
Learn to make static pages of your React website SEO friendly
Learn to deploy Node Js API to heroku
Learn to deploy react app to heroku
Easily build a fully functioning website in under 3 hours

Course content

5 sections • 23 lectures • 2h 58m total length

What you will build?4:33
Build a complete full-stack web app for local businesses with a fast static site and a feature-rich feedback form, including Cloudinary image uploads, SendGrid emails, and server-side rendering.
Are you new to JavaScript React and NodeJs?0:33
Download source code from Github0:02
React Router Version0:29
React project setup4:53
Set up a React project by creating a client folder with create react app, add bootstrap for styling, and clean up unused files to start the app.
Component state6:02
Create a feedback component and manage its form state with useState, defining name, email, phone, messages, and uploaded files, then destructure values for access and post data to the backend.
Feedback/contact form10:31
Build a reusable feedback contact form in React by handling input changes and form submission, binding state to fields, and organizing the UI with Bootstrap form groups.
Handle form submit5:18
Bind inputs to state and handle form submit in a React Node SEO website. Prevent default and send name, email, phone, messages, and uploaded files to the backend.

Cloudinary setup7:55
This lecture walks through signing up for Cloudinary, obtaining the cloud name and unsigned upload preset, and configuring React environment variables to enable uploads.
Images upload with cloudinary16:45
Learn to upload images to Cloudinary using the upload widget in a React form, harnessing environment variables and state to track uploads and pass image data to the backend.
Sendgrid setup for sending emails5:03
Learn to set up sendgrid for sending emails, create and safeguard API keys, configure environment variables for email to and from addresses, and ignore sensitive files to keep GitHub safe.
Node server setup12:42
Set up Node server for a React SEO website by installing Express, body-parser, Morgan, and nodemon; configure dotenv, enable cross browser communication, and create an API route on port 8000.
Routes and controllers9:34
Learn to build Express routes and middleware, export and import modules, and move routing logic into controllers for a modular feedback API in a beginner React Node project.

Sending emails part-19:37
Learn how to receive form data on the server and send emails using SendGrid, including configuring the API key, posting feedback data via axios, and handling responses.
Sending emails part-212:46
Construct the email data from the contact form, including sender name, email, phone, message, and attached images, then send it to the admin via the send method.
React toast notifications7:34
Learn to implement toast notifications in a React app using toast container, handle success and error messages, and clear form fields after submission.
Multiple pages with react router dom17:38
Learn to build a multi-page site with react-router-dom, using a shared layout and fixed navigation that routes to home, feedback, and about pages.
SSR - Generate static pages for SEO16:20
Learn to prerender a react app with a package like react-snap to generate static pages for seo during build, and enhance metadata with react helmet.

Deployment Steps - Node Js API to Heroku0:46
Deploying Node Js API to Heroku11:55
Learn how to deploy a Node.js API to Heroku and connect it with a React frontend, including creating apps, configuring environment variables, and publishing to production.
Deployment Steps - React app to Heroku1:02
Deploying React App to Heroku15:17
Deploy a React app to Heroku by adding a proc file, configuring an Express server to serve the build, and pushing to a Heroku app with environment variables.

Requirements

Basic understanding of JavaScript

Description

Building real website using react node should not be hard. In this course you will learn to build fullstack react node website with SEO and contact form, a perfect website for local business or any portfolio site.

You will also learn how to use npm libraries like cloudinary and sendgrid to build real world project. Even though this course is short, you will get a taste of full stack javascript with node express in the backend api and react in the frontend.

UPDATE:

New section added - Deploying Node Js API and React App to Heroku

Do you want to Build Extremely Fast Website with React and Node that is mostly suitable for Local Businesses.

Do you want to Build a Website where user can have a Contact/Feedback Form?

Do you want to Build a Website where users can Upload Single/Multiple Images?

Do you want to Build a Website with Multiple Pages?

Do you want to Build a Website with Static Content?

Do you want to Build a ReactJs powered Website that is also SEO friendly?

Do you want to use Cloudinary for storing images in the cloud?

Do you want to use Sendgrid for sending emails?

Do you want to build a Website that is easy to build and style using Bootstrap4?

Then this is a perfect course for you.

Learn to Build a fully functioning, lightning fast, SEO friendly React NodeJs Powered Website in under 3 hours.

Who this course is for:

Anyone looking to build a fully functioning, extremely fast React websites with NodeJs
Anyone want to learn how to use Cloudinary for uploading single or multiple images
Anyone want to learn how to use Sendgrid for sending Emails
Anyone looking forward to get started building web apps with React and NodeJs
Anyone looking to build high performance SEO friendly websites mostly suitable for Local Business

React Node SEO Website With Contact Form for Beginners

What you'll learn

Explore related topics

Course content

React Node Website Development - Stage One8 lectures • 32min

React Node Website Development - Stage Two5 lectures • 52min

React Node Website Development - Stage Three5 lectures • 1hr 4min

Deployment to Heroku4 lectures • 29min

BONUS1 lecture • 1min

Requirements

Description

Who this course is for: