A reference implementation of autocomplete using react, rxjs, apollo, redis and mongodb
Web application front-end
- React: Search page is pure function component. Component is written in react hooks
- CSS: Material-ui
- RxJS: dom event stream. It handles:
- Debounce user input in 250ms
- Filter out invalid input
- Avoid duplicate query in a short time frame (user types 'a', then 'ab', then back to 'a')
- Allow only single one effective http request
- Axios: http requests contain JWT tokens
Web application back-end
- Apollo: GraphQL service layer
- Express: a node server
- Search service: pure ES6 functions that are exposed as REST api
DataBase
- Redis: In-memory cache, will sync with mongodb in case of cache miss, suggestion score increment, etc.
- MongoDB
Data Structure: Prefix Hash Tree
Images are from prefixy
Data MapReduce
N/A
Quick Reference
- Search backend: https://github.com/BigFatDog/autocomplete/tree/master/server/api/search
- Search frontend https://github.com/BigFatDog/autocomplete/blob/master/app/containers/Search/index.js
Installation
This instructions are based on MacOS
- install mongodb and redis
- start mongo server
mongod
- start redis server
redis-server
- clone this project from
https://github.com/BigFatDog/autocomplete.git
- Modify
setting.json
to make sure connections to mongo and redis are correct - Start server, application will be available on port
3010
npm install
npm run start
-
Register a user in register page
-
seed sample data to mongodb and redis by clicking the battery button at the bottom right of search page