{"id":16455112,"url":"https://github.com/leotm/notes","last_synced_at":"2026-05-09T05:33:53.949Z","repository":{"id":101624045,"uuid":"113793897","full_name":"leotm/notes","owner":"leotm","description":"My successful MVP design implementation to a coding exercise to create a CRUD application, trying Angular 5.","archived":false,"fork":false,"pushed_at":"2017-12-11T00:14:59.000Z","size":352,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-09T17:59:48.847Z","etag":null,"topics":["angular5","bootstrap4-beta2","coding-exercise","hapi","karma-jasmine","nodejs","scss","typescript","unit-testing"],"latest_commit_sha":null,"homepage":"","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/leotm.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":"2017-12-11T00:14:49.000Z","updated_at":"2018-07-09T17:41:47.000Z","dependencies_parsed_at":"2023-03-13T15:26:47.129Z","dependency_job_id":null,"html_url":"https://github.com/leotm/notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leotm%2Fnotes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leotm%2Fnotes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leotm%2Fnotes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leotm%2Fnotes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leotm","download_url":"https://codeload.github.com/leotm/notes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240943647,"owners_count":19882434,"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","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":["angular5","bootstrap4-beta2","coding-exercise","hapi","karma-jasmine","nodejs","scss","typescript","unit-testing"],"created_at":"2024-10-11T10:21:08.187Z","updated_at":"2025-09-20T01:44:08.959Z","avatar_url":"https://github.com/leotm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Requirements\n\n1. Follow the designs\n2. Make a responsive app\n3. Make use one or combination of: Laravel and other JS framework\n4. Data needs to be stored somewhere (browser or DB) it's up to him\n\n![Alt Text](designs/Notes-create.png)\n![Alt Text](designs/Notes-login.png)\n![Alt Text](designs/Notes-overview.png)\n![Alt Text](designs/Notes-read.png)\n![Alt Text](designs/Notes-read-add-additional-note.png)\n\n## Notes\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.4.\n\n## Hapi server\n\nRun `npm start` for a hapi server. This will also build the project. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` or `npm test` to execute the unit tests via [Karma](https://karma-runner.github.io).\nAll 19 spec tests should pass with flying colours.\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Thoughts\n\nUX-wise I naturally thought clicking on 1 note from the overview would lead to reading 1 note. So Notes-read.png confused me with the title \"This is a note\", however displaying several different notes (excluding Henry's). Should the title be, \"This is a Notebook\" (like Evernote)? Then adding additional notes makes sense, if the overview is actually displaying Notebooks.\n\nFor an MVP, I went for the overview displaying all notes, so clicking any of them shows all notes, where one can add a note.\n\nI noted no mockup image for CRUD on a user, so stored them locally in a service:\n\n- Username: sarah, Password: sarah123\n- Username: ben, Password: ben123\n- Username: henry, Password: henry123\n\nIf had more time and depending on requirements:\n\n- Additional components to CRUD a user\n- An API to store the users, with either Express/Hapi/Koa, either caching in memory, writing to disk or in a database (e.g. Firebase), with unit testing with Mocha/Chai/Sinon, then fetch user notes from the API with HttpClientModule .get and subscribe to the result - an rxjs Observable\n- Or store in browser Cookie/Session Storage/Local Storage depending on requirements\n- Authenticate with server by sending tokens and refreshing expired tokens, or with JWTs, or Auth0 Lock, or Firebase User Auth\n- Split the note.service into: user.service and note.service\n- Notebooks which contain notes\n- Error message on password failure\n- Write a date pipe to also display \"at\" and \"Today\" and \"Yesterday\"\n- Add speech bubble styling to the note cards\n- Logout\n- Pagination for multiple notes\n- Searching notes by title and/or content and write a filter pipe\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleotm%2Fnotes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleotm%2Fnotes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleotm%2Fnotes/lists"}