This project was a part of my university project. The idea is to create a website for the recipes and giving users the ability to search recipes by ingredients. Users can create recipes but also can sell their meals to others. They can track all of the orders in their dashboard. Every order has a "Waiting" status until the chef(recipe owner) changes it to "Approved", "Denied" or "Completed". For every status change the person who ordered the meal gets an email notification. What's interesting here is when you ordering a meal, users can set a date when they want a meal to be delivered (e.g. for birthdays, parties, weddings, etc) and they can send a special note to the chef (if they are allergic to something or have a special request).
This project has been developed in 3 stages:
- Creating a Business Process Model and Notation (BPMN)
- Creating a mockup/prototype in ADOBE XD
- Coding :)
Business Process Model and Notation (BPMN) is a standard for business process modeling that provides a graphical notation for specifying business processes in a Business Process Diagram (BPD),[3] based on a flowcharting technique very similar to activity diagrams from Unified Modeling Language (UML).The objective of BPMN is to support business process management,for both technical users and business users, by providing a notation that is intuitive to business users, yet able to represent complex process semantics. Read more at wikipedia BPMN model was done in Cardanit.
- Email confirmation
- Profile editing
- Publishing recipe
- Searching recipes
- Order approval
###You can download BPMN file by clicking here
I have created a design in Adobe XD just to have a raw pattern of how my application will look like and how should I design my database before I start coding.
Project is created with:
- ASP .NET Core (5.0)
- Angular (12.0)
- Sqlite
- Postgres *Bootstrap *Material Design
For the backend, I have chosen to do my application using Asp .Net Core (5.0) using the "First Code" approach. ###Important developing part
- The database was created using EntityFramoworkCore
- For data protection(DTO), I have used AutoMapper
- User is authenticated using Tokens (JWT) and JWTBearer
- Users and recipes pictures are stored at Cloudinary
- API's are tested using Postman
- Emails are send using SMTP
- Adding roles and users is done using ASP NET Identity
The most challenging thing for me to do is to make a function for Recipe Editing, to be more precise the part for editing recipes ingredients. I had a many-to-many relationship, a user could delete an existing ingredient, add a new one or change the amount of an ingredient. *I had to separate ingredients that are deleted and the ones that are the same as in the "old" ingredients list. *For the ingredients that are the same, I had to check if any changes in the "amount" column were made if so I had to update them. *If a new ingredient was added, I had to check if I had that ingredient already in the database (so I don't have any duplicates). #####The important part was making code asynchronous and taking care of threads since I had many database requests.
Angular framework was used for the frontend part of the application with the help of Material Design and Bootstrap. ###Important developing part *For preventing unauthorized access Guards are used *Reactive forms with validations are used for adding recipes, making orders, registration, etc *When user logs in their user name and token are stored in Web browsers local storage, so when a user refreshes the page is still logged in *Attribute directives are used for user roles *Interceptor for handling tokens *Picture upload and gallery
Everything is made of small components (like puzzle pieces) that are putted together into one page. **The part that took me the most of time and the part that im proud of is "Add new recipe". "Add new recipe form" is created from 6 little forms that are wroking like one. Every child notifies the parent what data they got and if the validatation errors are caught. **For the ingredients and directions form i have used form array, whenever user clicks on ingredient/direction field new form is created(dynamically). Form[i+1] has the information if form[i] has any data, if it doesnt, user can click on form[i+1] but new form wont be created. Validation applies for every form array and im accessing ingredients/directions array from parent control.
For running this project in VSC ** starting Asp Net
$ cd RecipesServer
$ dotnet run
Or you can just use Visual Studio :)
** starting Angular in VSC
$ cd RecipesUIAngular
$ npm install
$ ng serve -o
Application is deployed using Heroku.
Check out the website by clicking here
Because this project was created as part of my university project, this website is only for personal use. All the content you see is taken from Simple Recipes. I dont own any of their pictures or content.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent