A simple jobs board web application built with Vue 3, Vite, Tailwind CSS, and Pinia.

1. Clone the Repository

git clone https://github.com/Yizack/jobs-board-demo.git

2. Install Dependencies

cd jobs-board-demo
pnpm i

3. Run the Development Server

npm run dev

4. Build for Production

npm run build

• Component-Based Architecture: All reusable UI components in the ~/components/ directory. Including the following examples:

  • Job related components
    • JobCard.vue: Displays a job card.
    • JobFilter.vue: Displays filter options.
    • JobTags.vue: Displays a list of tags.
  • Form related components
    • FormInput.vue: A custom input component.
    • FormSelect.vue: A custom select component.
    • FormSwitch.vue: A custom switch component.
  • NavBar.vue: Navigation bar mainly used in layouts.
  • ItemsPagination.vue: Pagination component.
  • HeaderSection.vue: Reusable header section.

• Views: Page views are stored in the ~/views/ directory. Including the following examples:

  • HomePage.vue: The view for the home page.
  • ErrorPage.vue: The view for error pages.
  • JobList.vue: The main view for job listings.
  • JobDetails.vue: The view for job details.

• State Management: The logic is stored in the ~/stores/ directory.

  • jobs.ts managing the state related to job listings, filters and pagination and error.ts managing the error navigation state.

• Middlewares: Middleware functions are defined in the ~/middlewares/ directory.

  • jobs.ts middleware is used on before each route resolve to fetch job listings from the API, store them in the state, and in session storage to prevent unnecessary API calls.

• Routing: The routing configuration is stored in the ~/router/ directory.

  • index.ts defining the main routes.
  • jobs.ts defining routes related to job pages.

• Layouts: The layout components are stored in the ~/layouts/ directory, and are dynamically applied to routes with the layout route meta field.

  • DefaultLayout.vue is the default layout used in the application.

• Utils: Utility functions, helpers and composables are stored in the ~/utils/ directory.

• Styling: The project uses Tailwind CSS for styling. The global styles are in the ~/assets/ directory.

• Type Safety: Custom type definitions are in the ~/types/ directory.

The project was developed with the following specifications.

The project was developed using the following environment.

List of key packages used in the project.

The project is automatically tested by running ESLint, Vitest, and vue-tsc for typechecking on GitHub Actions on every push to the main branch.

The project is automatically deployed on Cloudflare Pages and Vercel.

# Install dependencies
pnpm i

# Develop with Vite
npm run dev

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Run typecheck
npm run test:types