ICP + React + TypeScript + Vite + Tailwind + Shadcn/UI + Tanstack Query/Router

This template provides a batteries included setup for an ICP/React application with the latest versions of Vite, TypeScript, Tailwind CSS, Shadcn/UI, SWC, Eslint and Tanstack Query/Router.

Tip

Fork this repository as a starting point for your next ICP project.

Live demo: https://upacy-bqaaa-aaaal-qr7qa-cai.icp0.io

Tip

This template is also available in a version using ic-reactor instead of Tanstack Query. Check out that version from the ic-reactor branch.

Features

Backend

The Rust based backend exposes one endpoint only, the greet function that returns a greeting message.

Frontend

The React/Vite/TS based frontend allows the user to input a name and click a button to fetch the greeting message from the backend.

Dependencies:

• React 19: The long awaited upgrade brings form actions, optimistic UI updates while mutating, etc etc.
• Vite 6: The most significant major release since Vite 2, featuring a new Environment API for enhanced flexibility, extended framework support, and streamlined performance for modern web development.
• Tailwind 4: The new version of Tailwind CSS is a ground-up rewrite of the framework, providing faster builds, great new CSS classes and better performance.
• Tanstack Query 5: The template uses Tanstack Query for data fetching, caching and loading state management.
• Tanstack Router: Modern and scalable routing for React and Solid applications
• SWC: The Rust based compiler and bundler that provides up to 70x faster build times than Babel.
• Eslint 9: The latest release of Eslint introduces the flat configuration API along with new rules and bug fixes.
• shadcn/ui: Yes, shadcn support for Tailwind 4 is finally here!

Setup, dev environment

There are two main ways to set up the dev environment:

1. Using a VS Code Dev Container

The dev containers extension lets you use a Docker container as a full-featured development environment. This repository includes a dev container configuration that you can use to open the project with all the necessary tools and dependencies pre-installed.

Pre-requisites:

• Docker
• Visual Studio Code
• Dev Containers Extension

Once Docker, Visual Studio Code and the Dev Containers Extension are installed, you can open the project in a container by clicking the button below:

2. Setup manually

Pre-requisites:

• Local Internet Computer dev environment
• pnpm

Once you have the prerequisites installed, you can clone this repository and run the project.

Running the project

1. Start the Internet Computer

dfx start --background

2. Install dependencies

pnpm install

3. Deploy the canisters

dfx deploy

Develop

During development, you can run the frontend with hot reloading using Vite.

pnpm run dev

Contributors

Kristofer

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions or improvements.