A full-stack application demonstrating Elasticsearch functionality with a Google-like product search interface. Built with Vue.js, Express.js, and Elasticsearch.
Search demo
Health check endpoint to ensure the application is running
Initial search interface with Google-like design
Exact match search results
Fuzzy match search results (with typo)
Search results pagination
Search suggestions as you type
Kibana dashboard showing document details
Kibana dashboard showing document details
Kibana dashboard showing product index settings
Kibana dashboard showing product index mapping
- 🔍 Real-time product search with exact and fuzzy matching (with suggestions in typo cases)
- 💡 Search suggestions as you type
- 📱 Responsive Google-like interface
- 📊 Search results pagination
- ⚡ Fast search performance
- 📈 Kibana integration for data visualization
Before you begin, ensure you have the following installed:
- Docker
- Docker Compose
- Git
- Clone the repository:
git clone https://github.com/hadarisas/elasticsearch-demo.git
cd elasticsearch-demo
cp server/env_example server/env- Start the application using Docker Compose:
docker compose up -d- Wait for all services to start (this may take a few minutes on first run). You can check the status with:
docker compose ps- Access the application:
- Frontend: http://localhost:8080
- API Server: http://localhost:3001
- Elasticsearch: http://localhost:9200
- Kibana: http://localhost:5601
- Health Check: http://localhost:3001/health
The application consists of four main components:
- Frontend (Vue.js): A responsive web interface running on port 8080
- Backend (Express.js): REST API server running on port 3001
- Elasticsearch: Search engine running on port 9200
- Kibana: Data visualization platform running on port 5601
If you want to modify the code and run the services individually:
- First, start Elasticsearch and Kibana using the development Docker Compose file:
docker compose -f docker-compose.copy.yml up -d- Set up the Frontend:
cd client
npm install
npm run devThe frontend will be available at http://localhost:5173
- Set up the Backend:
cd server
cp .env.example .env # Configure your environment variables
npm install
npm run devThe backend will be available at http://localhost:3001
Note: For development, we use
docker-compose.copy.ymlwhich only runs Elasticsearch and Kibana services. This allows you to run the frontend and backend services locally while still connecting to the containerized search infrastructure.
- URL:
/api/search - Method:
GET - Query Parameters:
q: Search querypage: Page number (default: 1)limit: Results per page (default: 5)
- Example:
http://localhost:3001/api/search?q=iphone&page=1&limit=5
- URL:
/health - Method:
GET - Example:
http://localhost:3001/health
The application uses the following Docker images:
- Frontend:
hadarisas/elasticsearch-demo-client:1.0 - Backend:
hadarisas/elasticsearch-demo-server:1.0 - Elasticsearch:
docker.elastic.co/elasticsearch/elasticsearch:8.12.0 - Kibana:
docker.elastic.co/kibana/kibana:8.12.0
-
Services not starting:
# Check service logs docker compose logs -f -
Elasticsearch not healthy:
# Check Elasticsearch status curl http://localhost:9200/_cluster/health -
Reset everything and start fresh:
docker compose down -v docker compose up -d
The application comes with pre-loaded sample product data. The data is automatically initialized when the server starts. If you need to reset the data:
-
Stop the containers:
docker compose down
-
Remove the volume:
docker volume rm elasticsearch-demo_elasticsearch-data
-
Restart the application:
docker compose up -d
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
EL HADRI HASSAN - hadarisas@gmail.com
Project Link: https://github.com/hadarisas/elasticsearch-demo