Your tasks will be revealed at the meeting with the Phorest Engineering team but feel free to get familiar with the project. The idea is that this skeleton should bring some familiarity for a React developer (or front-end dev in general) and reduce the time needed for scaffolding.

Some of the dependencies and samples are here to speed up the styling process. Although we love beautiful interfaces, the task is more focused on UX and front-end practices than figuring out every CSS class to make something pretty.

Not every little task has to be completed but you'll have to make this thing work. Still, during the live coding session, we value communication more than completeness.

Here are some technologies we used to make the live coding easier:

• vite - as a dev server with live-reloading (run npm run dev to start the app)
• react - because it's super popular - Note: in Phorest we write our front-ends in Ember (our web apps) and React (Next.js for Online Booking and React Native for mobile apps)
• tailwind - to speed up styling (if you are unfamiliar with Tailwind it's ok to write your own CSS)
• @heroicons/react - for the icons
• @headlessui/react - for some out of the box components

Resources:

• https://headlessui.com/
• https://heroicons.com/
• https://tailwindcss.com/
• https://tailwindui.com/ - no access needed, we built this project from the mark-up they offer

⬇️ Below is the standard README.md file generated by vite.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})