Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/warmachine028/react-query-demo

A react query demo CRUD application using vite/shadcn
https://github.com/warmachine028/react-query-demo

bun dummy-json elysiajs picsum react react-query shadcn-ui vite zustand

Last synced: 10 days ago
JSON representation

A react query demo CRUD application using vite/shadcn

Awesome Lists containing this project

README

        

updated on: 26th October 2024, Saturday



react-query-demo

A react query demo CRUD application using vite/shadcn



GitHub forks

# [React Query Demo](https://github.com/warmachine028/react-query-demo)

![line]

## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation-guide)
- [Tech Stack Used](#tech-stack-used)
- [Preview](#preview)
- [Best Contributors](#best-contributors)
- [License](#license)

![line]

## Introduction

- A Vite-based CRUD application utilizing React Query for efficient data fetching and management, supporting Create, Read, Update, and Delete operations.
- Styled with Shadcn, it features a responsive, clean UI ideal for dynamic data-driven applications.

![line]

## Installation Guide

1. Download Bun
2. Run the following commands for running client (frontEnd)
3. set up `.env` with the help of `.env.example` file in client
```sh
$> cd client
$> bun i # install all packages
$> bun dev # run the frontend
```
3. Run the following commands for running server (backEnd)
```sh
$> cd server
$> bun i # install all packages
$> bun dev # run the backEnd
```

## Tech Stack Used
- **Frontend:** React, React Query
- **Styling:** Radix UI, Shadcn UI, TailwindCSS
- **State Management:** Zustand
- **Backend:** Elysia
- **Package Manager:** Bun
- **Deployment:** Vercel

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![React Query](https://img.shields.io/badge/-React%20Query-FF4154?style=for-the-badge&logo=react%20query&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Framer](https://img.shields.io/badge/Framer-black?style=for-the-badge&logo=framer&logoColor=blue)
![TypeScript](https://img.shields.io/badge/typescript-white?style=for-the-badge&logo=typescript&logoColor=blue)
![Radix UI](https://img.shields.io/badge/radix%20ui-161618.svg?style=for-the-badge&logo=radix-ui&logoColor=white) ![shadcn/ui](https://img.shields.io/badge/Shadcn/ui-black?style=for-the-badge&logo=shadcnui&logoColor=white) ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
![Elysia](https://img.shields.io/badge/elysia-%23000000.svg?style=for-the-badge&logo=elysia&logoColor=white) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) ![Zustand](https://img.shields.io/badge/zustand-%23323330.svg?style=for-the-badge&logo=zustand&logoColor=%23F7DF1E)
![Bun](https://img.shields.io/badge/Bun-%23000000.svg?style=for-the-badge&logo=bun&logoColor=white)
![line]

## Preview



preview

![line]

## Best Contributors



contributors

![line]

## License

- See [LICENSE]

**Pritam Kundu, 2024**

![line]

## Thank you, everyone 💚

[icons]: https://icons8.com
[markdown-badges]: https://github.com/Ileriayo/markdown-badges
[custom-icons]: https://simpleicons.org
[line]: https://user-images.githubusercontent.com/75939390/137615281-3a875960-92cc-407f-97fe-fd2319bdb252.png
[License]: https://github.com/warmachine028/react-query-demo/blob/main/LICENSE