Search Engine Response Page
Demo
https://awesome-mestorf-f36572.netlify.app/?
SERP is a Trie + levenshtein distance based, mobile-ready, localstorage run, bootstrap - Jquery powered Search engine response page which comes with default dataset of some marvel characters and lets you add/index your own entries and stores them on browser's localstorage for you to use later. Keep in mind, it doesn't have a backend and hence any entry made will only be available on same device (just trying to display search capabilties using pure javascript)
Features
- Lists all searchable entries
- Let's you add into searchable entries by submiting simple form that stores your entry into localstorage
- Remembers your search history
- gives search suggestions as you type
- autocorrects (Did you mean "XYZ") when you searched with wrong spellings
Tech
SERP uses a number of open source projects:
- Twitter Bootstrap - great UI boilerplate for modern web apps and to make the UI responsive!
- JQuery - Primarily for the ease of DOM manipulation
- autosuggest-trie - Minimalistic trie implementation for autosuggest and autocomplete components in pure javascript.
- Browserify - Browserify lets you require('modules') in the browser by bundling up all of your dependencies. It is used to bundle autosuggest-trie and js-levenshtein to be used on browsers.
- js-levenshtein - Pure JS implementation calculating the Levenshtein distance between two strings.
Installation
SERP requires Node.js and npm to install and bundle JS dependecies.
Install the node and npm if it is not installed and do the following.
npm install -g browserify
npm install autosuggest-trie
npm install js-levenshtein
Once installed, move ahead to bundle the dependencies with browserify:
browserify main.js -o bundle.js
Deployment
You are free to deploy and host it with absolutely any hosting/web service. The repository has index.html which serves as default page and is implicitly recognised as default home page of any hosted web whereever you deploy it.
For simplicity, you can just clone the repo make your own changes as you need and use your own repo with netlify or similar services to link your github repository for an automated github event trigger based continuous deployment.
to know more follow step by step guide here: https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app
License
MIT
Free Example Implementation, Hell Yeah!