Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajesh2723/yelpcamp
Deployed an Yelp-Camp Website
https://github.com/rajesh2723/yelpcamp
ejs express-js mongodb nodejs
Last synced: 3 months ago
JSON representation
Deployed an Yelp-Camp Website
- Host: GitHub
- URL: https://github.com/rajesh2723/yelpcamp
- Owner: Rajesh2723
- Created: 2024-08-16T07:04:54.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-04T13:43:26.000Z (4 months ago)
- Last Synced: 2024-10-12T00:05:21.933Z (3 months ago)
- Topics: ejs, express-js, mongodb, nodejs
- Language: JavaScript
- Homepage: https://yelpcamp-6z82.onrender.com
- Size: 5.46 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### 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.
```bash
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.
```bash
cd backend
npm install
```
- **Set Up Environment Variables**: Create a `.env` file to store environment variables such as database URIs, API keys, and ports.
```bash
MONGO_URI=your_mongodb_connection_string
PORT=5000
```
- **Run the Server**: Start the Node.js server.
```bash
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.
```bash
cd frontend
npm install
```
- **Run the React App**: Start the React development server.
```bash
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.
```bash
npm install concurrently --save-dev
```
Then modify your root `package.json` scripts:
```json
"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.
```bash
npm run build
```
- **Backend**: Serve the built React app using Express in production.
### Intro of YelpCamp for GitHub Repository
```markdown
## 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.