🧠 Technical test for a psychology company

This technical test is done using Angular 19 and Ionic 7

In order to install everything you must perform

npm i
ionic serve

🎯 Project purpose

This project is a technical task performed in Ionic 7 and Angular 19. It emulates an e-commerce as a PWA.

The site structure is as follows:

• 1. Home: List of products, categories
• 2. Category: List of products filtered by category
• 3. Product: Product detail with image, text and price
• 4. Cart: Products added to the cart (subtotal and total)
• 5. Checkout: Checkout page with delivery options and payment.

The design is provided with this figma that emulates the nike store.

Important

It is developed as an Angular APP and added service workers and webmanifest to work as a PWA. The deployment is out of the scope of this project. For this purpose you can go to the Ionic Official Documentation

✨ Extra features

• 1. Favourites: Implemented add/remove/show favourites
• 2. Responsiveness: All the views are made for small, medium and large screens
• 3. CI: Added a git workflow action to check tests, build and lint.
• 4. Searchbox: Added a searchbox in category page.
• 5. Toast: Added toast messaging across the app.

🗂️ Project structure

📁 src
├─📁 app
│ ├─📁 components    # Components with no page entity. Product cards, sliders and styled elements.
│ ├─📁 interfaces    # Interfaces to mainly support the store state
│ ├─📁 pages         # Views of the app
│ ├─📁 pipes         # Utilities to support angular formatting
│ ├─📁 services      # Api Fetcher to retrieve data from (https://fakestoreapi.com/)
│ ├─📁 store         # NgRx files (reducers, selectors, actions and effects) to manage the app state
│ └─📁 testing       # Mockups for testing
└─📁 theme           # App theming variables

🧩 Included 3rd-party libraries

• NgRx: NgRx Store provides reactive state management for Angular apps inspired by Redux.
• lodash: A modern JavaScript utility library delivering modularity, performance & extras.
• Swiper: Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
• Karma: Tool for testing client-side JavaScript
• Angular
• Ionic

📈 Lighthouse

The performance states that I'm running in dev mode. It lacks CSS and JS minified files. It has a value of 58 but it is not a truthy value.

📸 Screenshots

All the screenshots taken in large (1920px wide), medium (1300px wide) and small (500px wide) screens.

Section	🖥️Large	🖥️ Medium	📱 Small
Home
Category
Product
Cart
Checkout Delivery
Checkout Payment