Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
Final Project Assignment for Telerik Academy Aplpha with JavaScript - Design and implement single-page web application that will allow restaurant chefs to create and manage recipes composed of products with known nutrition values. During the interaction with the system users should see changes in nutrition information in real time. Newly created recipes could be tagged with a category from a list.
- Authenticate users - Register, Login, Logout
- Users can CRUD recipes
- Users can search list of recipes by name or filter by category
- Users can search for product and filter by product group
- Angular 7
- Boostrap 4 (NGBootstrap)
- FontAwesome 5
Clone the repository
git clone https://gitlab.com/ChainVertigo/fourth-project.git
Switch to the repo folder
cd fourth-project
Install dependencies
npm install
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
The App handles user authentication so you can register and then login (click the images to enlarge):
After login, you will be forwarded to the List Recipes view where you can see all your recipes. In this view you can search the recipes by name and/or filter them by category:
You can open a given recipe in its own detailed view, where you can see all the details about it:
The most advanced part of the App is the Create Recipe view where you can create new recipes by adding Products and Recipes to the recipe:
There are also a Category page where you can filter the recipes by category and a User Profile page where you can see some basic details about yourself.