Description and capabilities of CRYSTAL v1.0

Architecture: SPA, REST API.

Building:

MERN stack (MongoDB, Express.js, React, Node.js).

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.

Description and capabilities:

• 1. Registration / logIn / logOut / authorization in the frontend, as well as general work with queries, is implemented on TanStack Query v5.

• 2. Register/edit/delete user, change password.
• 3. reCAPTCHA v3 when registering a user.
• 4. Avatar, banner, description and the ability to create a unique user ID.
• 5. The username can contain any symbols and emoji, it is not necessary to enter the last name.
• 6. User registration with a check for those already in the database - email and ID, without regard to the case of letters.
• 7. When registering, it is not necessary to enter the ID and name. If there is no ID and name, the ID is created automatically using - Node.js crypto.randomBytes(16), and the name remains empty.
• 8. Administrator mode (editing/deleting users and posts).
• 9. Adding/editing/deleting posts.
• 10. Post views counter.
• 11. Auto-expanding textarea with - react-textarea-autosize.
• 12. Compressing uploaded images in the browser, with Browser Image Compression.
• 13. Automatic creation of image directories, setting maximum size and allowed formats using Multer.
• 14. Infinite scroll of posts using Intersection Observer API and TanStack Query (useInfiniteQuery).
• 15. Like system and a separate page with liked posts.
• 16. Hashtag system. A separate page for a specific hashtag.
• 17. Translation into English and Russian, using react-i18next.
• 18. Sorting recommended posts using Plurals.
• 19. Dark theme using Redux Toolkit, data attributes and css variables.
• 20. Frontend validation, using Yup, sometimes custom.
• 21. Backend validation, using express-validator, sometimes custom.
• 22. Cookie/JWT authentication (HTTPonly, Secure, SameSite: Strict).
• 23. Access control to specific pages, editing users and posts.
• 24. Configuring the Nginx server with security and access control in mind.
• 25. Installation and configuration of automatic renewal, free SSL certificate - Let's Encrypt.
• 26. In the frontend part, 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 (dots, commas) are excluded from the link or hashtag when constructing a route, but remain visible in the text. A helper has been created for these functions - formatting-links-In-text.
• 27. In the backend part, 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 a helper - extract-hashtags-from-text.
• 28. The project uses only pure JSX and CSS, there are no template engines for layout: Bootstrap, MUI, etc. In every the component has - module.css.
• 29. The database consists of two collections - 'posts' and 'users', which are related via ref.
• 30. Login form validation, in frontend and backend, including: checking the number of characters entered and the correct email format, checking the correct email and password.
• 31. Registration form validations, in frontend and backend, including: checking for the number of characters entered, the correct email format, checking for existing email and ID.
• 32. Validation of text and title size when creating and editing a post in frontend and backend.
• 33. Automatically refresh outdated data on a page if the user leaves the site tab and then returns again. Implemented with - 'refetchOnWindowFocus: true' in TanStack Query v5.
• 34. HTTP/2 protocol support.
• 35. Display loader when loading users, posts, etc.
• 36. Working with requests at a low level is implemented through the native Fetch API, without using third-party libraries. To unify the logic, requestManager was created.