This application is an online store that provides standard ecommerce functionality. Product categories fall into the domain of renewable energy sources (solar panels, wind turbines, battery chargers, accumulators and voltage inverters), and electric vehicles are also on offer. The application covers the following set of functionalities:
• In-store product overview.
• Filter products by: price, available quantity, specific
criteria (such as voltage, current, battery capacity, etc.)
and average product rating.
• Review reviews of users who have purchased the product.
• User login and registration.
• Adding products to the cart, managing it and ordering.
• Modify user profile data, which contains basic data for
contact, payment and information about the user's favorite product types.
• View, cancel and modify current orders.
• Evaluation and review of completed orders.
The application was realized using the Angular framework on the frontend and the Firebase backend service (Authentication, Firestore - for data storage and Storage - for storing product images). The application is implemented in MVC architecture and has the following structure:
1. Modules
• App - Roots module of each Angular project, it invites everyone else
modules and components used in the project
• Material - Angular Material module that imports everything you need
materials from the @ angular / package material.
• Router - The module responsible for routing, ie. moving through the pages
(components) of the application. It also implements "AngularFireAuthGuard" which controls
access to parts of the application depending on whether the user is logged in or not.
2. Components
• App - Root component of the application, which also contains a navigation toolbar.
• Login - Responsible for forwarding login parameters.
• Registration - Responsible for registering new users.
• ProfilePage - Responsible for displaying and modifying data.
• Shop - Responsible for displaying and filtering products, reviewing its
review and add them to the cart (only if the user is logged in).
• Cart - Responsible for displaying and modifying the basket, selecting the sending method,
an overview of the total amount to be paid and ordered.
• Order - Responsible for displaying, modifying and canceling current ones
order, review of canceled and completed orders as well as evaluation of ordered products (if the order is completed).
3. Models
• Node - Contains interfaces for displaying category types for "tree" material.
• Order - Contains an interface for displaying orders
• Item - Contains a product display interface
• Review - Contains an interface for displaying reviews
4. Services
• Crypto - A service that provides AES password encryption service.
• IndexedDatabase - Service for communication with indexedDB API.
• Firebase - A service that communicates with the Firebase platform.
NOTE: Before usage populate environament firebase settings with yours. Use Angular version 11.2.14.