thiagodebastos/k-tech-test

Running the project locally

1. Set up Mongo using Docker Compose by running docker compose up -d from the project root. If you don't have docker compose set up on your system, please refer to the official documentation which you can find in the [#Resouces] section.

2. This repo is set up as an npm workspace with turborepo. You can either install turbo globally, or run it with npx:

# globally installed turbo
turbo start

# with npx
npx turbo start

Turbo makes it easier to manage npm workspaces. Running turbo start will run all npm scripts with the name start in each workspace. In our case, it will run the NestJS backend and Vite React frontend.

Developing

1. Start MongoDB Docker container:

docker compose up -d

2. Start the client and back-end API servers:

npx turbo dev

3. The client app is located in apps/client while the api backend is located in apps/api

• API documentation is built with Swagger and can be accessed at http://localhost:3000/api

• By using NestJS's Swagger CLI plugin, we can streamline API endpoint documentation and provide schemas for automated code generation with React Toolkit by leveraging @rtk-query/codegen-openapi. This is done by exposing the schema via a JSON file at http://localhost:3000/api/openapi.json

• Whenever changes are made to the API, make sure to re-generate usersApi:

# run from ./apps/client
# make sure the API server is running first
npm run generate:api

Notes

• Do not store secrets in a GitHub repo. I have stored there here for demo purposes only.
• To use the actual backend API and MongoDB database during development update ./apps/client/src/main.tsx:

// update this code to return early if you don't want mocking during development
async function enableMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }

  const { worker } = await import("./mocks/browser");

  // `worker.start()` returns a Promise that resolves
  // once the Service Worker is up and ready to intercept requests.
  return worker.start();
}

Resources

Development Tools

• Turborepo Documentation

Front-end

• ViteJS Documentation
• ReactJS Documentation
• ShadCN for fast prototyping
• tailwindcss for fast prototyping
• Zod for form schema validation
• React Hook Form for form management
• Redux Toolkit for state management and API endpoint generation with RTKQ
• Code Generation for OpenAPI
• Mock Service Worker for streamlined mocking in dev and test
• Vitest for better testing integration with Vite
• React Testing Library

Back-end

• Visit the NestJS Documentation to learn more about the framework.
• Docker Compose Documentation