{"id":15385053,"url":"https://github.com/manekinekko/angular-search-experience","last_synced_at":"2025-09-09T03:32:03.563Z","repository":{"id":139665248,"uuid":"129451788","full_name":"manekinekko/angular-search-experience","owner":"manekinekko","description":"Algolia + Angular = 🔥🔥🔥","archived":false,"fork":false,"pushed_at":"2021-06-17T09:59:33.000Z","size":6460,"stargazers_count":166,"open_issues_count":4,"forks_count":26,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-08T19:19:06.986Z","etag":null,"topics":["algolia","angular","autocomplete","chatbot","dialogflow","firebase","infinite-scroll","material-design","pwa","search","voice-assistant","voice-recognition"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manekinekko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-13T20:47:06.000Z","updated_at":"2024-08-09T05:38:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"71d9669d-1383-4227-bc55-fa011897d10c","html_url":"https://github.com/manekinekko/angular-search-experience","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.2857142857142857,"last_synced_commit":"c6708f775cfa222de3d6156718595b09fb021660"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/manekinekko/angular-search-experience","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manekinekko%2Fangular-search-experience","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manekinekko%2Fangular-search-experience/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manekinekko%2Fangular-search-experience/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manekinekko%2Fangular-search-experience/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manekinekko","download_url":"https://codeload.github.com/manekinekko/angular-search-experience/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manekinekko%2Fangular-search-experience/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274238705,"owners_count":25247110,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algolia","angular","autocomplete","chatbot","dialogflow","firebase","infinite-scroll","material-design","pwa","search","voice-assistant","voice-recognition"],"created_at":"2024-10-01T14:43:54.144Z","updated_at":"2025-09-09T03:32:02.725Z","avatar_url":"https://github.com/manekinekko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\" \u003eAngular Search Experience \u003cimg src=\"https://circleci.com/gh/manekinekko/angular-search-experience.svg?style=svg\u0026circle-token=105771fd560c9c0f5b5506dbe734a47cb67b083c\"/\u003e\u003c/h2\u003e\n\n\u003ch4 align=\"center\"\u003e\u003ci\u003ePowered by \u003cimg width=\"80\" src=\"https://user-images.githubusercontent.com/1699357/38993980-664e3d0a-43e5-11e8-9e8e-d99a08cc3aea.png\"/\u003e\u003c/i\u003e\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg align=\"center\"  height=\"700\" src=\"https://raw.githubusercontent.com/manekinekko/angular-search-experience/master/docs/screenshots/angular-search-experience.gif?token=ABnuHVlibKQ8XUcgrnJnoiAWm4eZMroBks5a6MtcwA%3D%3D\"/\u003e\n  \u003cbr\u003e\n  \u003ca align=\"center\" href=\"https://searchapp.store\" target=\"__blank\"\u003e\n\u003cimg align=\"center\" src=\"https://user-images.githubusercontent.com/1699357/39004007-769991ca-43fc-11e8-8fff-53fc916d34a8.png\" /\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\n# Disclaimer\n\nThis reference application is using the low level Algolia search library. If you're building a similar application, please use the official [Angular InstaSearch library](https://github.com/algolia/angular-instantsearch).\n\n\n# Setting up the project\n\n## Cloning the source files\n\nIn order to download (clone) this project on your machine, you need to have `git` installed. Read more on [how to install Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) on your system.\n\nOnce installed, open up a terminal shell and clone this repository using the following command:\n\n```\n\u003e git clone https://github.com/manekinekko/angular-search-experience.git\n```\n\n## Installing the dependencies\n\nYou will need `npm install` to install this project's dependencies. Next, Using your terminal, you will need to change directory to the folder where you previously cloned this project; by default (if you copied the command line from above) this would be `angular-search-experience`:\n\n```\n\u003e cd angular-search-experience\n\u003e npm install\n```\n\n## Developement server\n\nWe've decided to secure the Cloud Function (this is a good practice). So, in order to request the `search` API you'll have to append an `Authorization` header to your requests. Here is the required header `Authorization: SearchToken this-is-a-fake-token`. See an example of cURL command below.\n\nBefore you start the server, you will need to add a couple of environement variables inside a .env file, in the `/functions` folder. You can use this [env template file](https://github.com/manekinekko/angular-search-experience/blob/master/functions/env) as an example (rename it to .env, which is gitignored), and set:\n\n- algolia_applicationid=`YOUR_ALGOLIA_APPLICATION_ID`\n- algolia_apikey=`YOUR_ALGOLIA_API_KEY`\n\nYou can find your application id and your and api key at https://www.algolia.com/apps in the API Keys section. You need to create an account to get your api key.\n\n### Option 1 (recommended): Express\n\nIn order to try out the server on your local machine, run the following command: `npm run start:backend`\n\n### Option 2 (advanced):the backend (cloud function)\n\n\u003e This option requires you to be logged in to your firebase account and have access to this project (on firebase). Only caretakers have access to the firebase project!\n \nAnother version of the backend is relying on a Serverless architecture implemented using Cloud Functions for Firebase. \n\nThis project comes with `firebase-tools` as a local dependency. This tool is a set of Firebase Command Line Interface (CLI) tools that can generate, run and deploy a Firebase project. Please note that this dependency is usually installed globally.\n\nAlso, the Firebase runtime is using an older version of Node.js: `v6.11.5`. We've included a `.nvmrc` folder under `/functions`. This special file is a configuration file used by `NVM` to easily switch to a required version of Node.js inside a specific folder. If you don't already have `NVM` installed, please read [the installation guide](https://github.com/creationix/nvm#installation).\n\nUse `NVM` to install the required Node.js version and then use it (only inside the `/functions` folder):\n\n```\n\u003e nvm install 6.11.5\n\u003e nvm use\n```\n\nNow that you are using Node.js `v6.11.5`, you are ready to run (ie. emulate) the `search` Cloud Function locally. For that, run `npm run start:backend:firebase`. This command will do two things:\n\n1.  Change directory to the `/functions` folder (found at the root of the project). This folder contains all the backend code.\n1.  Serve the `search` Cloud Function locally on `http://localhost:5000/angular-search-experience/us-central1/search`\n\n\u003e Important: Please note that the `search` function implements only the `POST` and `DELETE` HTTP methods, allowing you to add and delete an entity, so you will need an HTTP client, such as `cURL` or `Postman`, to be able to request the Cloud Function.\n\n\n### the front-end application\n\nAt the root of the project, run `npm start` to start the front-end dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\nThe front-end application was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.2.\n\n## Build\n\nRun `npm run build` to build the project. The build artifacts will be stored under the `dist/angular-search-experience/` directory. Use the `npm run build:prod` script for a production build.\n\n## Deploy\n\nWe use Firebase hosting to publish the front-end application. Before deploying a new version, we need to build a production package using the following command:\n\n```\n\u003e npm run build\n```\n\nThen, we can deploy the new build to firebase:\n\n```\n\u003e npm run deploy\n```\n\n\u003e IMPORTANT: deploying to firebase requires access privilege (to the firebase project).\n\n\n# Production environments\n\n## Backend\n\nThe production endpoints (cloud function) are available on: \n1. POST: /api/1/apps\n2. DELETE: /api/1/apps/:id\n\nIn order to request the production Cloud Function, you can use this cURL commands:\n\n### Adding a new entry to Algolia's index\n\n\n```\n\u003e curl -H \"Authorization: SearchToken this-is-a-fake-token\" -H \"Content-Type: application/json\" -X POST -d '{}' https://example.com/api/1/apps\n\n{\"createdAt\":\"2018-04-19T13:17:10.343Z\",\"taskID\":29343382,\"objectID\":\"10788302\"}\n```\n\n\u003e NOTE: we don't validate the `application` object on purpose.\n\n### Deleting an entry from Algolia's index\n\n```\n\u003e curl -H \"Authorization: SearchToken this-is-a-fake-token\" -X DELETE https://example.com/api/1/apps/10788302\n\n{\"deletedAt\":\"2018-04-19T13:30:42.190Z\",\"taskID\":29353102,\"objectID\":\"10788302\"}\n```\n\n## Front-end\n\n# Architecture and available features (UI)\n\n## Component Architecture\n\n![](https://raw.githubusercontent.com/manekinekko/angular-search-experience/master/src/assets/images/angular-search-experience-composition.png?token=ABnuHfcLQ6jyPEkiaMdf0qrnWOpnLv_Bks5a4ibLwA%3D%3D)\n\n\n1. Component: `\u003capp-search\u003e\u003c/app-search\u003e`\n2. Component: `\u003capp-search-input\u003e\u003c/app-search-input\u003e` \n3. Component: `\u003capp-category\u003e\u003c/app-category\u003e`\n4. Component: `\u003capp-search-result\u003e\u003c/app-search-result\u003e` \n5. Component: `\u003cmat-nav-list\u003e\u003c/mat-nav-list\u003e`\n6. Directive: `[appRating]`\n7. Pipe: `freePriceLabel`\n\nRead more about the API documentation here: https://manekinekko.github.io/angular-search-experience/index.html\n\n\n## Features\n\n### Search box\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1699357/39013975-4dfb5358-4419-11e8-8335-855b2bdc29d7.gif\" width=\"800\"/\u003e\n\n\n### Search results with highlights\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1699357/39014284-3fc1aaac-441a-11e8-874b-9d903ae7def3.gif\" width=\"800\"/\u003e\n\n### Sort options\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1699357/38996538-b4bbca74-43eb-11e8-924d-852094e963fa.png\" width=\"800\"/\u003e\n\n\n### Facets options\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1699357/38996647-ede7a5de-43eb-11e8-8b16-9577ec017047.png\" width=\"800\"/\u003e\n\n\n### Lazy loading\n\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1699357/38998317-9817e1d8-43ef-11e8-958d-2601e233e95b.gif\" width=\"800\"/\u003e\n\n\n### Deeplinks\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1699357/39011672-6aca5576-4412-11e8-88de-a55dc9325f32.gif\" width=\"800\"/\u003e\n\n\n\n## DANGER ZONE: EASTER EGG AHEAD!\n\n\u003cdetails\u003e\n  \u003csummary\u003eEaster Egg inside!!\u003c/summary\u003e\n  \u003cp\u003e\n    We have included a chatbot this application. It can help you search for applications using your voice. Just ask it to \u003cb\u003ehelp you search for a weather app\u003c/b\u003e or \u003cb\u003efind a game\u003c/b\u003e.\n    \u003c/p\u003e\n  \n  To enable the bot, you will need to turn on your microphone and speakers. The, just click 6 times on the application logo (the header).\n  \n  \u003cb\u003eNOTE: The implementation of this bot is experimental (and for fun!) and was not trained against a large set of users' utterances!\u003c/b\u003e\n\u003c/details\u003e\n\n\n\n## Known issues\n\n#### Found incompatible module\n\n##### error dialogflow-fulfillment@0.3.0-beta.2: The engine \"node\" is incompatible with this module. Expected version \"~8.0\".\n\n```\nyarn install v1.5.1\n[1/4] 🔍  Resolving packages...\n[2/4] 🚚  Fetching packages...\nerror dialogflow-fulfillment@0.3.0-beta.2: The engine \"node\" is incompatible with this module. Expected version \"~8.0\".\nerror An unexpected error occurred: \"Found incompatible module\".\ninfo If you think this is a bug, please open a bug report with the information provided in \"/Users/vvo/Dev/Algolia/angular-search-experience/functions/yarn-error.log\".\ninfo Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.\n```\n\nWorkaround:\n- Run `nvm use 8.0` inside the `/functions` folder.\n- Run `npm install`.\n- Run `cd ..` then `npm run start:backend`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanekinekko%2Fangular-search-experience","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanekinekko%2Fangular-search-experience","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanekinekko%2Fangular-search-experience/lists"}