Full Stack Asp.Net Core App (Bootcamp Project) - Part 1 - Introduction

In the last weeks I decided to review my Javascript front-end lessons from last year's bootcamp. It was a locally organized intensive course, with the aim of hiring those who finish it.
I worked hard to learn javascript and node.js on that course, graduated the bootcamp, but finally remained with my .net projects for my former employer instead of being hired by the organizer of the bootcamp.

For your info, I described the bootcamp in more detail in below post.
https://mydev-journey.blogspot.com/2019/11/journey-to-web-programming.html

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
• all interactions with user will be via plain Javascript
• 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
• upper-intermediate Javascript on DOM (as preparation pls check this one: https://dev.to/zoltanhalasz/full-stack-mini-todo-app-with-javascript-ajax-api-controller-and-in-memory-database-asp-net-core-razor-pages-2bbf)
• 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:

Index/Home Page

This is the landing page for the application. It's plain html with css written manually, integrated into Razor Pages Index.CsHtml
From this page, users can signup or login.

Signup Page

The design here is also manual, integrated into Razor Pages (no layout). The user can register by filling in basic info.

Login Page

In order to write notes, users must log in, using this page. Very basic design, manually written.

Notes Page

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.

Error Page