User CRUD

A full-stack web application for comprehensive user management with CRUD operations, built with Next.js and Express.js.

Built in May 2023. This JavaScript application provides a modern, responsive interface for managing users with features including pagination, sorting, filtering, and random user generation via external API integration.

Features

• 👤 Complete CRUD operations for user management
• 📊 Paginated data table with customizable page size
• 🔄 Sort by any column (ascending/descending)
• 🎲 Random user generation from external API
• ✏️ Inline editing for user fields
• 📱 Fully responsive Material-UI design
• 🔍 RESTful API with comprehensive Swagger documentation
• ✅ Client-side validation with Yup
• 🛡️ Server-side validation with Joi
• 📝 Request logging with Winston
• 🎨 Modern UI with Material-UI components
• 🔌 Infrastructure for authentication and authorization (extensible)

Architecture

flowchart TB
    subgraph Client["Client (Next.js)"]
        UI[React Components]
        Hooks[Custom Hooks]
        Models[Data Models]
        Validation[Yup Validation]
    end
    
    subgraph Server["Server (Express.js)"]
        Routes[API Routes]
        Controllers[Controllers]
        Models_Server[Models]
        Middleware[Middlewares]
        Validation_Server[Joi Validation]
        Logger[Winston Logger]
    end
    
    subgraph External["External Services"]
        RandomAPI[Random User API]
    end
    
    UI --> Hooks
    Hooks --> Models
    Models --> Validation
    
    UI -->|HTTP Requests| Routes
    Routes --> Middleware
    Middleware --> Validation_Server
    Validation_Server --> Controllers
    Controllers --> Models_Server
    Controllers --> Logger
    
    Models_Server -->|Generate Random User| RandomAPI
    
    Models_Server -->|Response| Controllers
    Controllers -->|JSON| UI
    
    style Client fill:#e1f5ff
    style Server fill:#fff3e0
    style External fill:#f3e5f5

Loading

Data Flow

sequenceDiagram
    participant User
    participant Client
    participant Server
    participant Memory
    participant ExternalAPI
    
    User->>Client: Interact with UI
    Client->>Client: Validate with Yup
    Client->>Server: HTTP Request
    Server->>Server: Log Request (Winston)
    Server->>Server: Validate with Joi
    Server->>Memory: CRUD Operation
    Memory-->>Server: Data
    Server-->>Client: JSON Response
    Client-->>User: Update UI
    
    Note over User,Client: Random User Flow
    User->>Client: Click "Add Random User"
    Client->>Server: POST /api/users/random
    Server->>ExternalAPI: Fetch Random User
    ExternalAPI-->>Server: User Data
    Server->>Memory: Store User
    Server-->>Client: New User
    Client-->>User: Display New User

Loading

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (comes with Node.js)
• Modern web browser

Installation

1. Clone the repository:

git clone https://github.com/orassayag/users-crud.git
cd users-crud

2. Install server dependencies:

cd server
npm install

3. Install client dependencies:

cd ../client
npm install

Running the Application

1. Start the Server (in the server directory):

cd server
npm run dev

Server runs on: http://localhost:8081

2. Start the Client (in a new terminal, in the client directory):

cd client
npm run dev

Client runs on: http://localhost:3000

Accessing the Application

• Web Interface: http://localhost:3000
• API Documentation (Swagger): http://localhost:8081/api-docs/

Project Structure

users-crud/
├── client/                     # Next.js frontend application
│   ├── public/                # Static assets (images, icons)
│   ├── src/
│   │   ├── components/        # React components
│   │   ├── hooks/            # Custom React hooks
│   │   ├── models/           # Data models and helpers
│   │   ├── pages/            # Next.js pages
│   │   └── styles/           # SCSS modules
│   ├── jsconfig.json
│   ├── next.config.js
│   └── package.json
│
├── server/                    # Express.js backend application
│   ├── config/               # Environment configuration
│   ├── src/
│   │   ├── bin/             # Server entry point (www.js)
│   │   ├── config/          # Constants and configuration
│   │   ├── controllers/     # Route controllers (business logic)
│   │   ├── custom/          # Custom classes (errors, events)
│   │   ├── helpers/         # Helper utilities
│   │   ├── middlewares/     # Express middlewares
│   │   ├── models/          # Data access layer
│   │   ├── routes/          # API route definitions
│   │   ├── services/        # Services (logger, swagger)
│   │   ├── utils/           # Utility functions
│   │   ├── validations/     # Joi validation schemas
│   │   └── app.js           # Express app configuration
│   └── package.json
│
├── CONTRIBUTING.md           # Contribution guidelines
├── INSTRUCTIONS.md           # Detailed setup and usage
├── LICENSE                   # MIT license
└── README.md                # This file

API Endpoints

Users API

Method	Endpoint	Description
GET	/api/users	Get all users with pagination and sorting
GET	/api/users/:id	Get a specific user by ID
POST	/api/users	Create a new user
POST	/api/users/random	Generate and add a random user
PUT	/api/users/:id	Update an existing user
DELETE	/api/users/:id	Delete a user

Query Parameters for GET /api/users

• sortBy - Column to sort by (e.g., firstName, lastName, email)
• sortOrder - Sort direction (asc, desc)
• pagerNumber - Current page number
• pagerRowsPerPage - Number of items per page

For complete API documentation with request/response examples, visit the Swagger UI at http://localhost:8081/api-docs/

Technology Stack

Frontend

• Framework: Next.js 13.3.0
• UI Library: React 18.2.0
• Component Library: Material-UI (MUI) 5.12
• Styling: SCSS Modules + MUI Styled Components
• Validation: Yup 1.1.1
• HTTP Client: Axios 1.3.5

Backend

• Framework: Express.js 4.18.2
• Validation: Joi 17.9.2
• Logging: Winston 3.8.2
• API Documentation: Swagger (swagger-jsdoc, swagger-ui-express)
• HTTP Client: Axios 1.4.0
• Middleware: CORS, Compression, Cookie Parser

Development Tools

• Linting: ESLint (Airbnb style guide)
• Dev Server: Nodemon (server hot-reload)
• Module System: ES Modules (ESM)

Key Features Explained

In-Memory Data Storage

Users are stored in memory (simulating a database) for rapid development and testing. The data structure supports:

• Automatic ID generation
• Email uniqueness validation
• Full CRUD operations

Random User Generation

Integrates with an external API to fetch random user data, demonstrating:

• External API integration
• Data transformation and normalization
• Error handling for network requests

Validation Layers

• Client-side: Yup schemas validate forms before submission
• Server-side: Joi schemas validate all incoming requests
• Model-level: Business logic validation (e.g., email uniqueness)

Logging

Winston logger captures:

• All HTTP requests with timestamps
• Error details with stack traces
• Custom log levels (info, error, debug)

Error Handling

• Custom error class with status codes
• Centralized error middleware
• Graceful error responses to client

Development

Available Scripts

Server

npm run dev       # Start development server with nodemon
npm run test      # Run tests (when implemented)

Client

npm run dev       # Start Next.js development server
npm run build     # Build for production
npm run start     # Start production server
npm run lint      # Run ESLint

Code Quality

The project follows:

• Airbnb JavaScript style guide
• ESLint configuration for code consistency
• JSDoc comments for documentation
• Separation of concerns (MVC pattern)

Testing

Currently, manual testing is used. See INSTRUCTIONS.md for the testing checklist.

Future enhancements: Automated tests with Mocha, Chai, Supertest (backend) and Jest, React Testing Library (frontend).

Contributing

Contributions to this project are released to the public under the project's open source license.

Everyone is welcome to contribute. See CONTRIBUTING.md for detailed guidelines on:

• Reporting issues
• Submitting pull requests
• Code style guidelines
• Development workflow

Roadmap

Short-term

• Add TypeScript support
• Implement automated testing
• Add database persistence (MongoDB/PostgreSQL)
• Enhance error handling on client

Long-term

• Add authentication and authorization
• Implement real-time updates with WebSockets
• Add Redux for state management
• Create admin dashboard
• Deploy to cloud platform (Vercel/AWS)

Known Limitations

• Data is stored in memory (lost on server restart)
• No authentication/authorization
• Some ESLint issues need manual fixes
• No automated tests yet
• Country filter not implemented

See INSTRUCTIONS.md for the complete list of planned improvements.

Author

• Or Assayag - Initial work - orassayag
• Or Assayag orassayag@gmail.com
• GitHub: https://github.com/orassayag
• StackOverflow: https://stackoverflow.com/users/4442606/or-assayag?tab=profile
• LinkedIn: https://linkedin.com/in/orassayag

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Random user data provided by randomuser.me
• Material-UI for the excellent component library
• Next.js and Express.js communities for great documentation and support