User-items-app

A simple full-stack application demonstrating a filterable list of items. The backend is built with Java Spring Boot, and the frontend is a React JavaScript app. The UI component should render an input field that allows the user to enter a search term. As the user types, the component should filter the list of items and display only those whose name property includes the search term. If the user clears the search input, the component should display all the items.

Features

• Filterable List: Display a list of items that can be filtered in real time.

• Server-side Filtering: Backend endpoint accepts a filter query parameter and returns matching items.

• Testing Unit test cases for frontend, unit, and integration test cases for backend.

• Note: I have hard-coded some item data in the backend using DataLoader.java. I have also provided an API (details below) to add item data on the backend.

Tech Stack

• Backend: Java, Spring Boot, REST API
• Frontend: React, Javascript
• Build Tools: Gradle (Backend), npm/Yarn (Frontend)
• Containeraization Docker

Prerequisites

• Java 11+
• Gradle (optional, wrapper included)
• Node.js 16+ and npm or Yarn
• Git
• Docker

Getting Started

1. Clone the repository

git clone [email protected]:siladitya2/user-items-app.git
cd user-items-app

2. Backend – Spring Boot

1. Navigate to the backend directory:

   cd user-items-service

2. Build and run the Spring Boot application:

   ./gradlew bootRun

3. The API will start on http://localhost:8080.

Backend Endpoints

• GET /api/v1/items

  • Returns all items.

• GET /api/v1/items?filter={term}

  • Returns items whose name contains {term} (case-insensitive).

Example:

curl "http://localhost:8080/api/v1/items?filter=A"

• POST /api/v1/item

• Adds a new item. Accepts a JSON body with a name property.

Example:

  curl -X POST http://localhost:8080/api/v1/item \
     -H "Content-Type: application/json" \
     -d '{"name":"Grape"}'

Returns the created item.

3. Frontend – React TypeScript

1. Navigate to the frontend directory:

   cd user-items-ui

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm start
   # or
   yarn start

4. Open your browser at http://localhost:3000.

Usage

1. Start backend and frontend as described above.
2. In the browser, type a search term into the input field to filter the list of items.
3. Clear the input to return to the full list.

Docker Compose

I provided a docker-compose.yml to build and run both backend and frontend together.

Usage

From the project root, run:

docker-compose up --build

This will:

Build and start the backend service on http://localhost:8080

Build and start the frontend service on http://localhost:3000 (proxied to backend via container network)

Press CTRL+C to stop and tear down the containers.

Future Enhancements

1. Support for Pagination.
2. Authentication and Authorization.