Description and capabilities of CRYSTAL v1.0

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 v23.6.1.
• PM2 v5.4.3.
• PNPM v10.5.2.
• Vite v6.1.0.

Description and capabilities:

• 1. Register/edit/delete user, change password.
• 2. Register/authentication/authorization and general work with requests, built 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 – Nano ID, 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. Hashtags are sorted without regard to case, for example, when creating a hashtag – ‘CRYSTAL’, subsequent hashtags with the names – ‘Crystal’ and ‘CRYstal’, will be sorted in the block of recommended hashtags under the name – ‘CRYSTAL’.
• 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. 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.