A full-stack user management system built with Node.js/TypeScript backend and React/TypeScript frontend. Features user pagination, post management, and address integration.

• Project Overview
• Prerequisites
• Installation
• Database Setup
• Running the Application
• API Endpoints
• Project Structure

This application allows users to:

• View a paginated list of users (4 per page)
• Click on a user to view their posts
• Create new posts for users
• Delete posts
• View user details including formatted addresses

Tech Stack:

• Backend: Node.js, Express, TypeScript, SQLite
• Frontend: React, TypeScript, React Query, Tailwind CSS, shadcn/ui

Before you begin, ensure you have the following installed:

• Node.js
• npm
• Mac/Linux/Windows terminal

You can verify your installations by running:

node --version
npm --version

git clone
cd web-developer-assignment-Public

cd backend
npm install

cd ../frontend
npm install

The SQLite database (data.db) is already provided in the backend folder with all necessary data (users, posts, and addresses).

Note: No migrations are required. The database schema is pre-configured with:

• users table (contains user information)
• posts table (contains user posts)
• addresses table (contains address information linked to users)

If you need to reset the database, delete backend/data.db and it will be recreated on first run.

Open a terminal and run:

cd backend
npm run dev

The backend will start on http://localhost:3001

You should see:

API server is running on port 3001

cd frontend
npm run dev

The frontend will start on http://localhost:5173

Navigate to http://localhost:5173 in your browser to view the application.

• GET /users?pageNumber=0&pageSize=4 - Get paginated list of users
• GET /users/count - Get total number of users
• GET /users/:id - Get a single user by ID with address details

Example Request:

curl http://localhost:3001/users?pageNumber=0&pageSize=4

Example Response:

[
  {
    "id": "ee10b0e8346a4a0d990668fd1155fbc2",
    "name": "Dr. Adolph Medhurst",
    "username": "CRJFvWA",
    "email": "[email protected]",
    "phone": "106-725-1483",
    "street": "5306 Ritchie Highway",
    "city": "Baltimore",
    "state": "MD",
    "zipcode": "21225",
    "address": "5306 Ritchie Highway, MD, Baltimore, 21225"
  }
]

• GET /posts?userId={userId} - Get all posts for a specific user
• POST /posts - Create a new post for a user
• DELETE /posts/:id - Delete a post by ID

Create Post Request:

curl -X POST http://localhost:3001/posts \
  -H "Content-Type: application/json" \
  -d '{
    "userId": "ee10b0e8346a4a0d990668fd1155fbc2",
    "title": "My First Post",
    "body": "This is the body of my first post."
  }'

Create Post Response (201 Created):

{
  "id": 1,
  "user_id": "ee10b0e8346a4a0d990668fd1155fbc2",
  "title": "My First Post",
  "body": "This is the body of my first post.",
  "created_at": "2025-11-27T10:30:45.123Z"
}

Delete Post Request:

curl -X DELETE http://localhost:3001/posts/1

Delete Post Response (204 No Content):

HTTP 204 No Content

web-developer-assignment-Public/
├── backend/
│   ├── src/
│   │   ├── index.ts                 # Express app setup
│   │   ├── routes/
│   │   │   ├── users.ts            # User endpoints
│   │   │   └── posts.ts            # Post endpoints
│   │   └── db/
│   │       ├── connection.ts       # SQLite connection
│   │       ├── users/
│   │       │   ├── users.ts        # User DB functions
│   │       │   ├── query-templates.ts
│   │       │   └── types.ts
│   │       └── posts/
│   │           ├── posts.ts        # Post DB functions
│   │           ├── query-tamplates.ts
│   │           └── types.ts
│   ├── config/
│   │   └── default.json            # Port and database config
│   ├── data.db                      # SQLite database
│   ├── package.json
│   └── tsconfig.json
│
├── frontend/
│   ├── src/
│   │   ├── core/
│   │   │   ├── user.tsx           # Users table page with pagination
│   │   │   └── posts.tsx          # User posts page
│   │   ├── api/
│   │   │   ├── user.api.ts        # User API calls
│   │   │   └── posts.api.ts       # Post API calls
│   │   ├── service/
│   │   │   └── api.service.ts     # Axios instance configuration
│   │   ├── components/
│   │   │   └── ui/                # shadcn/ui components
│   │   └── App.tsx
│   ├── package.json
│   └── vite.config.ts
│
└── README.md

• ✅ User endpoints with pagination (4 users per page)
• ✅ User count endpoint
• ✅ Single user endpoint with address details
• ✅ Address integration and formatting ("street, state, city, zipcode")
• ✅ Post creation endpoint with validation
• ✅ Post deletion endpoint
• ✅ Error handling and appropriate HTTP status codes
• ✅ CORS enabled for frontend communication

• ✅ Users table with pagination (4 per page)
• ✅ User details display (name, email, formatted address)
• ✅ Navigate to user posts on row click
• ✅ Display user posts with title and body
• ✅ Delete post functionality
• ✅ Create new post form
• ✅ Loading and error states
• ✅ React Query for state management
• ✅ Tailwind CSS and shadcn/ui components
• ✅ Responsive design

If port 3001 is already in use, change it in backend/config/default.json:

{
  "port": 3002,
  "dbPath": "./data.db"
}

Then update the frontend API base URL in frontend/src/service/api.service.ts to match the new port.

Ensure:

1. Backend server is running on http://localhost:3001
2. Check that CORS is enabled (already configured in backend)
3. Check browser console (F12) for specific error messages
4. Verify the API base URL in frontend matches the backend port

If you encounter database errors:

1. Delete backend/data.db
2. Restart the backend server
3. The database will be recreated on first run

Clear npm cache and retry:

npm cache clean --force
npm install

cd backend
npm run dev          # Start with hot reload
npm run build        # Compile TypeScript
npm start            # Run compiled version

cd frontend
npm run dev          # Start development server
npm run build        # Build for production

# Install all dependencies (run from each directory)
npm install

# Start backend development server
cd backend && npm run dev

# Start frontend development server
cd frontend && npm run dev

# Build for production
npm run build

• The database uses SQLite and is file-based (data.db)
• User IDs are UUIDs (strings), not numeric
• All timestamps are stored in ISO 8601 format
• Address formatting is automatic ("street, state, city, zipcode")
• Posts are displayed in reverse chronological order (newest first)