{"id":24789447,"url":"https://github.com/fr4nc3/rest-project","last_synced_at":"2026-04-11T10:33:30.543Z","repository":{"id":148056802,"uuid":"148948470","full_name":"Fr4nc3/rest-project","owner":"Fr4nc3","description":"Restaurant search API and UX with NodeJS MongoDB and more","archived":false,"fork":false,"pushed_at":"2018-10-13T18:16:06.000Z","size":15287,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-03T16:18:29.606Z","etag":null,"topics":["angular6","bootstrap4","javascript","mongodb","mongoose","nodejs"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Fr4nc3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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-09-15T23:44:08.000Z","updated_at":"2018-10-13T18:16:08.000Z","dependencies_parsed_at":"2023-05-28T07:45:30.297Z","dependency_job_id":null,"html_url":"https://github.com/Fr4nc3/rest-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Fr4nc3/rest-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fr4nc3%2Frest-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fr4nc3%2Frest-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fr4nc3%2Frest-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fr4nc3%2Frest-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Fr4nc3","download_url":"https://codeload.github.com/Fr4nc3/rest-project/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fr4nc3%2Frest-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31677815,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["angular6","bootstrap4","javascript","mongodb","mongoose","nodejs"],"created_at":"2025-01-29T17:18:01.799Z","updated_at":"2026-04-11T10:33:30.535Z","avatar_url":"https://github.com/Fr4nc3.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### NYC Restaurants \n\nFrontend and backend are separated:\u003cbr\u003e\nux: client-app\u003cbr\u003e\nbackend: service\u003cbr\u003e\n\nThe document manipulation is handle in the backend, leaving the ux only for display content. \n\n\nfrom the root of the project:\u003cbr\u003e\nthis will build the backend and frontend.\n```\nnpm install\n```\nHow to test the project:\u003cbr\u003e\nthis will start the backend and frontend. \u003cbr\u003e\nbackend:  http://localhost:8080/ \u003cbr\u003e\nfrontend: http://localhost:4200/\n```\nnpm start\n```\nMongoDB connection to a localhost\n\n```JS\n// change db connection\n// service/config/database.js\nmodule.exports = {\n    database: 'mongodb://localhost/nyc-restaurants'\n}\n```\n\n### Key Factors:\n\n- The API full search will work only if the fulltext index exist associated to field searchText\n\n```\ndb.Restaurant.createIndex({\"searchText\":\"text\"})\n```\n\n- Price field missing from Restaurent Model. I decided to ignore that functionality.\n- This is not pixel perfect from the mockup. This is a fair approximation. For a pixel perfect, I will request:\n  - Photoshop file\n  - Font names and sizes\n  - Smaller screen mockup or designer suggestions. \n\n- API returned collection modified in the service and not in the client. I made this decision because I wanted leave the client-app with logic related to the UX. For a real life project, I will think in service or API performance and loading before to take this kind of decisions.\n\n\n```JS\n\nRestaurant {\n  _id?: string;\n  name: string;\n  cuisine: string;\n  grade: string;\n  address: string;\n  phone: string;\n  imageUrl: string;\n  gradeDate: string;\n  inspection: {\n    grade_date: string;\n    grade_date_first: string;\n    action: string;\n    violation_code: string;\n    violation_desc: string;\n    score: string;\n    grade: string;\n    inspection_type: string;\n  };\n}\n```\n\n- Format Date in the API. I made this decision  similar to what I said in N.3 and because I wanted to sort the Inspections object in the API.\n- Inspection object was missing in some record and the individual result image didn't show all the information about inspection. Therefore, I decided to bring an unique simplified inspection object.\n- Inspections where sorted before to be pick the latest and the first, this for restaurants with more than one inspection.\n- In the indiviual view, the first date show in the inspections section represent the first inspection. if the Restaurant only has one inspection entry, it will be repeated. \n- Grade entries from the database has more than A,B,C and Grading Panding. Therefore, anything that was not A,B,C were marked as Grading Pending.\n- used mongoose-aggregate-paginate to simplify my life with the results and pagination\n- I used Bootstrap Pagination with arrows because some results there were really big.\n- Key Files:\n\n```JS\n// API calls\nservice/routes/api.js\nservice/utils/utils.js\n\n// Rest Service Front-End Back-End interaction:\nclient-app/src/app/services/rest.service.ts\n\n// home components\nclient-app/src/app/home/home.component.ts\nclient-app/src/app/home/home.component.html \n\n// results components\nclient-app/src/app/results/results.component.ts\nclient-app/src/app/results/results.component.html\nclient-app/src/app/results/results.component.scss\n```\n\n### Screenshoot \n- Homepage\n![Screenshot](images/home_full.png)\n\n- Results \n![Screenshot](images/results_full.png)\n\n- Individual\n![Screenshot](images/result_individual_full.png)\n\n-  Responsive Design Sample:\n- Small\n- Homepage\n\n![Screenshot](images/home_small.png)\n\n- Results \n\n![Screenshot](images/results_small.png)\n\n - Individual\n \n![Screenshot](images/result_individual_small.png)\n\n- Medium\n- Homepage\n\n![Screenshot](images/home_medium.png)\n\n- Results \n\n![Screenshot](images/results_medium.png)\n\n- Individual\n\n![Screenshot](images/result_individual_medium.png)\n\n\n### Development Process \n1. Create backend api with NodeJS and Express \n2. Add package: \n- mongoose connect to MongoDb\n- mongoose-aggregate-paginate simplify MongoDB queries and results\n- nodemon continues developing\n3. write utils library.\n- In this way, the json data send to UX ready to be used.\n4. Api call example:\n- http://localhost:8080/api/restaurants/:search/:page/:grade\n5. Parameters:\n- search: string 100 character max\n- page: number 1 as default\n- grade: string used to sort\n6. Create ux client with Angular 6, Material and bootstrap.\n7. responsive UX (I added only 4 different sizes). Tested using Firefox Responsive Design Mode.\n\n### Suggestions\n\n- It is not pixel perfect of the requirement. Instead, it is a fair approach. \n- Dropdown filters by Grade, Cusine, Date of Inspection. \n- Add Number of results. Now is 12 but can be added as dropdown.\n- Add Cache results, avoid to API call for existing results\n- Remove Formating Fields from Service and put it n the Client-app.\n- Better variable names.\n- Add more MongoDB index. \n- More responsible screen types and standard media query break points.\n\n\nReferences\n------------------\n1. https://stackoverflow.com/questions/46117989/what-is-the-recommended-way-to-dynamically-set-background-image-in-angular-4\n2. https://stackoverflow.com/questions/45696685/bootstrap-4-search-input-with-an-icon\n3. https://getbootstrap.com/docs/4.0/components/input-group/\n4. https://angular.io/guide/\n5. https://css-tricks.com/books/volume-i/scale-typography-screen-size/\n6. https://www.npmjs.com/package/mongoose-aggregate-paginate\n7. https://ng-bootstrap.github.io/#/components/pagination/api\n8. https://stackoverflow.com/questions/10123953/sort-javascript-object-array-by-date\n9. https://getbootstrap.com/docs/4.0/utilities/\n10. https://ng-bootstrap.github.io/#/components/modal/examples\n11. https://getbootstrap.com/docs/4.0/utilities/text/\n12. https://docs.angularjs.org/api/ng/\n13. https://www.seamless.com/lets-eat\n14. https://www.thomasnet.com/\n15. https://css-tricks.com/\n\n\nBuil with\n---------------\n```\nYour global Angular CLI version (6.1.5) is greater than your local\nversion (6.1.3). The local Angular CLI version is used.\n\nTo disable this warning use \"ng config -g cli.warnings.versionMismatch false\".\n\n     _                      _                 ____ _     ___\n    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|\n   / △ \\ | '_ \\ / _` | | | | |/ _` | '__|   | |   | |    | |\n  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |\n /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|\n                |___/\n    \n\nAngular CLI: 6.1.3\nNode: 9.4.0\nOS: darwin x64\nAngular: 6.1.2\n... animations, common, compiler, compiler-cli, core, forms\n... http, language-service, platform-browser\n... platform-browser-dynamic, router\n\nPackage                           Version\n-----------------------------------------------------------\n@angular-devkit/architect         0.7.1\n@angular-devkit/build-angular     0.7.1\n@angular-devkit/build-optimizer   0.7.1\n@angular-devkit/build-webpack     0.7.1\n@angular-devkit/core              0.7.1\n@angular-devkit/schematics        0.7.3\n@angular/cdk                      6.4.3\n@angular/cli                      6.1.3\n@angular/material                 6.4.3\n@ngtools/webpack                  6.1.1\n@schematics/angular               0.7.3\n@schematics/update                0.7.3\nrxjs                              6.2.2\ntypescript                        2.9.2\nwebpack                           4.9.2\n```\n\n\nby Francia","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffr4nc3%2Frest-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffr4nc3%2Frest-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffr4nc3%2Frest-project/lists"}