Build a Name Wishing Site with React and Express

Hello readers 😁 First post of 2021 but 🙈 After 2 years (last posted in 2019) Not Many active posts in Our Blog Mostly Co-author Posts.

Very long Gap Comes with an Interesting Topic Create a Name Wishing Site using Reactjs

Why ReactJS?

• Full Static Site
• Pure Client Side
• Fast loading
• No Database
• Slugify the URL
• ZERO Server Cost

This idea came while Working on  React Based Projects

import slugify from "slugify"

if (document.getElementById("btnSignUp") != null) {
document.getElementById("btnSignUp").addEventListener("click", e => {
const name = document.getElementById("name").value
/* eslint eqeqeq: 0 */
if (name == 0) {
console.log("Empty Title or Message")
return false
}
//const users = encodeURIComponent(name)
const users = slugify(name, {
replacement: "-",
remove: /[*+~.()'"!:@]/g,
lower: false,
strict: false,
})
window.location.href = "?name=" + users
})
}

// http://example.com/?name=hello
const GET_USER = new URL(window.location.href).searchParams.get("name")

Let’s Start 👻

Before Starting this Create Free Accounts on Netlify and Vercel also in Github (if you have the all accounts just skip this step) also don’t forget to install Node.js on your System

• Fork or Download and Upload Name wish API on your Github Account – https://github.com/mskian/get-user
• Next, Setup Vercel and Deploy this API Script – https://github.com/mskian/get-user#deploy-
• For auto Deploy Connect Vercel Bot to your Github repo
• Now Same as API Fork or Download and Upload the Name Wishing React site – https://github.com/mskian/san-wishes
• Setup NPM packages via Yarn

## Install packages

$ yarn install

## Test the site 

$ yarn start

## Format the Code

$ yarn format

## Build the site

$ yarn build

• Test the production Build on Localhost

## Install this NPM package
$ npm install -g serve

## Run this command inside on your Project Folder
$ yarn server

• After all Testing, Changes, and Update – Deploy it on Netlify Server
• install Netlify CLI on your System

$ npm install netlify-cli -g

• Next Run the Netlify Deploy Script (Windows user refer this site for run bash script – https://www.thewindowsclub.com/how-to-run-sh-or-shell-script-file-in-windows-10

$ ./deploy.sh or bash deploy.sh

• That’s all Done

Modification

You can Modify the Site according to your taste

• Update Homepage – /src/APP.js
• Replace API URL – https://github.com/mskian/san-wishes/blob/481bf4d554883f9d9519c20433e36306d015ae34/src/App.js#L59
• Add your Custom Domain for Netlify check public Folder _headers File

Note

This is a Basic React Starter Wishing Web App you can modify it just whatever you need to Change

For More about React App Please refer to this Docs – https://create-react-app.dev/docs/getting-started/

Using React First time? Personally, I suggest you Learn React before using this Wishing Web App

Check Demo

Checklist

• Install Node.js and yarn Package manager on your System
• Github account
• Netlify and Vercel account
• Custom domain (Optional but for production Custom domain is Good)
• Deploy API on Vercel
• Modify wish site and Deploy it on Netlify