https://github.com/dheepaky/react-tanstack
MERN CRUD app using React Query (TanStack). Deployed on Vercel & Render
https://github.com/dheepaky/react-tanstack
boilerplate boilerplate-template crud express mern mongodb mongoose node react reactjs tailwind-css tanstack-query tanstack-query-axios web-development
Last synced: about 2 months ago
JSON representation
MERN CRUD app using React Query (TanStack). Deployed on Vercel & Render
- Host: GitHub
- URL: https://github.com/dheepaky/react-tanstack
- Owner: dheepaky
- Created: 2025-10-06T14:09:49.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-22T15:14:37.000Z (7 months ago)
- Last Synced: 2025-10-22T17:23:50.048Z (7 months ago)
- Topics: boilerplate, boilerplate-template, crud, express, mern, mongodb, mongoose, node, react, reactjs, tailwind-css, tanstack-query, tanstack-query-axios, web-development
- Language: JavaScript
- Homepage: https://react-tanstack-crud.vercel.app
- Size: 79.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚛️ React + TanStack CRUD Application
> A modern, high-performance CRUD app built with **React** and **TanStack Query** for fast, reactive, and optimized data fetching.
🎯 **Live Demo:** [https://react-tanstack-crud.vercel.app/](https://react-tanstack-crud.vercel.app/)
* **🌐Backend:** [https://react-tanstack-crud.onrender.com/](https://react-tanstack-crud.onrender.com/)
* **Frontend vercel:** [http://vercel.com/](http://vercel.com/)
* **Backend Render:** [https://render.com/](https://render.com/)
📦 **GitHub Repo:** [dheepaky/React-tanstack](https://github.com/dheepaky/React-tanstack)
---
## ✨ Overview
This project demonstrates how to build a clean and efficient **CRUD application** using the **TanStack Query** (React Query) ecosystem.
It showcases best practices in component design, API data handling, and application structure — perfect for learning or using as a starter template.
---
## 🛠️ Tech Stack
| Category | Technologies |
|-----------|--------------|
| **Frontend** | React, TanStack Query (React Query), React Router |
| **Backend** | Node.js, Express.js |
| **Deployment** | Vercel |
| **Styling** | CSS , Tailwind |
| **State Management** | TanStack Query Cache |
---
## ⚙️ Features
✅ Fully functional CRUD (Create, Read, Update, Delete)
✅ Uses **TanStack Query** for smart caching and background refetching
✅ Clean and modular folder structure
✅ **Optimistic updates** for a smooth UX
✅ Responsive layout for desktop & mobile
✅ Easily deployable (Vercel-ready)
---
---
## 🚀 Getting Started
### 1️⃣ Clone the Repository
```bash
git clone https://github.com/dheepaky/React-tanstack.git
cd React-tanstack
# Backend
cd backend
npm install
# Frontend
cd ../frontend
npm install
# Start backend
cd backend
npm run dev
# Start frontend
cd ../frontend
npm start
```
## 🤝 Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'feat: Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
## 📄 License
Distributed under the **MIT License**. See the `LICENSE` file for more information.
---
## 👤 Author
**Dheepak Y**
* **GitHub:** [dheepaky](https://github.com/dheepaky)
* **Project Link:** [https://github.com/dheepaky/React-tanstack](https://github.com/dheepaky/React-tanstack)
---