Javokhir12 / cool-chatx

CoolChatX - Frontend Challenge

See the live app - https://cool-chatx.vercel.app/

Table of Contents

• Prerequisites
• Installation
• Getting Started
• Testing
• Technical stack

Prerequisites

• Node.js 16 or later

Installation

Instal the dependencies required for the project

npm i

Getting Started

To start the development server, run next command:

npm run dev

Open http://localhost:5174 to see the result.

You can find source files in /src folder.

To build production artefacts, run next command:

npm run build

Testing

To run unit tests, run next command

npm run test

To include coverage info, run next command

npm run test:coverage

Before running e2e test make sure the app is up and running.

To run e2e tests in headless mode (run tests in terminal), run next command

npm run e2e:headless

To run e2e tests in headed mode (opens up browser window), run next command

npm run e2e:headed

Technical stack

• React - library for building UI components
• TypeScript - for static type checking
• Vitest- A Vite-native testing framework. In challenge, it's said to use Jest but since I'm using Vite as build tool it requires too much effort to make Vite work with Jest so I went with Vitest. But Vitest is compatible with Jest api.
• Tailwind.css - A utility-first CSS framework
• msw -Mock Service Worker is an API mocking library

Potential improvement

• I'm managing form state with React hooks since form is such a simple. But I'd choose react-hook-form + zod combo to improve validation and performance of form and make code more readable.