YelpCamp

Basics of Executing a MERN Stack Project

A MERN (MongoDB, Express.js,ejs, Node.js) stack project involves both frontend and backend development. Here's a basic guide to executing a MERN stack project:

1. Setting Up the Project

   • Clone the Repository: Start by cloning the project repository from GitHub.

     git clone https://github.com/username/repo-name.git
     cd repo-name
     

2. Backend (Node.js + Express)

   • Install Dependencies: Navigate to the backend directory (if separated) and install the necessary packages.

     cd backend
     npm install
     

   • Set Up Environment Variables: Create a .env file to store environment variables such as database URIs, API keys, and ports.

     MONGO_URI=your_mongodb_connection_string
     PORT=5000
     

   • Run the Server: Start the Node.js server.

     npm start
     

     The server will typically run on http://localhost:5000.

3. Frontend (React.js)

   • Install Dependencies: Navigate to the frontend directory and install React dependencies.

     cd frontend
     npm install
     

   • Run the React App: Start the React development server.

     npm start
     

     The frontend will usually run on http://localhost:3000.

4. Connecting Frontend and Backend

   • Ensure the frontend makes API requests to the correct backend URL, typically something like http://localhost:5000/api/.

5. Running Both Frontend and Backend

   • You can either run the frontend and backend separately or use a tool like concurrently to run both with a single command.

     npm install concurrently --save-dev
     

     Then modify your root package.json scripts:

     "scripts": {
       "start": "concurrently \"npm run server\" \"npm run client\"",
       "server": "cd backend && npm start",
       "client": "cd frontend && npm start"
     }
     

6. Building for Production

   • Frontend: Create a production build of the React app.

     npm run build
     

   • Backend: Serve the built React app using Express in production.

Intro of YelpCamp for GitHub Repository

## YelpCamp

YelpCamp is a full-stack web application designed to allow users to browse, review, and manage campgrounds. Built with the MERN stack, YelpCamp offers a robust and interactive experience, featuring:

- **User Authentication**: Secure user login and registration using Passport.js.
- **Interactive Maps**: Integration with Mapbox for displaying campground locations on an interactive map.
- **Campground Management**: Users can create, edit, and delete their own campgrounds.
- **Review System**: Users can leave reviews and ratings for campgrounds.
- **Responsive Design**: A mobile-friendly interface built with modern CSS techniques.

### Tech Stack

- **MongoDB**: NoSQL database for storing campground and user data.
- **Express.js**: Backend framework to build a RESTful API.
- **ejs**: Frontend library for building dynamic user interfaces.
- **Node.js**: JavaScript runtime for handling server-side operations.

This project demonstrates a range of skills including frontend development, backend API creation, database management, and user authentication.

This description provides an overview of the project, highlighting the key features and technologies used in YelpCamp, making it easier for others to understand the project's scope and functionality.