Description and capabilities of CRYSTAL v1.0

Architecture:

SPA, REST API, FSD.

Composition:

Stack: MERN

Full code | Package.json: frontend | backend

Structure:

• MongoDB v8.0.4.
• Express.js v4.21.2.
• React v19.0.0.
• Node.js v24.0.2.
• NPM v11.3.0.
• PM2 v5.4.3.
• Vite v6.1.0.

General description

• 1. Frontend and backend parts of the project are organized according to the principles of Feature-Sliced Design - to ensure modularity, flexibility and scalability of the project.
• 2. Registration/editing/deletion of a user, changing a password.
• 3. Avatar, banner, description and the ability to create a unique user ID.
• 4. The username can contain any symbols and emoji, it is not necessary to enter a last name.
• 5. User registration with a check for those already in the database - email and ID, without regard to the case of letters.
• 6. Adding/editing/deleting posts.
• 7. Post view counter.
• 8. Administrator mode (editing/deleting users and posts).
• 9. Like system and separate page with liked posts.
• 10. Hashtag system. Separate page for a specific hashtag.
• 11. Convenient user password change has been implemented.

Frontend

• 1. Low-level query handling is implemented via the native Fetch API, without using third-party libraries. To unify the logic, httpClient was created.

• 2. General query handling is implemented using TanStack Query v5.

• 3. Dark theme using Redux Toolkit, data attributes and css variables.
• 4. Translation into English and Russian, using react-i18next.
• 5. Sorting recommended posts taking into account Plurals.
• 6. In posts and user descriptions, URLs are automatically converted into clickable links with convenient display (https://shedov.top/ → shedov.top), and hashtags are converted into navigation elements leading to the corresponding page. Punctuation marks (periods, commas) are excluded from the link or hashtag when constructing a route, and at the same time, remain visible in the text. A helper has been created for these functions - formatLinksInText.
• 7. Automatic update of outdated data on the page if the user leaves the site tab and then returns again. Implemented with - 'refetchOnWindowFocus: true' in TanStack Query v5.
• 8. Infinite scroll posts with Intersection Observer API and TanStack Query (useInfiniteQuery).
• 9. Compressing loaded images in the browser, using Browser Image Compression.
• 10. Auto-expanding the text field using - react-textarea-autosize, when creating/editing a post or adding a user description.
• 11. Displaying loader, when loading users, posts, etc.
• 12. Displaying indicator of image loading progress, in the form of a filling bar.
• 13. Implemented display of page - 404.
• 14. Validation using Yup, sometimes custom.
• 15. Validation of the user registration form, including: checking for the number of characters entered, the correct email format, checking for existing emails and IDs.
• 16. Validation of the user login form, including: checking for the number of characters entered, the correct email format, checking for the correct email and password.
• 17. Validation of the text size and title when creating and editing a post.
• 18. The project uses only pure JSX and CSS, there are no template engines for layout: Bootstrap, MUI, etc. Each component has - module.css.

Backend

• 1. The backend implementation corresponds architectural style of REST API - for a logical, predictable and standardized structure of requests and routes.
• 2. System of automatic connection of routes from modules, allowing to connect routes without manual registration.
• 3. When registering a user, it is not necessary to enter an ID and name. In the absence of an ID and name, an ID is created automatically using - Node.js crypto.randomBytes(16), and the name remains empty.
• 4. Automatic creation of directories for images, setting the maximum size and acceptable formats using Multer.
• 5. Hashtags are extracted from the texts of posts, with the removal of punctuation marks (dots, commas), converted to lower case and cleared of duplicates using the helper - extract-hashtags-from-text.
• 6. Validation using express-validator, sometimes custom.
• 7. Validation of the user registration form, including: checking the number of input characters, correct email format, check for existing email and ID.
• 8. Validation of the user login form, including: checking for the number of characters entered, correct email format, checking for the correct email and password.
• 9. Validation of text size and title when creating and editing a post.

Database

• 1. The database is organized into two collections: users and posts. The collections are linked using the link mechanism - ref.
• 2. To optimize performance when filtering and sorting, the following indices are used: UserSchema.index({ createdAt: -1 }) and PostSchema.index({ createdAt: -1 }). This significantly speeds up the selection of users and posts by creation date, especially when working with large amounts of data.

Security

• 1. To protect the application from unauthorized cross-domain requests, the CORS mechanism is configured.
• 2. The auth logic is implemented in the controller auth.controller.js, in compliance with modern security requirements:
  - Before saving to the database, passwords are hashed using bcrypt and salt, this ensures that even if the database is leaked, an attacker will not gain access to real passwords.
  - After registering or logging in, the user is issued a JWT token, which is saved in a cookie with the HttpOnly flag, this excludes access to the token from JavaScript and protects against XSS attacks.
  - Cookies are marked with the Secure (active in production) and SameSite=Strict attributes, which prevents them from being sent during cross-domain requests and protects against CSRF attacks.
  
• 3. The auth.middleware.js middleware checks the presence and validity of the token in the cookies on each protected route. If the token is missing, damaged, or expired, it returns - 403 Forbidden.
• 4. reCAPTCHA v3 when registering a user.
• 5. Access control to specific pages, editing users and posts.
• 6. The handleServerError handler automatically determines the name of the controller in which the error occurred, extracting it from the call stack. The full text of the error along with the context is output to the standard server console, facilitating debugging. In the production environment, leakage of sensitive information is excluded: the server response returns only a universal message - "Server error" with HTTP status 500, without stack details and code, which protects the internal structure of the server from potential attacks.
• 7. Configuring the Nginx server with security in mind.
• 8. Installing a free Let's Encrypt SSL certificate with automatic renewal.
• 9. Enabling HTTP/2 protocol support.

Description of CRYSTAL v1.0 (Production)

This version is functionally identical to the regular CRYSTAL v1.0 version, but it includes several key improvements aimed at increasing reliability, security, and stability:

• 1. Secure connection to the database.
  In the production environment, the backend connects to MongoDB using authentication parameters (user, password, authSource), which provides protection from unauthorized access.
• 2. Automatic reconnection to MongoDB.
  A mechanism for automatic reconnection to MongoDB in case of connection failures has been implemented. The number of attempts (maxRetries) and the delay (retryDelay) between them can be configured, which increases the resilience of the application during temporary failures in the database.
• 3. Advanced .env configuration.
  This version introduces a more flexible and detailed structure .env, allowing fine-grained customization in production and development environments.
• 4. Advanced logging of connection to MongoDB.
  Connection to the database is performed with detailed logging and status messages - this simplifies debugging and monitoring in production and development environments.
• 5. Improved handleServerError handler.
  In the development environment, the HTTP response returns an enhanced error object, including: message, call stack, and automatically determined call context.