Jobcy is a simple and well-organized job listing Template built-in Bootstrap version 5.3.2

Jobcy 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.

Jobcy 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

📁 Folder & Files Structure
├── Jobcy
    ├── public 
        ├── src
        ├── assets
            ├── fonts
            ├── images
            └── scss
                └── icons.scss
                └── themes.scss
        ├── components  
        ├── Layout  
        ├── pages
        ├── components  
        ├── Routes  
            ├── allRoutes.js
            ├── index.js
        ├── App.js
        ├── App.test.js
        ├── index.js
        ├── logo.svg
        ├── reportWebVitals.js
        ├── setupTests.js
        ├── .env
    ├── package.json
    └── yarn.lock

Setup React


Please follow the below steps to install and match with 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

    Jobcy requires Node.js installed on your computer. Make sure the version of Node Js is greater than 14. 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.


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
yarn install This would install all the required dependencies in the node_modules folder.
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.
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");


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


v1.2.0 - 27 December 2023

  • Upgraded bootstrap Version to 5.3.2.
  • Upgraded react-router-dom Version to 6.21.0.
  • Updated all dependencies package.
  • Fixed minor issues

v1.1.0 - 05 April 2023

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

v1.0.0 - 22 April 2022

  • Initial released
© Themesdesign.
Crafted with by Themesdesign