"Angular-Project-Amigurumi" is a place, where you can browse some of the most popular Amigurumi in the world and add some new product that you have created. Authenticated users can like and comment on products in the app. Sellers can use the platform to add, update and delete products from their profile page.
The "Angular-Project-Amigurumi" application contains the following views: login page, registration page, logout page, personal profile page, catalog page and details page.
The front end of the project has been deploy in Firebase: https://amugurumiusers.web.app
- This is Single Page Application built with Angular, Bootstrap, HTML/CSS, Javascript
- This project was bootstrapped with Angular
- Clone this repository
git clone https://github.com/ZdravkaGoranova/Angular-Project-Amigurumi.git - Go to folder src:
cd src - Install dependencies:
npm install - Make sure you created .env file in the main directory and populate it with correct variables
- Start the application:
npm start
Account with data: - email : peter@abv.bg password : 123456
- If there is an error it is returned as { message }
- Example: {message: "Invalid Password, because length is short than 6 symbols." }
npm start- Go to folder tests:
cd tests npx playwright test test
- Two types of users: Guest User and Logged-In User
- One types of login: Login with correct details after registration
- Web Responsive Design
- Route Guards
- Web UI Tests made with playwright/test Library
- Form Validations
- Loading Spinner
- Displays errors from back-end
publicfolder contains global asssets for the app.srcfolder contains the app, index.html, styles.css, environments and folders for the components, modules, app.interceptor.ts,routing.module and service.src/appfolder - properly named folder for each component that includes the component itself, the css for the component.src/environmentsfolder - contains custom environmentssrc/app/corefolder - contains footer,header and error components.src/app/guardsfolder - contains authguards.src/app/homefolder - contains css, html and ts components.src/app/mainfolder - contains .src/app/productfolder - contains details,edit, new-product components,product-routing,product.module.src/app/product-listfolder - contains css, html and ts components.src/app/sharedfolder - contains loader, pipes and validators.src/app/userfolder - contains login,register and profile components.
Here are the available routes:
/: homepage which redirects to/login/auth/login: displays login form/auth/register: displays register form/catalog/products: displays all products/catalog/products/:id: displays a product/catalog/products/edit/tdTq8ZOD4vFEcgmJBEx7: displays a product details for edit from author/auth/profile: displays user's profile details/catalog/addNewProduct: displays user's individual new product details
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.
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.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
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.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.