I wanted to create something with some identity, so decided on the name posted and worked from there. I like clean and minimal UI, so I utilised styles from Tailwind UI and shadcn components (both of which I love) with custom styles to create posted as a technical test for Netwatch.
The store will initialise by retrieving users, posts and comments from the JSON Placeholder API. Then the user can continue using the application from that snapshot of data.
You can create, read, update and delete posts and comments. Filtering is available by query string, user selection or sorting by ID as no date values are available.
Cypress is being used for the E2E solution, run yarn cypress:open to load the Cypress UI. Here you can run the specs found in cypress/e2e - currently there are E2E tests for auth flows, create user page, feed page and post page. The page tests try to cover all interactions a user can make on that page.
Vitest is being used as the unit testing solution, run yarn test to run the tests. Currently there are 4 unit test files, two for libs, one for a composable and another for the store. These files will be prefixed with .test.ts. The store test is the largest and most comprehensive.
Install dependencies
yarnRun development server on 5173:
yarn devTo lint the codebase:
yarn lint # or yarn lint:fixTo run the unit tests with Vitest:
yarn testTo run the e2e tests with Cypress:
yarn cypress:open@headlessui/vue-> headless components used in TailwindUI@vueuse/core-> Vue utility composableslucide-vue-next-> iconscypress-> for testingcypress-vite-> to use vite as the build process for cypressmsw-> for mocking api calls in vitestprettier-> formattingvitest-> for unit testing