Ru

Description and capabilities of CRYSTAL v1.0

28.02.2025

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. Register/edit/delete user, change password.
  • 2. Registration/authentication/authorization and general work with requests, implemented on TanStack Query v5.
  • 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. 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.

The project is being tested in

BrowserStack

Share

Copy

BTC (Network BTC) - 1C2EWWeEXVhg93hJA9KovpkSd3Rn3BkcYm

Ethereum (Network ERC20) - 0x05037ecbd8bcd15631d780c95c3799861182e6b8

Similar posts

This website uses cookies. By clicking the 'Accept' button or continuing to use the website, you agree to the use of cookies.