{"id":21307304,"url":"https://github.com/jdegand/make-parties-angular-frontend","last_synced_at":"2026-06-08T16:03:30.316Z","repository":{"id":179043781,"uuid":"662292631","full_name":"jdegand/make-parties-angular-frontend","owner":"jdegand","description":"Angular Frontend for my Make-Parties-Spring-Backend repo","archived":false,"fork":false,"pushed_at":"2025-09-21T17:55:21.000Z","size":668,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-21T19:34:18.799Z","etag":null,"topics":["angular","angular-material","makeschool","tests"],"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/jdegand.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-04T19:51:01.000Z","updated_at":"2025-09-21T17:55:25.000Z","dependencies_parsed_at":"2025-08-31T17:37:36.440Z","dependency_job_id":"edcbdcf9-7460-4117-af3c-590ea0f5a746","html_url":"https://github.com/jdegand/make-parties-angular-frontend","commit_stats":null,"previous_names":["jdegand/make-parties-angular-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/make-parties-angular-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fmake-parties-angular-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fmake-parties-angular-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fmake-parties-angular-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fmake-parties-angular-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/make-parties-angular-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fmake-parties-angular-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34069501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"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":["angular","angular-material","makeschool","tests"],"created_at":"2024-11-21T16:31:10.890Z","updated_at":"2026-06-08T16:03:30.284Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Make Parties Angular Frontend\n\nA frontend designed to work with my [Spring Boot Make Parties backend](https://github.com/jdegand/make-parties-spring-backend).  \n\n## Screenshots\n\n![Code Coverage Report](screenshots/angular-frontend-coverage.png \"Coverage is slightly better than screenshot\")\n\n***\n\n![Homepage](screenshots/angular-frontend-10.png)\n\n***\n\n![New Event Form](screenshots/angular-frontend-11.png)\n\n***\n\n![Mobile New Event Form](screenshots/angular-frontend-12.png \"mobile\")\n\n***\n\n![Calendar picker](screenshots/angular-frontend-13.png)\n\n***\n\n![Mobile Event View](screenshots/angular-frontend-14.png \"mobile\")\n\n***\n\n![Empty RSVPs for event](screenshots/angular-frontend-15.png)\n\n***\n\n![RSVP form](screenshots/angular-frontend-16.png)\n\n***\n\n![RSVP form validation error](screenshots/angular-frontend-17.png \"mobile\")\n\n***\n\n![RSVPs are listed underneath event card on mobile](screenshots/angular-frontend-18.png \"mobile 50% zoom\")\n\n***\n\n![Update Event Form](screenshots/angular-frontend-19.png)\n\n***\n\n## Built With\n\n- [Angular](https://angular.dev)\n- [Angular CLI](https://github.com/angular/angular-cli)\n- [Angular Material](https://material.angular.io/)\n\n## How to Use\n\nThe Spring Boot application runs by default on `localhost:8080` and has the following endpoints:\n\n- `http://localhost:8080/events` - GET / POST\n- `http://localhost:8080/events/${id}` - GET / PUT / DELETE\n- `http://localhost:8080/events/${eventId}/rsvps` - POST\n- `http://localhost:8080/events/${eventId}/rsvps/${rsvpId}` - DELETE\n\n### Running the Spring Boot Backend Application\n\n```bash\n\ngit clone https://github.com/jdegand/make-parties-spring-backend.git\n\n# configured with maven - run the scripts included with the repo \n\n```\n\n### Running the Angular Application\n\nRun the backend first.  Use two terminals.  \n\n```bash\n\ngit clone https://github.com/jdegand/make-parties-angular-frontend.git\n\n# cd into the directory\nnpm install \n\nnpm start\n\n# Tests - firefox launcher is included - need to install a karma launcher that matches your browser  \n\nng test\n\n```\n\n## Thoughts\n\n- I thought this would be a nice test of my Spring and Angular skills.\n- [MakeParties](https://makeschool.org/mediabook/oa/tutorials/make-tweets/start-an-express-project-z9Y=/) design translates well to them.\n- I adhered to the design of the MakeSchool tutorial and replicated it with slight differences.\n- I used standalone components except for the app component.\n- I used reactive forms and patchValue to set pre-filled values for the update event form.\n- You could put services in sub-folders, ie `service/events/events.service.ts` and you could change the service names; the way I named them resulted in the class being initially called `ApiServiceService`.\n- I used mock data to work out some styling for event fields versus always having to have the spring backend running.  The mockData implementation is commented out in the events component.\n- The backend was complete (sans rsvps routes) when I started creating the frontend.\n- I added validation first to the frontend and then applied that to the backend.\n- Made the footer and header fixed - added scroll for the events component's body.\n- There was overscroll at the end of events list because of margin placed between events -\u003e used a last variable to remove the margin from the last of event-cards -\u003e using `:last-of-type` did not work.\n- Used [lorem picsum](https://picsum.photos/) for placeholder image urls -\u003e could use many other similar services or even upload your own images to cloudinary.\n- No validation for the image urls - placeholder image from Flaticon is displayed if user fails to provide an `imgUrl`.\n- Could cap the event's image width to an even smaller amount - need `object-fit:cover` to preserve aspect ratio of image.\n- I used a `mat-card-image` attribute on each event image.\n- I originally used async pipe for the events component -\u003e can be drawbacks to using async pipe -\u003e See this [video](https://www.youtube.com/watch?v=Z9U9-VRN_XU) for more.  \n- Changed from async pipe to regular subscription in events component.  With async pipe, it is more difficult to show a message when the subscription returns no data.\n- I show a 'Could not connect to server' message when an error occurs and I show a 'No events found' message when the backend database has no entries.  \n- I used `[min]` on the Date field although I am using validators - better to use a custom validator instead ?\n- Using `[min]` is a lot easier to implement, but it is not consistent with how I am validating all the other fields.\n- Used a fair amount of components -\u003e possible to clean up and have better component reuse?\n- On `event-detail` page, I added an extra link for the rsvp form.\n- Debatable if it is better to use `routerLink` over mat-buttons that are styled like links.\n- Angular material can have accessiblity issues.\n- I didn't go overboard on styling - using a sticky footer presented some difficulty on mobile as the footer overlaps the card when there are multiple events.  I changed the footer from being stacked in a flex column in the left corner to using row and `justify-content:space-between`.  On mobile, this choice causes word wrap because the footer text is too long.\n- Could have used modals instead of routing to a form for updating or creating rsvps.\n- I added a delete button to delete events on the event detail page.\n- After deleting the event, the backend sent a string like `Event ${id} deleted`.\n- This caused an error to be thrown in the frontend and this prevented the page from being reloaded as the complete callback would not run.\n- I changed the backend to send JSON, and now it works as intended.\n- Replaced and removed `karma-chrome-launcher`.\n- Angular 16 doesn't initialize a karma config file anymore.  Need to use `ng generate config karma`.\n- Added `codeCoverage: true` to `angular.json`.\n- Use `xdescribe` to skip a test block. Use `xit` to skip an individual test.\n- Angular 15 testing code uses `compileComponents()` after the `TestBed.configureTestingModule()` method.  Seems like this is no longer required in Angular 16.\n- I used `window.location.reload` in the `event-detail` component.  During testing, this causes a infinite loop.  I moved the call to `window.location.reload` into a reloadPage function.  Then I could mock that function to return nothing so that all tests run with no problems.  However, the reloadPage function is said to be uncovered in the code coverage report. I have experimented with different scenarios and nothing has changed.\n- Upgraded from Angular 16 to 17.  There is a deprecation warning for `RouterTestingModule` in the app test.\n- For typings, I used a partial of the `EventObj` interface.  Instead of this implementation, I looked into switching to a slimmer interface with less properties. In lieu of the code duplication, I decided to prefer using a partial.  \n\n## Continued Development\n\n- TypeScript improvements\n- Cypress\n- Custom Validator for min Date\n- Styling tweaks\n- Accessibility concerns - cancel button color contrast, etc\n- Code Consistency\n\n## Useful Resources\n\n- [Flaticon](https://www.flaticon.com/)\n- [Lorem Picsum](https://picsum.photos/)\n- [Lorem Ipsum](https://loremipsum.io/21-of-the-best-placeholder-image-generators/) - placeholder image generators\n- [Wikimedia](https://commons.wikimedia.org/wiki/File:Image_not_available.png) - image not available\n- [Stack Overflow](https://stackoverflow.com/questions/45144023/angular-material-design-how-to-add-custom-button-color) - angular design custom button color\n- [YouTube](https://www.youtube.com/watch?v=qOZOeu6YcJc) - Creating and Using Reactive Forms | Angular Forms | Angular 13+\n- [Stack Overflow](https://stackoverflow.com/questions/52035029/set-mindate-maxdate-dynamically-on-html-datepicker) - min / max date datepicker\n- [Stack Overflow](https://stackoverflow.com/questions/49284110/angular5-custom-validator-for-date-min) - custom validator for date min\n- [Stack Overflow](https://stackoverflow.com/questions/46502294/angular-change-matinput-size) - matinput size\n- [YouTube](https://www.youtube.com/watch?v=Z9U9-VRN_XU) - Async Pipe Is Broken in Angular\n- [Stack Overflow](https://stackoverflow.com/questions/34088209/how-to-pass-object-from-one-component-to-another-in-angular-2) - pass object from one component to another\n- [Stack Overflow](https://stackoverflow.com/questions/45997369/how-to-get-param-from-url-in-angular-4) - get param from url\n- [RxJs](https://rxjs.dev/deprecations/subscribe-arguments) - subscribe arguments\n- [Stack Overflow](https://stackoverflow.com/questions/63382484/how-to-init-default-values-for-angular-form-from-async-request-form-control) - how to set default values for angular form to async request data\n- [Stack Overflow](https://stackoverflow.com/questions/55275025/how-to-set-value-to-form-control-in-reactive-forms-in-angular) - how to set value to form control in reactive forms in angular\n- [Theme Isle](https://themeisle.com/blog/missing-images-on-website/) - missing images on website\n- [Stack Overflow](https://stackoverflow.com/questions/4774022/whats-default-html-css-link-color) - default html css link color\n- [Stack Overflow](https://stackoverflow.com/questions/46027652/typescript-interface-how-to-declare-a-property-of-array-type) - typescript interface how to declare a property of array type\n- [Stack Overflow](https://stackoverflow.com/questions/53539728/how-to-validate-date-in-the-format-mm-dd-yyyy-in-spring-boot) - how to validate date in mm-dd-yyyy format\n- [Stack Overflow](https://stackoverflow.com/questions/46502294/angular-change-matinput-size) - matinput size\n- [Stack Overflow](https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass) - ngClass\n- [Blog](https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f) - 6 ways to unsubscribe\n- [YouTube](https://www.youtube.com/watch?v=ddyxKtfOMqU) - takeUntilDestroyed\n- [Stack Overflow](https://stackoverflow.com/questions/56767679/should-i-unsubscribe-after-a-complete) - should I unsubscribe after a complete\n- [Stack Overflow](https://stackoverflow.com/questions/52198240/rxjs-difference-between-complete-and-unsubscribe-in-observable) - complete and unsubscribe difference\n- [YouTube](https://www.youtube.com/watch?v=emnwsVy8wRs\u0026list=PLoC8Q0moRTSiTBAKWBGiJjFUMpiFdaGdF\u0026index=1\u0026pp=iAQB) - Introduction | Angular Unit Testing\n- [YouTube](https://www.youtube.com/watch?v=15othucRXcI) - 30. Testing Services which has HttpClient as dependency by using Jasmine Spy - Angular Unit testing\n- [Angular Docs](https://angular.io/guide/testing-services) - testing services\n- [Blog](https://offering.solutions/blog/articles/2017/10/02/testing-an-angular-http-service/) - testing an angular http service\n- [Stack Overflow](https://stackoverflow.com/questions/59676310/get-element-by-attribute-name-angular-testing) - get element by attribute name angular testing\n- [Concrete Page](https://www.concretepage.com/angular/angular-testbed-compilecomponents) - compileComponents()\n- [Blog](https://danielk.tech/home/how-to-test-reactive-angular-forms) - how to test reactive angular forms\n- [Stack Overflow](https://stackoverflow.com/questions/50863422/angular-5-ng-test-please-include-either-browseranimationsmodule-or-noopan) - BrowserAnimationsModule\n- [Stack Overflow](https://stackoverflow.com/questions/40093013/unit-testing-click-event-in-angular) - angular test click event\n- [Stack Overflow](https://stackoverflow.com/questions/73361624/angular-unit-test-how-to-test-reactive-form-reset-method) - reactive form reset method\n- [Testing Angular](https://testing-angular.com/testing-complex-forms/) - testing complex forms\n- [Gitbook](https://baldur.gitbook.io/angular/angular-test/testing/angular-testing/spyon) - spyOn\n- [Stack Overflow](https://stackoverflow.com/questions/64061277/why-my-mocked-service-property-is-undefined-in-jasmine-unit-test) - mocked service property is undefined\n- [Stack Overflow](https://stackoverflow.com/questions/39960146/testing-error-case-with-observables-in-services) - testing error case with observables in services\n- [Stack Overflow](https://stackoverflow.com/questions/45917883/how-do-you-mock-activatedroute) - activatedRoute mock\n- [Stack Overflow](https://stackoverflow.com/questions/39791773/how-can-i-unit-test-a-component-that-uses-the-router-in-angular) - unit test a component that uses router\n- [Stack Overflow](https://stackoverflow.com/questions/48024481/angular-unit-test-if-component-method-is-called-according-to-a-data-from-a-servi) - angular unit test if component method is called\n- [Stack Overflow](https://stackoverflow.com/questions/40093013/unit-testing-click-event-in-angular) - unit test click event in angular\n- [YouTube](https://www.youtube.com/playlist?list=PLqQyE6QNucSfUIpucL_nx7vDuwAa1A_VH) - Angular Unit Testing\n- [Stack Overflow](https://stackoverflow.com/questions/42770027/how-do-i-check-for-a-console-log-in-karma-jasmine) - how do I check for a console log in karma jasmine\n- [Medium](https://jenijoe.medium.com/unit-testing-angular-crud-service-with-jasmine-7e40e7c8aa74) - unit testing angular crud service with jasmine\n- [Semaphore CI](https://semaphoreci.com/community/tutorials/testing-routes-in-angular-2) - testing routes\n- [Stack Overflow](https://stackoverflow.com/questions/55773888/how-to-unit-test-router-navigate-in-angular-app) - unit test router navigate in angular app\n- [Stack Overflow](https://stackoverflow.com/questions/27306194/mock-window-location-reload-in-jasmine-testing) - mock window location reload in jasmine testing\n- [Stack Overflow](https://stackoverflow.com/questions/68607971/how-to-unit-test-window-location-reload-in-angular-12-unit-testing) - window location reload\n- [Stack Overflow](https://stackoverflow.com/questions/72138851/jasmine-window-location-reload-in-ngondestroy) - location reload\n- [Dev.to](https://dev.to/angular/understanding-async-tests-in-angular-f8n) - async tests in angular\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fmake-parties-angular-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fmake-parties-angular-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fmake-parties-angular-frontend/lists"}