trx-challenge

Live demo: ➡ https://trx-challenge.vercel.app/

This is a project to demonstrate expertise on Vue 3, making API requests, creating highly readable components, managing efficient state and applying styling to match designs. The main goal was to create a user list with the ability to filter by name and email.

Technologies 🤖

VueJS 3
Vite
TailwindCSS
TDD with Vitest, Jest and Vue Testing Library
Mock Service Worker (MSW) as a request interceptor
E2E tests with Cypress

Features 🦾

Fetch users from the provided API (https://jsonplaceholder.typicode.com/users)
List users
Filter users by name and email
Design aligns with the provided mockup

Improvements not requested 🔨

Clear filter button
Mobile-first design
E2E tests with Cypress
Unit tests with Jest and Vue Testing Library

Project Structure 📂

src/components: Vue components
src/services: API requests
src/composables: Composables
*/__tests__: Unit tests
/cypress: E2E tests

Decisions

Design 🎨

I chose to use the mobile-first approach to make the application responsive. Taking benefit of TailwindCSS and its great developer experience I was able to create the layout and components easily.

Tests 🧪

I chose to use TDD to ensure the quality of the code and the application. I've been a fan of TDD since 2015 so I always try to use it in my projects.
This time I used Jest and Vue Testing Library + Vitest for unit tests and Cypress for E2E tests.
I created the tests before the implementation of the features and then I implemented the features to make the tests pass.
I was not sure what is the Testing Strategy of the company so I decided to create a few tests to demonstrate my knowledge and experience with different types of strategies like 'unit', 'integration', and 'e2e'.
My decision to use the testing library is because it is more user-friendly and it is the most popular tool for testing. It also was integrated with Cypress tests.

MSW with vitest 🚦

I implement and setup Mock Service Worker to intercept the requests and mock the responses to make the development process faster and more efficient.
To initialize the server I added the code related inside the vite.config.js file and vitest.config.js
The file src/mocks/server.js contains the setup of the server.
The file src/mocks/handlers.js contains the handlers to intercept the requests and mock the responses.

Run Unit/Integration Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

Composition Components 🧩

I chose to use the Composition API to take advantage of the new features of Vue 3.

Composable

I created a composable to make the requests and manage the state of the users. Composables are a great way to share logic between components and make the code more reusable.

Vue Query 📡

I chose to use the vue-query plugin to make requests because it is a modern and realistic way to make requests. It is also a great tool to make the code more readable and maintainable. It is a great tool to manage the state of the requests and the cache of the data (this time it was not needed but it is a great feature to have in mind for future projects). I decided to The API calls live in the services folder to make the code more organized and maintainable.

Filter 🧹

This filter is case insensitive and it is directly to the local list of users.
I implemented the watchEffect function to listen to the changes in the filter and update the list of users.
The main reason to implement wathEffect against watch was because the first one is triggered immediately or some value inside the callback changes, and the second only when the value changes.
I decided to not implement debounce function because the filter is direct to the local list and the performance is not affected.

Store 🗄️

I decided to not use Pinia or Vuex because the application is small and the state is not complex. However, I understand the importance of using a state management library in a real-world application.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

vnponce / trx-challenge