MetaAds- MERN Stack Classified Ads Theme

Introduction

Welcome to the MetaAds MERN Stack Classified Ads Theme tutorial! This comprehensive guide will walk you through the process of setting up and using the MetaAds theme, a powerful and feature-rich MERN (MongoDB, Express.js, React, Node.js) stack classified ads theme. With MetaAds, you can create a fully functional classified ads website with ease, complete with features like user registration, login, ad posting, and payment processing.

Prerequisites

Before starting this tutorial, make sure you have the following:

• A basic understanding of HTML, CSS, and JavaScript
• Node.js installed on your computer
• MongoDB installed on your computer or a cloud-based MongoDB service
• A code editor or IDE (Integrated Development Environment) of your choice
• A text editor or IDE with syntax highlighting and code completion

Setting up the MetaAds Theme

To get started, you'll need to set up the MetaAds theme on your local machine. Follow these steps:

1. Clone the MetaAds repository: Open your terminal or command prompt and run the following command to clone the MetaAds repository:

   git clone https://github.com/metaads/metaads-mern-stack.git

2. Install dependencies: Navigate to the cloned repository and run the following command to install the dependencies:

   npm install

3. Create a new MongoDB database: Create a new MongoDB database and note down the connection string. You'll need this later.

Step 1: Setting up the Server

To set up the server, follow these steps:

1. Create a new file called server.js: In the root directory of the MetaAds repository, create a new file called server.js.
2. Add the following code to server.js:

   
   const express = require('express');
   const app = express();
   const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/metaads', { useNewUrlParser: true, useUnifiedTopology: true });

app.use(express.json()); app.use(express.urlencoded({ extended: true }));

app.use('/api', require('./routes/api'));

app.listen(3000, () => { console.log('Server started on port 3000'); });

This code sets up an Express.js server and connects to the MongoDB database.

**Step 2: Setting up the Client**

To set up the client, follow these steps:

1. **Create a new file called `index.js`**: In the `client` directory of the MetaAds repository, create a new file called `index.js`.
2. **Add the following code to `index.js`**:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

This code sets up a React app and renders the App component to the #root element.

Step 3: Setting up the Database

To set up the database, follow these steps:

1. Create a new file called models.js: In the models directory of the MetaAds repository, create a new file called models.js.
2. Add the following code to models.js:

   
   const mongoose = require('mongoose');

const adSchema = new mongoose.Schema({ title: String, description: String, price: Number, location: String, createdAt: { type: Date, default: Date.now } });

const Ad = mongoose.model('Ad', adSchema);

module.exports = Ad;

This code defines a mongoose model for the ads.

**Step 4: Setting up the Routes**

To set up the routes, follow these steps:

1. **Create a new file called `routes.js`**: In the `routes` directory of the MetaAds repository, create a new file called `routes.js`.
2. **Add the following code to `routes.js`**:
```javascript
const express = require('express');
const router = express.Router();
const Ad = require('../models/Ad');

router.get('/ads', async (req, res) => {
  const ads = await Ad.find().exec();
  res.json(ads);
});

router.post('/ads', async (req, res) => {
  const ad = new Ad(req.body);
  await ad.save();
  res.json(ad);
});

module.exports = router;

This code sets up two routes: one to retrieve all ads and one to create a new ad.

Step 5: Running the Application

To run the application, follow these steps:

1. Start the server: Run the following command in your terminal or command prompt:

   node server.js

   This will start the server and connect to the MongoDB database.

2. Start the client: Run the following command in your terminal or command prompt:

   npm start

   This will start the client and render the React app to the #root element.

Conclusion

Congratulations! You have successfully set up the MetaAds MERN Stack Classified Ads Theme. You can now use the theme to create a fully functional classified ads website with features like user registration, login, ad posting, and payment processing. In the next part of this tutorial, we'll cover how to use the theme's features and customize it to fit your needs.