User Dashboard, a Full-Stack CRUD with React, Nodejs and TanStack Query

Overview

This project is a full-stack learning project built to deepen my understanding of modern frontend architecture and product-level engineering.

The application is a User Management Dashboard that allows creating, updating, deleting, searching, sorting, and paginating users through a REST API.

The goal of this project was not only to build UI components but also to understand how frontend applications interact with server data, caching layers, and query parameters in real-world systems.

Through this project I explored patterns commonly used in production dashboards and admin panels.

Features

User Management

• Create new users
• Edit existing users
• Delete users
• Form handling with reusable components

Data Fetching

• Server-driven data using Tanstack Query
• Automatic caching
• Query invalidtion
• Mutations for CRUD operations
• Optimistic UI updates

Table Controls

• Search users by name, email or role
• Sort users (ascending / descending)
• Pagination
• Dynamic page limits
• Server side filtering

UI States

• loading state
• Error State
• Empty state when no users are found

Tech Stack

Layer	Technology	Purpose
Frontend	React	Component-based UI
--	TypeScript	Static typing and safer development
Data Fetching	TanStack Query	Server state management and caching
Backend	Node.js	REST API
Data Storage	JSON file	Lightweight persistence for development

The Backend is implemented using the native Node.js HTTP module, without frameworks, to better understand request handling and server architecture

Project Architecture

Frontend

• Separation between API layer and UI
• Reusable modal components for create/edit forms
• Generic form management hook
• Query parameters controlling server data

Backend

Implements a simple REST API

• GET /users
• GET /users/:id
• POST /users
• PUT /users/:id
• DELETE /users/:id

Additional server capabilities

• Filtering
• Search
• Sort
• Pagination
• Metadata responses

{
  data: User[],
  meta: {
    total: number,
    page: number,
    limit: number,
    totalPages: number,
    hasNextPage: boolean,
    hasPrevPage: boolean
  }
}

Example Query Parameters

/users?page=1
/users?limit=10
/users?search=john
/users?sort=name
/users?sort=-name

Thes parameters are used by the frontend to dynamically update the UI while keeping the server as the source of truth.

Concepts practiced

This project helped reinforce several important frontend engineering concepts

Server State Management

• Query Keys
• Query cache
• Invalidating queries
• Mutations
• Optimistic updates

Typescript patterns

• Generics
• Utility types Omit , keyof
• Shared API types
• Strongly typed form state

Frontend Architecture

• Reusable UI components
• Custom hooks
• Separation of concerns
• Data-driven UI

Fullstack thinking

• Designing query parameters
• Backend filtering logic
• API response structures
• Server-driven pagination

Running the project

Backend cd backend node server.js

Frontend npm install npm run dev

Author

Isaac Rios Frontend/UI Engineer transitioning towards Product Engineering by combining UI, logic and backend understanding