This is a Next.js project for a QikServe Challenge, with some flavors like Tailwind, Vitest and Testing-Library.

This project aims to deliver a white-label application example. Users can select products and add to basket, see the basket list and total price. It's built with Next.js and a range of complementary tools to provide a robust and efficient development experience. If you want to see a preview of this project running you can follow on this link.

• Next.js - A popular React framework with server-side rendering (SSR) and static site generation (SSG) capabilities for building high-performance web applications.
• ReactJS - A JavaScript library for building user interfaces, particularly for creating reusable UI components.
• TypeScript - A strongly-typed programming language that builds on JavaScript, enabling better tooling and developer experience.
• Tailwind - A utility-first CSS framework that provides pre-defined classes to design responsive and consistent UIs quickly.
• next-intl - A localization library for internationalizing Next.js applications with built-in language switching support.
• Vitest - A fast, lightweight test runner for unit testing that is deeply integrated with Vite for instant feedback.
• React Testing Library - A library focused on testing React components in a way that resembles real-world usage.
• Eslint - A pluggable linter tool to identify and fix problems in JavaScript code, helping maintain code quality.
• Prettier - An opinionated code formatter that ensures consistent coding style across the entire project.
• Husky - A tool for managing Git hooks, allowing automatic running of scripts like linters before making a commit.
• Lint-Staged - A tool to run linters only on staged files before committing, improving code quality while minimizing CI/CD overhead.
• Plop - A micro-generator framework that automates the creation of new project components or files based on predefined templates.
• zod - A TypeScript-first schema declaration and validation library that ensures consistent data validation.
• Recoil - A state management library for React, offering a simple way to manage shared state between components.
• Radix-ui - A collection of open-source, high-quality React components designed with accessibility in mind.

Then, run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

If you like to try the production build, run:

pnpm build

And then:

pnpm start

• dev: runs your application in development mode
• build: creates the production build
• start: starts a simple server with the build production code
• lint: runs the linter in all components and pages
• test:unit: runs vitest once
• watch:unit: runs vitest in watch mode
• coverage: runs vitest creating a coverage report
• coverage:preview: starts a server with the coverage report files
• generate: runs plop to generate component files
• generate-message-types: runs script to generate types for next-intl

Made with ♥️ by Wilson Faustino