프로덕션 수준의 리뷰 시스템을 구축한 방법 (MongoDB Aggregation, Custom Toasts & CSS Variables)

Source: Dev.to

Hey fellow devs!

After a lot of late nights, coffee, and refactoring, I’m super excited to announce the release of v0.5.0 of DotSuite! Instead of just adding a basic rating form, I completely overhauled the architecture to build a highly scalable, premium product‑reviews system from scratch. No shortcuts, no ugly native browser alerts—just clean code and solid architecture.

Demo: You can see the whole system in action in the quick showcase video below.

(video embed placeholder)

The Backend Heavy‑Lifting: MongoDB Aggregation

• Performance‑first averaging – Calculating the average rating on every page load can become a bottleneck. I moved the computation to MongoDB using Aggregation Pipelines ($group, $avg). The database now returns only the final aggregated numbers, making the operation lightning fast.
• Spam prevention – Enforced a strict one‑review‑per‑user‑per‑product rule with a unique compound index. Even if the frontend slips, the database will reject duplicate reviews, eliminating loopholes.

Ditching Native Alerts for Custom Toasts & Modals

Native window.alert() and window.confirm() ruin the UX of modern web apps. I removed every native dialog and built:

• A custom Toast Notification System for transient messages.
• Confirm Modals that match the app’s design language.

Both are fully reusable across the application.

Theming Done Right: Pure CSS Variables

Previously, hard‑coded Tailwind color classes (e.g., text-yellow-400 for review stars) were scattered throughout components. In v0.5.0:

• All colors are driven by CSS variables defined in a centralized globals.css.
• Switching between Light and Dark mode is instant and requires no conditional logic inside React components.

100 % Localization (i18n)

A global tool needs global support. The entire reviews system—and the app itself—are now fully localized into five languages:

• English
• Arabic
• French
• German
• Russian

Localization covers everything from empty states to form‑validation error messages.

What’s Next?

I’d love to hear your thoughts!

• How do you usually handle rating calculations in your apps?
• Do you prefer aggregation pipelines or calculating on insert/update triggers?

Leave a comment below!

---

Tags: webdev nextjs mongodb react programming dotsuite