iagohribeiro / gadget-inventory

The purpose of this software is to help users keep an inventory of the gadgets they own. This way, they can be more organized about their devices, helping them to keep track of warranty expiry times, device age, etc.

gadget-inventory

The purpose of this software is to help users keep an inventory of the gadgets they own. This way, they can be more organized about their devices, helping them to keep track of warranty expiry times, device age, etc.

This project was generated with Angular CLI version 16.2.6.

Deploy Address - GitHub Pages

GitHub Pages

Prototype

Figma Project

Checklist

• Create a repository on GitHub with the Gitflow structure, including at least the main branches "main" and "develop."
• Use components from a CSS framework, such as Bootstrap, Materialize or another of your choice.
• Present the screens with a responsive layout, adapting to different screen sizes, using a CSS framework or customized implementations.
• Develop the application layout with components, making the header and footer reusable components.
• Apply at least two types of data binding, such as Interpolation, Property Binding, Event Binding, Two-Way Data Binding,
• Use template variables and the ViewChild annotation to interact with DOM elements or components directly in the template or in the application's TypeScript code.
• Pass data between components via the component hierarchy, using the @Input and @Output annotations.
• Transfer data, using services, between components that are not directly related.
• Map components to routes in the routes module, creating an efficient navigation structure.
• Allow smooth navigation between the different pages of the application using links and navigation buttons.
• Validate form fields with regular expressions (REGEX) and display error messages.
• Implement masks in form fields, where necessary, to improve the user experience when entering data.
• Disable the submit button while the form is in an invalid state.
• Make requests to the API with proper handling of success and error responses with Promises.
• Make requests to the API with proper handling of success and error responses with Observables.
• Create a complete record of an entity, including create, read, update and delete operations (CRUD) using an API such as JSON Server.
• Use local storage (LocalStorage or SessionStorage) to store temporary data when necessary.
• Apply the ngFor structural directive to display a dynamic list of data in your application.
• Use the ngIf directive to control the display or hiding of elements based on specific conditions.
• Format the data presentation with Pipes, according to the application's requirements.
• Execute the application build process and deploy to make the application accessible online.

How to execute the application

To login in to the aplication, you need to use the users below:

• Normal user: [e-mail] (limited access) - No password required
• Admin user: [e-mail] (full access) - No password required

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.