https://github.com/hanzceo/ocart
https://github.com/hanzceo/ocart
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hanzceo/ocart
- Owner: HanzCEO
- License: mit
- Created: 2024-12-18T21:55:11.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-23T13:57:41.000Z (over 1 year ago)
- Last Synced: 2026-02-14T04:51:50.410Z (4 months ago)
- Language: JavaScript
- Size: 328 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ICP + React + TypeScript + Vite
This template provides a batteries included setup for an ICP/React application with the latest versions of Vite, TypeScript, Tailwind CSS, SWC, Eslint and React Query.
> [!TIP]
> Fork this repository as a starting point for your next ICP project.
>
> Live demo:
> [!TIP]
> This template is also available in a version using [ic-reactor](https://www.npmjs.com/package/@ic-reactor/react) instead of React Query. Check out that version from the [ic-reactor branch](https://github.com/kristoferlund/ic-vite-react-next/tree/ic-reactor).
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]](LICENSE)
## 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](https://react.dev): The long awaited upgrade brings form actions, optimistic UI updates while mutating, etc etc.
- [Vite 6](https://vite.dev/): 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](https://tailwindcss.com/docs/v4-beta): 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](https://tanstack.com/query/latest): The template uses Tanstack Query for data fetching, caching and loading state management.
- [SWC](https://swc.rs/): The Rust based compiler and bundler that provides up to 70x faster build times than Babel.
- [Eslint 9](https://eslint.org/): The latest release of Eslint introduces the flat configuration API along with new rules and bug fixes.
- [shadcn/ui](https://ui.shadcn.com/): Sorry, no. Shadcn is not available for Tailwind 4 yet. Soon hopefully.
## 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](https://www.docker.com/products/docker-desktop)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Dev Containers Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
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:
[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/kristoferlund/ic-vite-react-next)
### 2. Setup manually
Pre-requisites:
- [Local Internet Computer dev environment](https://internetcomputer.org/docs/current/developer-docs/backend/rust/dev-env)
- [pnpm](https://pnpm.io/installation)
Once you have the prerequisites installed, you can clone this repository and run
the project.
## Running the project
### 1. Start the Internet Computer
```bash
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.
```bash
pnpm run dev
```
## Contributors
## 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.
[contributors-shield]: https://img.shields.io/github/contributors/kristoferlund/ic-vite-react-next.svg?style=for-the-badge
[contributors-url]: https://github.com/kristoferlund/ic-vite-react-next/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/kristoferlund/ic-vite-react-next.svg?style=for-the-badge
[forks-url]: https://github.com/kristoferlund/ic-vite-react-next/network/members
[stars-shield]: https://img.shields.io/github/stars/kristoferlund/ic-vite-react-next?style=for-the-badge
[stars-url]: https://github.com/kristoferlund/ic-vite-react-next/stargazers
[issues-shield]: https://img.shields.io/github/issues/kristoferlund/ic-vite-react-next.svg?style=for-the-badge
[issues-url]: https://github.com/kristoferlund/ic-vite-react-next/issues
[license-shield]: https://img.shields.io/github/license/kristoferlund/ic-vite-react-next.svg?style=for-the-badge
## Commit Message Convention
This website follows [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
### Format
`(optional scope): `
Example: `feat(pre-event): add speakers section`
### 1. Type
Available types are:
- feat → Changes about addition or removal of a feature. Ex: `feat: add table on landing page`, `feat: remove table from landing page`
- fix → Bug fixing, followed by the bug. Ex: `fix: illustration overflows in mobile view`
- docs → Update documentation (README.md)
- style → Updating style, and not changing any logic in the code (reorder imports, fix whitespace, remove comments)
- chore → Installing new dependencies, or bumping deps
- refactor → Changes in code, same output, but different approach
- ci → Update github workflows, husky
- test → Update testing suite, cypress files
- revert → when reverting commits
- perf → Fixing something regarding performance (deriving state, using memo, callback)
- vercel → Blank commit to trigger vercel deployment. Ex: `vercel: trigger deployment`
### 2. Optional Scope
Labels per page Ex: `feat(pre-event): add date label`
\*If there is no scope needed, you don't need to write it
### 3. Description
Description must fully explain what is being done.
Add BREAKING CHANGE in the description if there is a significant change.
**If there are multiple changes, then commit one by one**
- After colon, there are a single space Ex: `feat: add something`
- When using `fix` type, state the issue Ex: `fix: file size limiter not working`
- Use imperative, and present tense: "change" not "changed" or "changes"
- Don't use capitals in front of the sentence
- Don't add full stop (.) at the end of the sentence
