manoldonev / react-todo-app-ts

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

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)

• GraphQL
• @tanstack/react-query with automatic hooks generation based on the GraphQL schema

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