Documentation

MetaAds- MERN Stack Classified Ads Theme

Thank you so much for purchasing our item from CodeCanyon.


  • Created: Nov 29, 2023
  • Update: May 24, 2022

Please Check Our MetaAds- MERN Stack Classified Ads Theme on CodeCanyon.


Introduction

MetaAds is a classified ads Theme built with MERN Stack (MongoDB, Express, React, Node.js) and Next.js, Tailwind CSS. It is a modern, beautiful, and responsive theme.

MetaAds- MERN Stack Classified Ads Theme

Project Structure

After downloading the theme package from the JS template, you will see three folders.

The project is organized as a monorepo and comprises the following packages:

  1. apps/site: The frontend is constructed using Next.js and Tailwind CSS. You will deploy this to Vercel, Netlify, AWS Amplify, or any other hosting platform.
  2. apps/backend: The backend is constructed using Node.js, Express.js, and MongoDB. You will deploy this to AWS EC2, Digital Ocean, Heroku, or any other hosting platform.
  3. packages/eslint-config-custom: Configuration for ESLint, including eslint-config-next and eslint-config-prettier.
  4. packages/tsconfig: The tsconfig.json file used throughout the monorepo.

Quick Start Guide

Prerequisites: Before you begin, ensure that you have a Code Editor (such as VS Code), the latest version of Node.js, and a package manager (PNPM) installed on your computer. If you do not have these installed, please install them.
Note: If you are not familiar with coding, version control (GitHub), or hosting, please contact our support team at support@jstemplate.net. We will assist you.

1. Download the Theme

Download the theme from CodeCanyon

Extract the zip file to your computer.

extract

The code/metaads folder contains both backend and frontend code. Backend code resides in apps/backend, and frontend code in apps/site.

The documentation folder holds offline theme documentation. To view, open "index.html" in your browser.

The other folder contains MongoDB database collections. Import the database dump as dummy data into your MongoDB database.


2. Open Project in Code Editor

Now, open the metaads folder in your code editor and launch the terminal.

Check your Node.js version with the command node -v and npm version with pnpm -v in the terminal. extract


3. Install Dependencies

To install dependencies, run the following command in the terminal from the root of the project:

pnpm install

4. Start the Backend Server

To start the backend server in development mode, run the following command from the project root:

pnpm -F backend dev

## Warning: Make sure you generate new keys before you deploy your application
# make sure you added all the env variables to your .env file
# Step 1: Generate new keys: https://travistidwell.com/jsencrypt/demo/
# Step2:  Base64 encode the keys: https://www.base64encode.org/ from here
# Step3: add PUBLIC_KEY and PRIVATE_KEY here
# Step4: add the base64 encoded keys to the .env file

PUBLIC_KEY=""
PRIVATE_KEY=""

# MongoDB URI- Create mongodb account and add the mongodb uri here
MONGODB_URI=""

# To integrate Cloudinary services, follow these steps:
# -Obtain Cloudinary API Key, API Secret, and Cloud Name
# - Retrieve your API Key, API Secret, and Cloud Name from the dashboard.
# Add Credentials here

CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""
CLOUDINARY_CLOUD_NAME=""

# To integrate NodeMailer services, follow these steps:
# -Get config of your sender Email, Password, Host, and Port

NODEMAILER_EMAIL=''
NODEMAILER_PASSWORD=''
NODEMAILER_HOST=''
NODEMAILER_PORT=

ADMIN_CONTACT_EMAIL ='info@example.com'
NODE_DOCKER_PORT=1337

To build the backend server, run the following command from the project root:

pnpm -F backend build

To start the backend server in production mode, run the following command from the project root:

pnpm -F backend start

The site will be available on port 1337. Open your browser and go to http://localhost:1337


5. Start the Frontend Server

Prerequisites: Before you begin, ensure that you have created a .env file within apps/site folder. If you do not have this .env file, create it and add the following environment variables. Make sure your backend server is running on port 1337.

# Your backend server url
NEXT_PUBLIC_API_ENDPOINT="http://localhost:1337/api/v1"

To start the frontend server in development mode, run the following command from the project root:

pnpm -F site dev

To build the frontend server, run the following command from the project root:

pnpm -F site build

To start the frontend server in production mode, run the following command from the project root:

pnpm -F site start

The site will be available on port 3000. Open your browser and go to http://localhost:3000

Congratulations! You have successfully installed the theme. Now, you can start customizing the theme.

Customization

Customize the theme according to your requirements.


Change Color

  • Go to apps/site/tailwind.config.js file
  • Scroll down to line 9 and update the color
  • colors: {
          themePrimary: '#068179',
          themePrimaryLighter: '#E6F2F2',
          themeSecondary: '#F27125',
          themeGreenLight: '#3EA875',
          themeWhiteLow: '#66737F',
          themeWhiteLight: '#F7F8F9',
          themeWhiteLighter: '#5D6D7E',
          themeGrayBorder: '#EBEDEF',
          themeGray: '#AEB6BF',
          themeGrayLight: '#D6DBDF',
          themeGrayDarker: '#06648156',
          themeBlack: '#283746',
          themeBlackDarker: '#1A2B3A',
          themeBlackLighter: '#E7E9EE',
          themeBlackAlt: '#001324',
          themeRedLight: '#FF4040',
          themeYellowLight: '#FF9900',
          themeGrayWhite: '#85929E',
          themeWhiteAlt: '#9CA3AF',
          footerBorder: '#ffffff33',
    }
          

    Change Content

    We use static content for the site. You can change the content from each page or component.

    For example, if you want to change the content of the home page HeroSection component, you can go to apps/site/src/components/fronted/hero-section.jsx file and update the content.

    Change Font

    Go to apps/site/pages/_document.jsx file

    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"
      rel="stylesheet" />
          

    Go to apps/site/src/styles/globals.css file

    body {
      padding: 0;
      margin: 0;
      font-family: 'Open Sans', sans-serif;
      font-style: normal;
    }
          

    Change Header

    We have 2 headers TopNav and MainNavBar components.

    Go to apps/site/src/components/fronted/header/TopNav.jsx file to update the top navigation bar

    Go to apps/site/src/components/fronted/header/MainNavBar.jsx file to update the main navigation bar

    import TopNav from "../header/TopNav";
    import MainNavBar from "../header/MainNavBar";
    
    const CustomHeader = () => {
      return (
          <>
              <TopNav />
              <MainNavBar />
          </>
      );
    };
    
    export default CustomHeader;
          

    Change Header Menu

    Go to apps/site/src/components/fronted/header/header_data.jsx file

    
            const menuList = [
            {
              id: 1,
              name: 'Home',
              link: '/',
              icon: (
                
                  
                
              ),
            },
            {
              id: 2,
              name: 'Browse All Ads',
              link: '/all-ads',
              icon: (
                
                  
                
              ),
            },
            {
              id: 3,
              name: 'Category',
              link: '/all-categories',
              icon: (
                
                  
                
              ),
            },
            {
              id: 4,
              name: 'Sellers',
              link: '/sellers',
              icon: (
                
                  
                
              ),
            },
            {
              id: 5,
              name: 'News & Blog',
              link: '/news-blog',
              icon: (
                
                  
                
              ),
            },
            {
              id: 6,
              name: 'Contact Us',
              link: '/contact-us',
              icon: (
                
                  
                
              ),
            },
          ]
    
          

    Development

    Deploy the frontend to Vercel, Netlify, AWS Amplify, and Backend to AWS EC2 Instance

    Deploy Frontend on Vercel

    Deploying your Next.js application on Vercel is quick and easy. This guide will provide you with two ways to deploy your application: via the Vercel dashboard and via the CLI.

    Option 1: Deploy via Vercel Dashboard

    1. Step 1: Upload your Next.js project to GitHub or a similar version control system.
    2. Step 2: Sign up for a Vercel account at https://vercel.com/signup.
    3. Step 3: Add your project to Vercel by importing it from your version control system. Vercel will automatically detect that it is a Next.js application and create a build.
    4. Step 4: Once the build is complete, Vercel will deploy your application and provide you with a URL to access it.

    Option 2: Deploy via CLI

    1. Step 1: Install the Vercel CLI by running the following command in your terminal:
    2. npm install -g vercel
    3. Step 2: Navigate to your Next.js project directory.
    4. Step 3: Run the following command to deploy your application:
    5. vercel
    6. Step 4: Follow the prompts to configure your deployment settings, including your project name and environment variables.
    7. Step 5: Once the deployment is complete, Vercel will provide you with a URL to access your application.

    Congratulations! Your Next.js application is now deployed on Vercel. If you have any issues or questions, please refer to the official Vercel documentation or contact their support team.


    Deploy Backend to AWS ec2 Instance

    1. Create Your AWS Account

    • Visit the AWS website and search for EC2.
    • Click on "Launch Instance" to create a new one. Check Amazon EC2 – Instance Types for information on instance types.
    • Give your instance a suitable name.
    • Select "UBUNTU" as the Amazon Machine img.
    image
    • In the Key-pair section, create a new key pair if you don’t have one. Save it on your local machine. This key helps you log in using an SSH client.
    • In the Network Settings section, allow HTTPS and HTTP request traffic required for a web server.
    • With these settings, click the "Launch Instance" button at the bottom right.
    image

    Wait a few seconds for the instance to start completely and go into a running state.

    2. Connecting to the Instance Using SSH Client

    • Once the instance is running, click on the Instance ID. Open the page with details and click the "Connect" button.
    • Open your SSH client on your computer (Terminal for Linux/MacOS, PuTTy for Windows).
    • Go to the folder where your private key is stored using the command: cd <path-to-your-folder>.
    • Give execute permission to the secret key file with: chmod 400 <privateKeyFile.pem>.
    image

    Copy the command from the Example section, execute it in your terminal, and when asked to continue connecting, type "yes" and press Enter.

    You are now connected to your AWS instance from your local machine using an SSH client.

    image

    3. Install Docker & Git on the Instance

    To Install Docker check their official documentation.

        
          # Add Docker's official GPG key:
          sudo apt-get update
          sudo apt-get install ca-certificates curl gnupg
          sudo install -m 0755 -d /etc/apt/keyrings
          curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
          sudo chmod a+r /etc/apt/keyrings/docker.gpg
      
          # Add the repository to Apt sources:
          echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
          sudo apt-get update
        
      
        
          sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
        
      

    To Install Git run the following command:

        
          sudo apt-get install git
        
      

    Also, create Docker docker volume create caddy_data to store Caddy data:

        
          sudo docker volume create caddy_data
        
      

    4. Clone the Repository to the Instance

    • Locate the folder var using the command: cd /var and create the folder www with: sudo mkdir www.
    • Go to the www folder using the command: cd www
    image

    Clone the repository using the command: sudo git clone <repository-url>.

    image

    Go to the cloned repository folder using the command: cd <repository-name>.

    image

    5. Build the Docker img

    Give execute permission to the deploy.sh file with: chmod +x deploy.sh.

        
          ./deploy.sh
        
      

    6. Connecting a Subdomain to Your Caddy Server in Docker

    Step 1: Obtain a Domain Name

    If you don't have a domain name, register one from a domain registrar like Namecheap or GoDaddy.

    Step 2: Set Up DNS Records

    1. Log in to your domain registrar's website.
    2. Navigate to the DNS management section.
    3. Add a new DNS record of type A for your subdomain, pointing to the IP address of your AWS EC2 instance.

    Step 3: Modify Caddyfile

    • Access the Caddy configuration file (Caddyfile) in your Docker container. This is usually located at apps/backend/Caddyfile.
    • Open the Caddyfile using a text editor.
    • Locate the section where your domain is configured. It might look like:
    
      subdomain_name.example.com {
       reverse_proxy metaads-api:1337  {
              header_down Strict-Transport-Security max-age=31536000 ;
          }
      }
        
    • Replace the subdomain name with your subdomain name.
    • Replace yourdomain.com with your subdomain. Save the changes.

    Restart Container

    Restart your Docker container:

    sudo docker compose up -d --build

    Test

    Visit your subdomain in a web browser to ensure the connection is successful. You should see the content hosted on your Caddy server.


    Changelog

    See what's new: added, changed, fixed, improved, or updated in the latest versions.

    For Future Updates Follow Us on CodeCanyon

    Version 1.0.0 (30 Nov, 2023)

    • Added tailwind.config.js updated - now color code will reflect all around the site
    • Fixed Security update. Admin cannot be created
    • Updated Formatted email template
    • Updated Converted to monorepo using turborepo