For your info, I described the bootcamp in more detail in below post.
Just to review Vanilla JS once again, I decided to re-do the project, this time with Asp.Net Core Backend instead of Node.JS, just to practice my API skills in Asp.Net Also.
The aim of the project is, to do things manually, without the use of any front-end frameworks:
- writing the pages in plain html, and all styling in css without bootstrap or other systems
- the back-end Api-s are Asp.Net Core Web API
- the pages are served via Asp.Net Core Razor Pages
- database for back-end MS SQL with EF Core (database-first)
Prerequisites for the application and sources for preparation:
- basic EF Core and MS SQL with database first approach: https://www.entityframeworktutorial.net/efcore/create-model-for-existing-database-in-ef-core.aspx
- basic Razor Pages for Asp.Net Core 3.1 / https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html Web API For Asp.Net Core
- intermediate Css and Html
App is live under: https://notes.zoltanhalasz.net/
Full code of the app can be found: https://github.com/zoltanhalasz/SmartNotes.git
The SQL to create the database is: under the Github folder above, file: script.sql
I won't promise that I will lead you through the application step by step, because of its complexity and also it's a study project, nothing perfect in it, but can be a great learning tool for you. :)
What the application does not include:
- no special user management, identity, authorizations, no password hashing, only basic cookie-based user login/authentication
- no special protection for the Web APIs
- no Jquery or JS Framework on the frontend, only basic Vanilla JS, with Fetch for AJAX
- no dashboard or advanced features, statistics
- it is not a perfect application, from the formatting or design/engineering point of view. It is a sample to learn the above mentioned features.
Description of the project
- Manage notes/(small blog posts) of users - add notes: title, content, add color, add images; Navigate between notes and images, edit existing notes, search and sort notes.
- Signup of Users - collect email, password and name from user
- Login Users - based on name and password
The application has just a couple of pages, in the following logical order:
This is the main page of the app, users who are logged in, can create and manage notes. Color can be changed, images can be added and the title/content can be edited for each note. Additionally, searching and ordering the notes is possible.