Getting Started | Jobvia React Job Listing Template

Introduction

Jobvia is a simple and well-organized job listing Template built-in Bootstrap version 5.3.3

Jobvia contains lots of new designs of jobs pages with responsiveness on all screens. Additionally, we have given 3 different color variants, you can easily change variants in your running application. We have written minimum SCSS and codes to increase performance.

Jobvia is a Job Listing Template built with developer-friendly codes and easily customizeable.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via our profile page or sent email on pichforest@gmail.com

📁 Folder & Files Structure

├── Jobvia
    ├── public 
        ├── assets                                 
        ├── favicon.ico                                 
        ├── index.html                                  
        ├── logo192.png
        ├── logo512.png
        ├── manifest.json
        ├── robots.txt
    ├── src directory
        ├── assets
            ├── fonts
            ├── images
            └── scss
                └── icons.scss
                └── themes.scss
        ├── components  
        ├── Layout  
        ├── pages
        ├── Routes  
            ├── allRoutes.js
            ├── index.js
        ├── App.js
        ├── App.test.js
        ├── index.js
        ├── logo.svg
        ├── reportWebVitals.js
        ├── setupTests.js
        ├── .env
    ├── README.md
    └── package.json

Setup React

Introduction

Please follow the below steps to install and match with prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

Yarn
You must have Yarn installed & running on your computer. If you already have it, ignore this step. We recommend Yarn instead of NPM.
Nodejs
Jobvia requires Node.js installed on your computer. Make sure the version of Node Js is greater than 20. Use the LTS Version for the Node Js.
Git
You must have Git installed & running on your PC. Installation For setting up the template, follow the below process.

Installation

To setup the template, follow below-mentioned steps:

Install Prerequisites
Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command	Description
`npm install / yarn`	This would install all the required dependencies in the `node_modules` folder.
`npm start / yarn start`	Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:3000.
`npm run build / yarn build`	Generates a `/build` directory with all the production files..

How to Default Color Set?

Change the body attribute in Layout/CommonLayout/StyleSwitcher.js file.

There are 3 types of Colors for Layout Mode: 1. green 2. purple 3. blue.

    useEffect(() => {
        document.body.setAttribute("data-theme", "green");  //purple, blue
    });

Light Mode

Change the body attribute

    useEffect(() => {
        document.body.setAttribute("data-layout-mode", "light");
    });

Dark Mode

Change the body attribute

    useEffect(() => {
        document.body.setAttribute("data-layout-mode", "dark");
    });

Tips

SCSS: We suggest you not to do any changes in any scss files from assets/scss/themes.scss folders because it will trouble in future updates so we are suggesting that if you want to make any changes you can create a new themes.scss file and use that instead of the theme's file. If you have any questions beyond this documentation, feel free to contact us at pichforest@gmail.com

Changelog

v1.2.0 - 18 Nov 2024

Upgraded React Version to 18.3.1.
Upgraded bootstrap Version to 5.3.3.
Removed node-sass and added sass.
Updated all dependencies package.
Fixed minor issues

v1.1.0 - 30 June 2023

Upgraded React Version to 18.2.0.
Upgraded bootstrap Version to 5.3.0-alpha1.
Upgraded react-router-dom Version to 6.14.0.
Color Layout Mode set using by body attribute.
Updated all dependencies package.
Fixed minor issues