Skip to content

Latest commit

 

History

History
82 lines (47 loc) · 1.97 KB

README.md

File metadata and controls

82 lines (47 loc) · 1.97 KB

TodoApp

A modern TODO application built using React, TypeScript, and a suite of cutting-edge frontend technologies. This project incorporates best practices such as API caching, code splitting, CI/CD, and unit testing to ensure it is readable, reusable, maintainable, and scalable.

Live Demo

TodoApp Demo

TodoApp Demo

Tech Stack

  • Framework: React
  • State Management: Redux, Context API
  • Type Checking: TypeScript
  • Styling: TailwindCSS
  • Testing: Jest, Testing Library, Vitest
  • Backend: Supabase
  • Data Fetching: TanStack Query
  • UI Components: shadcn-ui
  • Build Tool: Vite

Best Practices

API Caching

  • TanStack Query is used for API data fetching and caching, ensuring efficient data management and reducing unnecessary API calls. This makes the application scalable and maintainable.

Code Splitting

  • Leveraging Vite's dynamic import feature, the application is split into smaller chunks, improving initial load times and making the codebase more readable and reusable.

CI/CD

  • GitHub Actions is used to set up a CI/CD pipeline, ensuring automated testing and deployment. This enhances the maintainability and reliability of the project.

Unit Testing

  • Jest and Testing Library are used for unit testing components, ensuring the code is reliable and maintainable.

Setup Instructions

  1. Clone the repository.

    git clone https://github.com/yutounun/TodoApp.git
cd TodoApp

  2. Install dependencies.

    npm install

  3. Set up environment variables. Create a .env file and add your Supabase URL and key.

    VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

  4. Start the development server.

    npm run dev

  5. Run tests.

    npm test