Building Google Style Search Autocomplete System - Part 4 React Frontend and AWS Deployment

Build the Google-style autocomplete frontend using React and TypeScript, connect it with Spring Boot APIs, and deploy the application using AWS S3 and CloudFront.

Building React Search Autocomplete Frontend

In this part, we will build the user-facing search experience. The frontend will provide real-time suggestions like Google search, communicate with Spring Boot APIs, handle typing delays using debounce, and finally deploy on AWS.

Frontend Architecture

User

 |
 |

React Search Component

 |
 |

Debounce Hook

 |
 |

Axios API Client

 |
 |

Spring Boot Search API

 |
 |

Redis + Elasticsearch

Create React Application

npm create vite@latest frontend

Select:

Framework: React
Variant: TypeScript

cd frontend

npm install

Install Required Packages

npm install axios lodash

npm install @types/lodash

Frontend Folder Structure

src

├── api
│   └── searchApi.ts
│
├── components
│   └── SearchBox.tsx
│
├── hooks
│   └── useDebounce.ts
│
├── types
│   └── Search.ts
│
├── App.tsx
└── App.css

Configure Backend API URL

frontend/.env

VITE_API_URL=http://localhost:8080

Create API Service

import axios from 'axios';

const API_URL =
import.meta.env.VITE_API_URL
+
'/api/search';

export async function searchKeyword(query:string){

const response = await axios.get(
API_URL,
{
params:{q:query}
}
);

return response.data;

}

Create Search Type

export interface SearchResult {

keyword:string;

popularity:number;

}

Create Debounce Hook

Without debounce, every keyboard action creates an API request. Debounce waits until the user stops typing for a short time before sending the request.

import {useEffect,useState} from 'react';

export function useDebounce(
value:string,
delay:number
){

const [result,setResult]=useState(value);

useEffect(()=>{

const timer=setTimeout(()=>{
setResult(value);
},delay);

return ()=>clearTimeout(timer);

},[value,delay]);

return result;

}

Create Google Style Search Component

import {useEffect,useState} from 'react';
import {searchKeyword} from '../api/searchApi';
import {useDebounce} from '../hooks/useDebounce';

export default function SearchBox(){

const [text,setText]=useState('');
const [results,setResults]=useState<any[]>([]);

const searchText=useDebounce(text,400);

useEffect(()=>{

if(searchText.length < 2){
setResults([]);
return;
}

searchKeyword(searchText)
.then(data=>setResults(data));

},[searchText]);

return (
<div className='search-box'>

<input
value={text}
onChange={(e)=>setText(e.target.value)}
placeholder='Search here...'
/>

<ul>
{
results.map(item=>(
<li key={item.keyword}>
{item.keyword}
</li>
))
}
</ul>

</div>
);
}

Add Styling

.search-box{
width:500px;
margin:100px auto;
}

input{
width:100%;
padding:15px;
font-size:18px;
border-radius:25px;
}

li{
padding:12px;
background:white;
list-style:none;
cursor:pointer;
}

li:hover{
background:#eee;
}

Enable Spring Boot CORS

React and Spring Boot run on different ports during development. Spring Boot must allow requests from the React application.

@Configuration
public class CorsConfig implements WebMvcConfigurer{

@Override
public void addCorsMappings(CorsRegistry registry){

registry
.addMapping("/**")
.allowedOrigins("http://localhost:5173")
.allowedMethods("*");

}

}

Run Complete Local Application

# Start Infrastructure
docker compose up

# Start Backend
cd services/search-service
mvn spring-boot:run

# Start Frontend
cd frontend
npm run dev

Production Frontend Configuration

frontend/.env.production

VITE_API_URL=https://api.yourdomain.com

Build React Application

npm run build

AWS S3 Deployment

React applications are static files after building. AWS S3 provides a simple and scalable hosting solution.

  • Create S3 bucket
  • Enable static website hosting
  • Upload dist folder
  • Configure bucket permissions
  • Test website URL

CloudFront CDN Setup

CloudFront improves performance by serving frontend files from locations close to users.

  • Create CloudFront distribution
  • Set S3 bucket as origin
  • Enable HTTPS
  • Redirect HTTP to HTTPS
  • Configure index.html as default page

Connect AWS Frontend With Backend

User

 |
 |

CloudFront

 |
 |

React Application

 |
 |

HTTPS API Request

 |
 |

Spring Boot Backend

Production Architecture

Users

 |
 |

AWS CloudFront

 |
 |

S3 React Application

 |
 |

Load Balancer

 |
 |

Spring Boot Containers

 |
 |

Redis + Elasticsearch + PostgreSQL

 |
 |

Kafka Analytics

Complete Project Completed

  • React autocomplete UI completed
  • Spring Boot API integrated
  • Redis caching implemented
  • Elasticsearch search engine connected
  • Kafka analytics pipeline created
  • AWS frontend deployment completed

Final Learning Outcome

After completing this project, you understand how large-scale search systems are designed using frontend engineering, backend APIs, distributed caching, search engines, event streaming and cloud deployment.