About The Website

Tech stack

• NodeJS v20
• Package manager Yarn
• Main framework Nuxt 3 that includes Vue3 for the Front End and NitroJS for the Back End
• Bootstrap 5 as a style library because the website was made on it initially
• MongoDB as database, and Mongoose to make DB calls simple
• Docker as a development tool

Libraries

• Vee-Validate to work with forms
• @vueuse/motion to make things animated. Notification pop-up as a sample.

Development

You need to install:

• NodeJS (NVM is perfect way to perform this)
• Docker
• yarn (after NodeJS with npm install --global yarn)

To start development you need to:

1. Up the Docker with docker-compose (in project directory run docker compose up --detach)
2. Run the project with yarn dev

Pages

There are two pages types public and private. private pages are available only after login by /login route.

Name	Route	Type	Sense
Error	Any	public	Any errored page
Home	/	public	Home page
Category	/category/[:slug]	public	All articles of category
Tag	/tag/[:slug]	public	All articles of tag
Article	/post/[:slug]	public	To display content of the article
Project	/project	public	Some words about website structure
About	/about	public	Some words about me
Login	/login	public	Page to log in
Manage Tags	/manage/tags	private	Page to manage tags
Manage Categories	/manage/categories	private	Page to manage categories
Unpublished Articles	/manage/unpublished	private	Page to manage unpublished articles
New Article	/manage/new-article	private	Create an article and redirect to edit
Edit Article	/edit/[:id]	private	Route with form for article
Check and Publish	/preview/[:id]	private	Page to check article and publish it

Page actions

All public pages exist to display content to the user, and therefore do not contain any special actions other than navigation.

Tags

The page to manage tags. Here you can add, edit and delete any tag. The slug is part of the link, so editing it directly affects the site's SEO.

Important. It is more convenient to create tags from the new/manage article page. All tags added to the form will be automatically created in the system.

Categories

You can do add, edit and delete for categories as well.

If you delete a category with attached articles, then all articles will become out of categories.

You can create a new category on the article edit page.

Articles

Initially, an article is created by clicking the Add button. It is created empty and can be viewed in the unpublished section.

While editing an article, its auto-save is triggered. You can see it by notification.

Once you've finished editing, you go to the Preview Page. It allows you to evaluate what the new article will look like. In addition, on the same page, basic validation of all fields is carried out, and if you forgot something, it will be highlighted for you. However, validation does not block publication. You can even publish a completely blank article.

Once an article is published, it appears in the list of articles on the Home Page. Articles on the Home Page are sorted based on the date the article was created (you can also edit it).

Going to the article, of course, its content is visible. But, by clicking on the big pencil, the article will be removed from publication, and you will be moved to the editing page.

Authorization

Authorization is based on four environment variables:

• ADMIN_LOGIN and ADMIN_PASSWORD login and password for logging in
• ADMIN_SECRET - an alternative to the user ID
• COOKIE_SECRET - a secret with which cookies are encrypted Basically, the administrator enters the login and password, and in response receives a cookie with an encrypted ADMIN_SECRET. The cookie is valid for a week (this setting is set via constants). All user encryption and decryption is located in server/utils/cookie.ts

How user detection works

Initially, when any user enter the site, a request is sent to the server for the route /auth/me. If the user has a cookie set, the user data will return and be set in the store. Then the application can determine what information to display to the user.

There are two middlewares in the application

1. To control navigation through routes. It is located in route-access.global.ts and if the user tries to open any admin page, but has not logged in to the site, he will be redirected to /login
2. To control requests to the server. It is located in protected-routes.ts and if a user without rights tries to make any request, he will receive a 401 error in response. This error is processed by fetch-interceptor.ts . It kicks the user off the page to /login, while saving in the address bar where the user was kicked from. So that in the future, if the user logs in again, he will be redirected to the correct page.

Security

To eliminate the possibility of hacking, as well as to protect the application from other attacks, the nuxt-security module is installed. Requests rate is configured in nuxt.config