The net-core-angular-store from catwoplus

fix positioning of filter options' container when screen width < 680px wide

Fix dependency version mismatches for @nguniversal/express-engine

@angular/animations: The version 15.2.2 is required by the project but conflicts with the version 15.2.9 required by @angular/material and @angular/forms.
@angular/material: The version 15.2.9 is required by the project but conflicts with the version range ^15.2.5 specified in the root project.
@angular/platform-browser: The version 15.2.2 is a peerOptional dependency required by @angular/flex-layout and conflicts with the version 15.2.9 required by @angular/forms.
@angular/forms: The version 15.2.2 is required by the project but conflicts with the version 15.2.9 required by @angular/material.
@nguniversal/express-engine: The version 15.2.1 is required by the project but conflicts with the version 15.2.9 of @angular/animations required by @angular/platform-server.

Add no results message to search result state paired with invalid filter parameters

Indicate with an alert that there are no results.
The results sections of the visitor page should never stay empty; either the items from the selected category, or results from user defined search should stay in view if invalid filter parameter is used. Also, the same warning alert should pop up as its done with invalid search term parameters.

Set up mailing server

Sendgrind will be good, however, the site has to run first, otherwise account registration will not be authorized: waiting on #5

Set up reCAPTCHA

After being verified by recaptcha once per component init, send button should no longer require verification

Refactor visitor page component, admin components

Search logic, service interaction made during search are hard to maintain and debug due to poorly written code, bad naming conventions.

Separate year filter logic from setting categories within category page component (as per DB design this is not completely possible, but the client needs to make this distinction)
Decommission setCategoryPage() (deprecated by now, since this.route.paramMap.subscribe() is used with URL params)
Use search service for setting keyword search states, do not use search component directly within other components. For this admin components have to use the search service as well, but through a different observable and through a different search bar
When using the year filter during either keyword or category search, changing search methods through menu interaction without deleting the year filter yields erroneous data
Navigation through browser history yields incorrect data for keyword search results
Fix no results alert popping up when switching between search methods

Anchor doesn't work when routing is used

When calling setCategoryPage('') from

<a href="#elerhetoseg" style="color: transparent; text-decoration: none;"><button type="button" class="btn btn-primary" 
            (click)="setCategoryPage('')"><b>Elérhetőség</b></button></a>

while being routed to category-page-component, the routing back to visitor-page-component works, but scrollspy is not scrolling to the given DOM element.

https://gajus.medium.com/making-the-anchor-links-work-in-spa-applications-618ba2c6954a
https://quandh19.medium.com/how-to-enable-anchor-scrolling-of-angular-router-in-the-right-way-42e9b19657b5

Fix carousel page component getting destroyed upon page refresh

When refreshing the page while being routed to the carousel component, the grandparent component gets rendered instead, so the grandchild component's state is not persistent across page refreshes.

Finish login page on the admin site

Need to handle password resets, decide how this should be done exactly. UI should be more or less ready.
Authentication method is modeled after OAuth 2.0.

Fix tokens being stored as undefined in local storage
Set up a job to delete login history every x days
Change storage method to use cookie service instead
Add logout alert / timer to the UI and automatic logout mechanism upon timer expiry
Implement password reset endpoint: waiting on #5
The token interceptor doesn't work properly
Add token expiry check for these use cases: before adding / editing an item, searching and deleting an item - EDIT: in case token is expired upon posting the request, I set it so the request still gets completed

Implement path navigation

Complements #7 very well.

Deploy project to Azure

Specifications:

Front-end Angular App:
Since the Angular app runs on the client-side, it doesn't require significant server resources. You can use a smaller instance size or even leverage serverless hosting options like Azure Static Web Apps or Azure Blob Storage for static website hosting.
.NET Core Web API Backend:
With an average of 5000 sessions per year and an average session duration of 4 minutes, the traffic is relatively low.
Consider using Azure App Service to host your .NET Core web API. Start with a smaller instance size (e.g., B1 or B2) and monitor the resource utilization. You can scale up or out as needed based on performance and resource usage.
MS SQL Server Database:
The database size of 500-1000 elements is relatively small.
Consider using Azure SQL Database, which is a managed database service. Start with a Basic or Standard tier, depending on your storage and performance requirements.
Monitor the database performance and scale up the tier if needed.

Tasks:

Change URLs to include Azure domain name
In Azure, set up building through GitHub Actions
Set up workflow configuration file to execute dotnet publish command
Push to production branch the latest version, alongside wwwroot contents (Angular distribution, images)
Start the app through Azure domain name
Set up PostgreSQL database
Get SendGrind API key
Get reCAPTCHA v2 API key through https://www.google.com/recaptcha/admin/create
Change domain name to exisiting registration

Fix SPA not staying persistent across browser refresh, fix navigation by browser history

Currently, either the routing is not set up correctly, or a new strategy is required to clean URL fragments from the address bar when refreshing the page (which leads to the base URL).

Improve search filter

Just like in the ordering logic, it would make sense to be able to filter for only one 'autoTipus' property at a time (most visitors are probably after replacement parts for one car type anyways).

Design enhancements, new features

Add features/design to/the:

Search filter button is no longer working

No errors in console.

Fix adding / editing an item not replicating in show-alkatresz component

There is response-caching but no cache validation on /categorized-alkatreszek?categoryFilter=&orderOption= and /filtered-alkatreszek?searchTerm=&orderOption= endpoints.

Implement Etag generation upon data retrieval and use If-None-Match header for cache validation
Fix consequest calls made with searchAlkatreszByKeywordAndCategories() not working due to existing cache contents

Add image panning for better support on smaller display sizes

Images displayed within the carousel modal (which acts as a form of zooming functionality) are currently not responsive to display size changes.

FELHASZNÁLT ELEMEK (MAX: 45 PONT)

ŰRLAPOK - 10 PONT

Az oldal tartalmaz legalább 1 űrlapot, amelynek van legalább 4 megfelelő módon felhasznált
input mezője (0/2 pont)
Összesen legalább 6 különböző típusú input mező található (0/2 pont)
Van olyan űrlap, amelyik tartalmaz elküldés (submit) gombot (0/1 pont)
Van olyan űrlap, amelyik tartalmaz alapállapot (reset) gombot (0/1 pont)
Van olyan űrlap, amelyik tartalmaz mezőcsoportosítást (0/2 pont)
Van olyan űrlap, ahol minden input mező esetén a label tag-ek megfelelően vannak
használva (0/2 pont)

STRUKTURÁLIS FELÉPÍTÉS - 3 PONT

A weboldal HTML5 elemek megfelelő használatával van kialakítva (header, footer, nav, aside,
main, section, article) (mindegyik 1 pont, max 3 pont)

TÁBLÁZATOK - 4 PONT

A weboldal legalább 1 táblázatot tartalmaz (0/2 pont)
Létezik olyan táblázat, amelynek van fejléce, ami másképpen jelenik meg (0/1 pont)
Létezik olyan táblázat, amely legalább minden nem fejléc cellához használ headers
attribútumot megfelelő módon (0/1 pont)

CSS HASZNÁLATA - 16 PONT

MULTIMÉDIÁS ELEMEK - 2 PONT

A weboldal tartalmaz multimédiás elemeket (hang- és videóállomány) (0/1/2 pont)

HTML TAGEK HASZNÁLATA - 8 PONT

Strukturális elemek céljuknak megfelelően használva (címsor, p, iframe, em, strong, blockquote, code, sub, sup, mark, hr, pre, q) (mindegyik 1 pont, max 5 pont)
Listák használata (0/1 pont)
Flexbox vagy grid használata (0/2 pont)

HTML ELEMEK TESTRESZABÁSA - 10 PONT

Szegély használata (border) (0/1 pont)
Lekerekített sarkok használata (0/1 pont)
Háttérszín / háttérkép használata (0/1 pont)
Szövegek formázása (letter-spacing, line-height, text-align, text-decoration) (0/1 pont)
Pozicionálás (absolute, fixed, relative, static, sticky) (mindegyik 1 pont, max 3 pont)
Árnyékok használata (HTML elemekre vagy szövegekre) (0/1 pont)
Transzformálás (eltolás, forgatás, skálázás, nyírás) használata (mindegyik 1 pont, max 2 pont)

Add site analytics

Implementing Matomo could be a good learning experience, however Google Ads seem to have enough metrics concerning user behaviour for now.

Update search logic routing behaviour, improve search UX

Remove feature of returning user to the main page in case search term is deleted with the dedicated button.
Remove feature of returning user to the main page in case incorrect search term was given / there were no results in the dataset. If applicable, the previous search results should stay in view instead, or if its the first search event since ngOnInit(), the currently routed component should stay in view. Also, it would be a good idea to not let the search event query the API one additional time in case the query made with typeahead shows no results.
Add delay to typeahead.
Modify search alert styles to better align on smaller screens.

Build project, run distribution with .Net Core

Publish project, run the release version locally, ensuring Angular loads up
Ensure API calls are served

Add caching to admin components

More specifically, combined keyword and category caching could be implemented, otherwise rest of the existing caching methods are working,

Integrate cookie settings/preferences modal on the visitor page

To be compliant to GDPR, visitors must be asked for permission before storing specific cookies on their machines.

If #12 is to be integrated, tracking user preferences and user behaviour requires permission first

Otherwise, visitor page is using only local storage for now (since it has bigger storage capacity), which doesn't require permission.

Exact matching for search terms no longer works after dependency updates

appsettings.json doesn't get generated in Azure

2023-09-05T20:46:29.479476518Z    at Program.<Main>$(String[] args) in /home/runner/work/net-core-angular-store/net-core-angular-store/Program.cs:line 12
2023-09-05T20:46:32.705129911Z /opt/startup/startup.sh: line 19:    77 Aborted                 (core dumped) dotnet "BontoAPI.dll"
/home/LogFiles/2023_09_05_lw1sdlwk0009QG_docker.log  (https://ford-bonto.scm.azurewebsites.net/api/vfs/LogFiles/2023_09_05_lw1sdlwk0009QG_docker.log)
2023-09-05T20:46:16.631Z INFO  - Stopping site ford-bonto because it failed during startup.

Checked wwwroot contents, ony appsettings.development.json gets generated, hence the problem.

Implement server-side rendering

Add item.megjegyzesek to carousels where only placeholder image is shown

Added it to both modal, and modal trigger carousels for better UX.

Improve SEO score, fix issues flagged by Lighthouse

Current production build SEO score is 70, look for ways to improve it
The image located within .services-container could be lazy loaded
Use AVIF compression for images
Use text compression

Fix Panzoom and carousel slider button incompability

When clicking on mobiles within the carousel modal while panning the image, the slider buttons should not activate inadvertently.

ÁLTALÁNOS SZEMPONTOK (MAX: 45 PONT)

FELHASZNÁLÓI ÉLMÉNY - 23 PONT

A HTML oldalak egységes dizájnnal készültek, minden oldal hasonló felépítés és egységes
dizájnt használ (0/2/4 pont)
Az elkészített weboldalak logikusan vannak felépítve, érthető, hogy mi hol található meg,
érthető, hogy mi hova tartozik (0/3 pont)
A weboldalak tartalma esztétikusan van elrendezve, a színek esztétikusan vannak kiválasztva
(0/1/2 pont)
Az oldalakon minden információ jól olvasható (pl. nem fekete háttéren sötét betűk), nem
lógnak egybe a szövegek vagy egyéb elemek, van elegendő hely hagyva az elemek között, stb.
(0/1/3 pont)
Az űrlapok intuitívak, egyértelmű, hogy mi hova tartozik, és hova mit kell beírni (0/1/2 pont)
Az oldal rendelkezik böngészőfülön megjelenő ikonnal (0/1 pont)
A szöveges tartalmon felül az oldal tartalmaz ikonokat (nyíl, social media ikonok, stb) és
emojikat (pl.: , ) (0/1/2 pont)
A weboldalak igényesen vannak elkészítve, modernnek néznek ki (0/2/4 pont)
Lehetőség az oldalon a sötét / világos mód váltása között (0/2 pont)

MENÜ - 8 PONT

A rendelkezésre álló menüpontok minden oldalon láthatóak, a navigáció közöttük
megfelelően működik (0/2 pont)
A felhasználó mindig tudja, hogy melyik oldalon van éppen (pl. az aktuális menüpont más
dizájnnal jelenik meg) (0/2 pont)
A menü interaktív: a kurzor rávitelére változik a menüpont kinézete (0/2 pont)
A menü / oldal fejléc az oldal görgetésénél is látszik (0/2 pont)

TARTALOM ANIMÁLÁSA - 14 PONT

Az oldal tartalma animálva jelenik meg (pl. az egyes elemek beúsznak, fokozatosan jelennek
meg, stb.) (0/3/6 pont)
Egyéb, igényesen elkészített animáció (elemekre, háttérre, stb.) (0/2/4 pont)
Az oldalon lévő egyes elemek (ahol indokolt) a kurzorral interakcióba lépnek (pl. a gombok,
kártyák esetén) (0/2/4 pont)

RESZPONZÍV DIZÁJN - 10 PONT

Az elkészített HTML oldalak mindegyike reszponzív, különböző méretű kijelzők

Apply SPA best practices

Mainly, leverage browser caching, since there are lots of images to be dowloaded by the client.

Fix search API returning data when filtering applied to keyword search yields no results

Refactor admin components, token interceptor

Fix logout function not querying the logout endpoint

Risk of memory leaks

Currently, not all observables are unsubscribed when routing between components, which can lead to memory leaks.

Unsubscribe from combineLatest(), this.router.events.subscribe() in visitor-page-component

Rest of the components seem to manage unsubscriptions just fine.

Rework CSS styling to be responsive

Often times current media queries are made for arbitrary resolutions, which is not ideal, considering any display resolution can be tested easily with DevTools.

Add fixed desktop and mobile resolutions to the pipeline, according to most used display sizes found on https://gs.statcounter.com/screen-resolution-stats/desktop/hungary
Add support to most desktop resolutions
Add support to most tablet resolutions
Add support to most mobile resolutions
Change typeahead container's height to be 500px

Anchor #vasarlasi_infok only works if the same URL fragment is already in the URL

Seems to be caused by angular's routing module not working well together with href attributes. Will try to implement a method that will scroll to DOM elements based on id values and update where the routing is as well.

Communication issues between search-component and visitor-page-component

Affected functionalities:

when using the search bar more than once no subsequent network requests are made.
while displaying search results, no network requests are made for searching by categories.

Issue only seem to affect touch screen devices / Chrome when device toolbar is toggled.

Home page's logo and welcome text placement is incorrect when viewing the site from Chrome on Android, using mobile view and landscape orientation. Issue cannot be reproduced within DevTools, as the alignment is correct there (having it toggled to touchscreen mode).
Filter list is empty
Items are not populating in carousel grid - EDIT: congifured HTTPS redirection in Azure, had nothing to do with viewing the site from mobiles
Sending messages doesn't work, even if form is filled out properly

catwoplus / net-core-angular-store Goto Github PK

net-core-angular-store's People

Contributors

Watchers

net-core-angular-store's Issues

Recommend Projects

Recommend Topics

Recommend Org