/react-todo-app-ts

POC app exploring modern web development with React, TypeScript, and GraphQL.

Primary LanguageTypeScriptMIT LicenseMIT

license ci workflow deploy workflow cypress workflow pnpm

Latest deployment available at https://manoldonev.github.io/react-todo-app-ts/

React Todo App

Based on the React TypeScript App GitHub template repo:

  • Vite (super-fast project tooling)
  • React 18
  • TypeScript
  • ESLint
  • Prettier
  • pre-commit hooks
  • CI / deployment GitHub workflows
  • Dependency management via Renovate
  • Package management via pnpm

UX & Theming

  • Mobile-first design
  • Tailwind (utility-first CSS framework)
  • Dark Mode Support (utilizing tailwind "class" strategy)
  • Branding via custom "material design" palette (vs generic tailwind colors scheme)

State Management

  • Jotai (primitive and flexible state management for React)

Data (Async State Management)

Navigation

  • React Router v6 (with routes code-splitting)

Testing

  • End-to-end testing: Cypress (with GitHub Actions workflow)
  • Unit & Integration testing: Vitest with React Testing Library setup (dynamically extract & inject tailwind css in jsdom test environment -- see #57)
  • Static Analysis: TypeScript & ESLint
  • MSW (Mock Service Worker) API mocking (intercepting requests on the network level)

Preview