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.
Share
BTC (Network BTC) - 1C2EWWeEXVhg93hJA9KovpkSd3Rn3BkcYm
Ethereum (Network ERC20) - 0x05037ecbd8bcd15631d780c95c3799861182e6b8
Comment on