Next.js TypeScript React TailwindCSS Radix UI Framer Motion TanStack Query React Hook Form Zod Socket.IO Axios Markdown Next Themes ESLint Prettier
Π ΡΡΡΠΊΠΈΠΉ: ΠΠ»Π°ΡΡΠΎΡΠΌΠ° Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½Π·ΠΈΠΉ Π½Π° ΡΠΈΠ»ΡΠΌΡ, ΠΊΠ½ΠΈΠ³ΠΈ ΠΈ ΠΌΡΠ»ΡΡΡΠΈΠ»ΡΠΌΡ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ markdown-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π², Π»Π°ΠΉΠΊΠΎΠ² ΠΈ ΡΠ΅ΠΉΡΠΈΠ½Π³ΠΎΠ². ΠΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π°Π΄ΠΌΠΈΠ½-ΠΏΠ°Π½Π΅Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ.
English: A review platform for movies, books, and animations with markdown support, comments, likes, and ratings. The integrated admin panel enables full control over users and content.
| GIF | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ / Description |
|---|---|
| OAuth | π·πΊ OAuth Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ. πΊπΈ OAuth authorization. |
| Main Overview | π·πΊ ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΎΠ±Π·ΠΎΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ: Π³Π»Π°Π²Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅ΡΠ΅Π½Π·ΠΈΠΉ, ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. πΊπΈ Main overview of the app: dashboard, review pages, comments, and user management. |
| Comments & Likes | π·πΊ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΈ Π»Π°ΠΉΠΊΠΎΠ² Ρ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠΉ ΡΠΈΠ½Ρ
ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ ΡΠ΅ΡΠ΅Π· WebSocket. πΊπΈ Adding comments and likes with real-time synchronization via WebSocket. |
| Main Overview | π·πΊ Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π½Π·ΠΈΡΠΌΠΈ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ: ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ° ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ. πΊπΈ Managing reviews and users: editing, sorting, and navigating through sections. |
| Create Review | π·πΊ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΡΠ΅ΡΠ΅Π½Π·ΠΈΠΈ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ markdown ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. πΊπΈ Creating a new review with markdown support and image upload. |
π·πΊ Π ΡΡΡΠΊΠΈΠΉ:
Π€ΡΠΎΠ½ΡΠ΅Π½Π΄ ReviewApp ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π½Π° Next.js Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ TypeScript ΠΈ Tailwind CSS. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ. Π ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ: ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π½Π·ΠΈΠΉ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ markdown, Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΈ Π»Π°ΠΉΠΊΠΎΠ² Ρ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠ΅ΡΠ΅Π· WebSocket. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΡΡΠΌΠ½Π°Ρ/ΡΠ²Π΅ΡΠ»Π°Ρ ΡΠ΅ΠΌΡ, Π»ΠΎΠΊΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ UX.
πΊπΈ English:
The ReviewApp frontend is built with Next.js, TypeScript, and Tailwind CSS. It delivers a modern design, responsive UI, and smooth user experience. Features include creating and editing reviews with markdown support, image uploads, comments and likes with real-time WebSocket synchronization. The app supports light/dark themes, interface localization, and animated transitions for enhanced UX
π·πΊ Π ΡΡΡΠΊΠΈΠΉ:
π Π Π΅ΡΠ΅Π½Π·ΠΈΠΈ: ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅, ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ markdown-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠΌ
πΌ ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ΅ΡΠ΅Π½Π·ΠΈΠΈ ΠΈ Π°Π²Π°ΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ
π¬ ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ΠΌ
π ΠΠ°ΠΉΠΊΠΈ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½Π·ΠΈΠΉ ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π²
π Π Π΅Π°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ: ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π»Π°ΠΉΠΊΠΎΠ² ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΡΠ΅ΡΠ΅Π· WebSocket
π¨ Π’Π΅ΠΌΡ: ΡΠ²Π΅ΡΠ»Π°Ρ ΠΈ ΡΡΠΌΠ½Π°Ρ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅
π ΠΠΎΠΊΠ°Π»ΠΈΠ·Π°ΡΠΈΡ (i18n) ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
β‘ ΠΡΡΡΡΡΠΉ ΠΎΡΠΊΠ»ΠΈΠΊ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ React Query (ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠΈΠ½Ρ
ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ
)
π ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ ΡΠ΅ΡΠ΅Π· Framer Motion
π Π£Π²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ ΡΠ΅ΡΠ΅Π· Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Sonner
π± ΠΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ
πΊπΈ English:
π Reviews: create, edit, and delete with a markdown editor
πΌ Image upload for reviews and user avatars
π¬ Comments with edit and delete options
π Likes for reviews and comments
π Real-time updates of likes and comments via WebSocket
π¨ Themes: light & dark, switchable in UI
π Interface localization (i18n)
β‘ Fast responses with React Query (caching and data sync)
π Animations and smooth transitions with Framer Motion
π Notifications powered by Sonner
π± Fully responsive design
| ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ / Component | Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ / Technology |
|---|---|
| π Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ / Framework | Next.js (App Router) |
| βοΈ UI & State | React, React Hook Form, Zod |
| π¨ Π‘ΡΠΈΠ»ΠΈ / Styling | Tailwind CSS, tailwind-merge, clsx |
| π Markdown Editor | @uiw/react-md-editor, @uiw/react-markdown-preview |
| β‘ Data fetching & Caching | React Query (@tanstack) |
| π Π Π΅Π°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ / Real-time | Socket.IO client |
| π ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΈ / Animations | Framer Motion, tw-animate-css |
| π¨ UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ | Radix UI (Dropdown, Dialog, Tooltip, etc.) |
| π Π’Π΅ΠΌΡ ΠΈ i18n | next-themes, Π»ΠΎΠΊΠ°Π»ΠΈΠ·Π°ΡΠΈΡ |
| π Π£Π²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ / Notifications | Sonner |
| π‘ API-Π·Π°ΠΏΡΠΎΡΡ | Axios |
| π‘ ΠΠ°Π»ΠΈΠ΄Π°ΡΠΈΡ / Validation | React Hook Form, Zod |
| βοΈ ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ / Additional | Lucide React (icons) |