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: 3 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 (3 months ago)
- Default Branch: main
- Last Pushed: 2025-10-22T15:14:37.000Z (3 months ago)
- Last Synced: 2025-10-22T17:23:50.048Z (3 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 App
A full-stack **MERN** application for managing user data with modern React tools. Built with **React Query (TanStack Query)** for data fetching, **Axios**, **Express**, **MongoDB**, and **Tailwind CSS**.
### 🚀 Live Demo
- Frontend: [react-tanstack-crud.vercel.app](https://react-tanstack-crud.vercel.app)
- Backend API: [react-tanstackquery-crud.onrender.com](https://react-tanstackquery-crud.onrender.com)
---
## ✨ Features
- ✅ CRUD operations: Create, Read, Update, Delete users
- ⚡ Instant updates via React Query caching
- 🔄 Real-time state sync after mutation (`invalidateQueries`)
- 🖼️ Clean UI with Tailwind CSS & React Icons
- 🌐 CORS-enabled for frontend/backend deployment
- 🔧 Responsive and mobile-friendly layout
---
## 🛠️ Tech Stack
### Frontend
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [React Query (TanStack)](https://tanstack.com/query/latest)
- [Axios](https://axios-http.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [React Icons](https://react-icons.github.io/react-icons)
### Backend
- [Node.js](https://nodejs.org/)
- [Express](https://expressjs.com/)
- [MongoDB + Mongoose](https://mongoosejs.com/)
- [CORS](https://www.npmjs.com/package/cors)
- [dotenv](https://www.npmjs.com/package/dotenv)
---
## 📦 Installation
### 🔹 Backend
```bash
cd backend
npm install
# .env file
PORT=5000
MONGODB_URI=your_mongodb_uri
# .env file for frontend
VITE_BACKEND_URL=your_backendUrl
```
---
## 👤 Author
**Dheepak Y**
- **GitHub:** [dheepaky](https://github.com/dheepaky)
- **Portfolio:** [dheepaky-portfolio](https://dheepaky-portfolio.vercel.app/)