Job Listing

Getting started with job listing template.

This guide will walk you through the steps of installing, running locally, customizing, managing jobs, and deploying the New UI job listing template.

Structure

Once you’ve downloaded the template, you’ll find these folders and files inside:

.
├── _sass
│   ├── _base.scss
│   ├── _buttons.scss
│   ├── _layout.scss
│   ├── _reset.scss
│   ├── _shadows.scss
│   ├── _typography.scss
│   └── _utilities.scss
├── components
│   ├── seperator
│   │   └── index.tsx
│   └── sidebar
│       ├── filter-option.tsx
│       └── index.tsx
├── layout
│   ├── header.tsx
│   └── layout.tsx
├── pages
│   ├── api
│   ├── _app.tsx
│   ├── _document.tsx
│   └── index.tsx
├── public
│   └── assets
│       ├── images
│       │   ├── companies
│       └── js
│           └── script.js
├── styles
│   └── globals.css
├── .gitignore
├── jobs.json
├── next.config.js
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

Stack

  • Next.js

Prerequisites

  • Node.js - v20.9.0 or higher
  • Text editor
  • Terminal

Installation

To install navigate into template folder and install the dependencies.

cd job-listing-XXX
npm install

Running Locally

Start the development server.

npm run dev

If all goes well, you should be able to view the template running locally at http://localhost:3000/.

Success! You are now ready to start customization.

If you aren’t able to run template in the browser, go back to the terminal where you ran the dev command and look to see if an error occurred, or if template is being served at a different URL than the one linked to above.

Customizing Template

Theme

The template defaults to light theme. To change from the light to dark theme, go to pages/_document.tsx and set the data-new-ui-theme attribute to dark.

export default function Document() {
  return (
    <Html lang="en" data-new-ui-theme='dark' >
      <Head />
      <body className='sans-serif'>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
Categories

To customize categories, navigate to the components/sidebar/index.tsx file.

const filterOptions = [
  {
    name: 'data-and-analytics',
    label: 'Data and Analytics'
  },
  {
    name: 'devops-and-sysadmin',
    label: 'DevOps and SysAdmin'
  }
];
Jobs

The jobs.json file, located within the root folder, contains the job entries.

[
  {
    "category": "data-and-analytics",
    "company": "New UI",
    "position": "Data Engineer",
    "icon": "/assets/images/companies/new-ui.svg",
    "tags": ["Full-time", "Data"],
    "link": "https://boards.greenhouse.io/new-ui/jobs/"
  },
  {
    "category": "product",
    "company": "New UI",
    "position": "Product Manager",
    "icon": "/assets/images/companies/new-ui.svg",
    "tags": ["Full-time", "Manager"],
    "link": "mailto:[email protected]"
  }
]

Building the App

Run build command to build the page.

npm run build

By default, the build output will be placed at dist/. You may deploy this dist folder to any of your preferred platforms.

Deploying

Deploying your template is quick and easy. You can choose from several hosting providers and deploy using either their website dashboard or command-line interface (CLI).

A fast way to deploy your job listing template is to connect your online Git repository (like GitHub, GitLab, or Bitbucket) to a host provider. This lets you take advantage of continuous deployment using Git.

These host platforms automatically detect changes to your template’s code in your Git repository. They then build your site and deploy it to the web, using either a custom URL or your personal domain.

For detailed instructions on deploying your job listing template on different platforms, please visit the next.js deployment guides.