MERN WebApp (Practice Project)

A full-stack MERN (MongoDB, Express.js, React, Node.js) web application, built with Vite for the frontend and Express.js for the backend.

Quick Links

• 🌐 Live App

Features

• Express.js backend with MongoDB
• Full-stack MERN architecture
• RESTful API with Express.js
• MongoDB database connection
• React frontend bundled with Vite
• Chakra UI for UI components
• Deployment-ready for Render.com
  
  

Tech Stack

• Frontend: React, Vite, Chakra UI
• Backend: Node.js, Express.js
• Database: MongoDB
• Deployment: Render.com
  
  
  

Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/pfjoana/MERN-webapp
cd your-repo

2️⃣ Install Dependencies

npm install && npm install --prefix frontend

3️⃣ Set Up Environment Variables

Create a .env file in the root directory and add:

MONGO_URI=your_mongodb_connection_string
PORT=5000

(Do not commit .env to Git as it contains sensitive data!)

4️⃣ Install Chakra UI

If you haven’t installed Chakra UI yet, you can do so with the following command:

npm install @chakra-ui/react@2 @emotion/react @emotion/styled framer-motion

Run the Project

Development Mode (with nodemon)

Start both the Backend and Frontend Servers in Development Mode.
For Backend (Express server): Run this command to start the Express backend server with nodemon, which auto-restarts the server on code changes:

npm run dev

For Frontend (React with Vite): In a separate terminal, go to the frontend directory and run the following to start the React development server:

cd frontend
npm run dev

Deployment Mode

Build the Project:
First, run the build command to bundle both the backend and frontend:

npm run build

This will:

• Set NODE_ENV=deployment
• Install dependencies for both backend and frontend
• Build the frontend with Vite

Start the Project:
Now you can start the backend server in production mode

npm start

This will:

• Set NODE_ENV=production
• Start the backend server
  
  

The app should now be running on http://localhost:5000/

Deployment (Render.com)

• The project is deployed on Render.com.
• NODE_ENV is set directly in the scripts (start and build).
• The .env file is ignored, so MongoDB credentials must be set in Render's environment variables.
  
  

Notes
Free instances on Render sleep after inactivity but restart when accessed.
MongoDB credentials should be updated in Render's environment settings, not in .env.