kc-gt/vue-fe-challenge

Frontend challenge for job application

Note to reviewers

Hi, I hope this app gives you an idea of how I can quickly develop a frontend app that is structured, functional, and styled. This was based off of a Vitesse template using the latest Vue.js. You may have to update some of your local package versions to the latest (like Node). If I had more time I would have added better error handling, components, generalized styling classes, and much more. I would have also added a lot more search options and filters, scrolling auto loads more results (paging), and other nice to have features.

Getting started

Vitesse requires Node >=14.18 !!

Install project dependencies

pnpm install

Generate Mock DB

pnpm prestart:api

Start the frontend and the mock backend together

pnpm start:mock

Or start the frontend by itself and access at http://localhost:3333

pnpm dev

Or start the backend by itself and access at http://localhost:3001

pnpm start:api

Data models

This database will create a random collection of fake Companies for you to connect your app to. The data is re-generated each time you start the server.

interface Address {
  address1: string;
  address2?: string;
  city: string;
  state: string;
  postalCode: string;
}

interface Company {
  id: string;
  starred: boolean;
  name: string;
  description: string;
  address: Address;
  image?: string;
}

Supported routes

GET    /search
GET    /search/:id
POST   /search
PUT    /search/:id
PATCH  /search/:id
DELETE /search/:id

When doing requests, it's good to know that:

• If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
• Changes will persist so long as the server is running and will be overwritten next time the server is started
• Your request body JSON should be object enclosed, just like the GET output. (for example {"name": "Foobar"})
• Id values are not mutable. Any id value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken.
• A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will return a 2XX status code, but no changes will be made to the data.

Search

Add q to search ALL the fields for a string

GET /search?q=fish

Search individual fields by field name. Use . to access deep properties

GET /search?id=company.5
GET /search?name=snake
GET /search?taxonomy.family=dog

Add _like to filter (RegExp supported)

GET /search?name_like=cat

Full-text search

Paginate

Use _page and optionally _limit to paginate returned data.

In the Link header you'll get first, prev, next and last links.

GET /search?_page=7
GET /search?_page=7&_limit=20

By default ALL matching results are returned

Plugins

• Vue Router
  • vite-plugin-pages - file system based routing
  • vite-plugin-vue-layouts - layouts for pages
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• vite-plugin-pwa - PWA
• vite-plugin-vue-markdown - Markdown as components / components in Markdown
  • markdown-it-shiki - Shiki for syntax highlighting
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• VueUse - collection of useful composition APIs
• vite-ssg-sitemap - Sitemap generator
• @vueuse/head - manipulate document head reactively

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi.

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite
• Cypress - E2E testing
• pnpm - fast, disk space efficient package manager
• vite-ssg - Static-site generation
  • critters - Critical CSS
• Netlify - zero-config deployment
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • ESLint

Variations

As this template is strongly opinionated, the following provides a curated list for community-maintained variations with different preferences and feature sets. Check them out as well. PR to add yours is also welcome!

Official

• vitesse-lite - Lightweight version of Vitesse
• vitesse-nuxt3 - Vitesse for Nuxt 3
• vitesse-nuxt-bridge - Vitesse for Nuxt 2 with Bridge
• vitesse-webext - WebExtension Vite starter template

Community

• vitesse-ssr-template by @frandiox - Vitesse with SSR
• vitespa by @ctholho - Like Vitesse but without SSG/SSR
• vitailse by @zynth17 - Like Vitesse but with TailwindCSS
• vitesse-modernized-chrome-ext by @xiaoluoboding - ⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template
• vitesse-stackter-clean-architect by @shamscorner - A modular clean architecture pattern in vitesse template
• vitesse-enterprise by @FranciscoKloganB - Consistent coding styles regardless of team-size.
• vitecamp by @nekobc1998923 - Like Vitesse but without SSG/SSR/File based routing, includes Element Plus
• vitesse-lite-react by @lxy-yz - vitesse-lite React fork
• vide by @nico-mayer - Vite superlight Beginner Starter Template
• vitesse-h5 by @YunYouJun - Vitesse for Mobile