nostalcade/mern-client

Basis Client for a quick start in development with React, Vite, Zustand, Tailwind CSS, Axios, and Much more.

---

MERN Client interacts with the API running on MERN Server to perform CRUD operations on users. The layout of the Client pages consists of publicly accessible pages such as Register, Email Confirm, Log In, Forgot Password, Reset Password, Terms, and the private Account page with access control.

Features

• Node.js

  • Package Structure

• Vite

  • Environment Variables

  • Import Aliases & Directories

• React

  • Project Structure

• React Router

  • Browser Router

• Zustand

  • Stores

  • Middlewares

• PostCSS

  • Plugins

    • Tailwind CSS

    • Autoprefixer

• Tailwind CSS

  • Custom

    • Colors

    • Screens

• Axios

  • Custom Instance

  • Interceptors

    • Request

    • Response

• PWA Support

  • Manifest Structure

• Netlify

  • _redirects

• reCAPTCHA

• Mobile-Friendly

• README Structure

Tech Stack

• Runtime Environment

  • Node.js

• Build

  • Vite

• UI

  • React

• Router

  • React Router

• State Management

  • Zustand

• Style

  • Tailwind CSS

  • Prettier plugin for Tailwind CSS

  • PostCSS

  • Autoprefixer

• reCAPTCHA

  • React Google reCAPTCHA

• HTTP Client

  • Axios

Environment Variables

⚠️ Before running it, you must obtain the following values to initialize the required variables.

Variable	Value	Description
VITE_SERVER_URL	MERN Server	Required. API base path URL on Server
VITE_JWT_STORED_NAME	String	Required. Unique key name to save JWT in Local Storage
VITE_RECAPTCHA_PUBLIC_KEY	Private/Public Site Key	Required. Public Site Key for React Google reCAPTCHA and Private Site Key for MERN Server

Run

Install required

• Node.js/npm

Locally

Clone the repository

• HTTPS

  git clone https://github.com/nostalcade/mern-client.git

• SSH

  git clone [email protected]:nostalcade/mern-client.git

Go to the repository directory

cd mern-client/

Install dev/Dependencies

npm i

Add Environment Variables to .env file

• You must replace "somevalue" with your own values.

echo $'VITE_SERVER_URL=somevalue\n\nVITE_JWT_STORED_NAME=somevalue\n\nVITE_RECAPTCHA_PUBLIC_KEY=somevalue' >> .env

Clear Bash History

history -cw

Start dev server

npm run dev

In the MERN Server, add to CLIENT_URL

http://localhost:5173

All-In-One

• HTTPS

  git clone https://github.com/nostalcade/mern-client.git; cd mern-client/; npm i; echo $'VITE_SERVER_URL=somevalue\n\nVITE_JWT_STORED_NAME=somevalue\n\nVITE_RECAPTCHA_PUBLIC_KEY=somevalue' >> .env; history -cw; npm run dev;

• SSH

  git clone [email protected]:nostalcade/mern-client.git; cd mern-client/; npm i; echo $'VITE_SERVER_URL=somevalue\n\nVITE_JWT_STORED_NAME=somevalue\n\nVITE_RECAPTCHA_PUBLIC_KEY=somevalue' >> .env; history -cw; npm run dev;

Screenshots

Desktop

Mobile

License

• MIT