Releases: OurCreativity/ourcreativity
Releases · OurCreativity/ourcreativity
v5.0 RILIS: REVOLUTION EDITION
OurCreativity v5.0
Revolution Edition
Merangkai Imajinasi Menghidupkan Karya
Akhirnya Sampai Juga
Setelah 8 bulan development dari April sampai Desember 2025 kita akhirnya bisa bilang dengan bangga bahwa OurCreativity v5.0 sudah siap
Ini bukan update biasa. Ini adalah revolusi total dari cara platform ini bekerja dan terlihat
Important
Dari galeri portfolio yang pasif sekarang jadi studio kreasi yang hidup
Dari loading 12 detik sekarang cuma 2 detik
Dari 50 lebih dependencies sekarang cuma 35
| Info | Detail |
|---|---|
| Tanggal Rilis | 27 Desember 2025 |
| Versi | 5.0.0 Revolution Edition |
| Status | Production Ready |
| Live | ourcreativity.vercel.app |
| Repository | Ardelyo/ourcreativity |
Semua yang Berubah di v5.0
Overview
| Category | Changes |
|---|---|
| Performance | 10x Faster Loading / 92% Less DB Queries / 15% Smaller Bundle / Smart Caching |
| Features | Creation Studio / Division Pages / Error Boundary / Admin Panel v2 |
| Tech Stack | React 19 / TypeScript 5.8 / Vite 6 / Tiptap Editor / Monaco Editor |
| Design | Zen Minimalism / Dark Mode Only / Glassmorphism / Brutalist Accents |
| Architecture | Root Level Structure / Custom Components / BrowserRouter / Split Queries |
Creation Studio
Fitur paling gede di v5.0 adalah Creation Studio yang merupakan editor all in one untuk semua tipe konten
Text Mode - Karya Tulis
Rich text editor yang powerful dengan fitur lengkap
| Fitur | Deskripsi | Technology |
|---|---|---|
| Heading | H1 sampai H6 support | Tiptap StarterKit |
| Formatting | Bold italic underline strikethrough | Tiptap Extensions |
| Links | Hyperlink dengan preview | @tiptap/extension-link |
| Lists | Bullet ordered dan task list | @tiptap/extension-task-list |
| Character Count | Real time word dan character counter | @tiptap/extension-character-count |
| Bubble Menu | Floating toolbar untuk quick formatting | @tiptap/extension-bubble-menu |
| Typography | Smart quotes dan typography fixes | @tiptap/extension-typography |
| Images | Inline image support | @tiptap/extension-image |
Code Mode - Koding
Editor yang sama dengan VS Code langsung di browser
| Fitur | Deskripsi | Technology |
|---|---|---|
| Syntax Highlighting | 100+ bahasa programming | Monaco Editor |
| IntelliSense | Autocomplete dan suggestions | Monaco Built-in |
| Multiple Themes | Dark light dan custom themes | Monaco Themes |
| Minimap | Code overview di sidebar | Monaco Feature |
| Line Numbers | Gutter dengan line info | Monaco Feature |
| Find Replace | Search di dalam code | Monaco Feature |
| Keyboard Shortcuts | VS Code compatible shortcuts | Monaco Keybindings |
Visual Mode - Grafis
Upload dan manage gambar dengan tools lengkap
| Fitur | Deskripsi | Technology |
|---|---|---|
| Drag Drop | Upload dengan drag and drop | react-dropzone |
| Compression | Auto compress untuk optimize size | browser-image-compression |
| Format Support | PNG JPG WebP GIF SVG | Native Browser |
| Preview | Real time preview sebelum publish | React State |
| Multiple Upload | Upload banyak gambar sekaligus | Custom Implementation |
Video Mode
Video upload dengan processing di browser
| Fitur | Deskripsi | Technology |
|---|---|---|
| Video Player | Built in player dengan controls | HTML5 Video |
| Format Support | MP4 WebM MOV | Native Browser |
| Thumbnail | Auto generate thumbnail | FFmpeg WASM |
| Metadata | Extract duration resolution | FFmpeg Utils |
| Size Limit | Smart validation untuk upload | Custom Validation |
Slide Mode
Carousel creator untuk multi image content
| Fitur | Deskripsi | Technology |
|---|---|---|
| Multi Image | Upload banyak gambar untuk carousel | Custom Implementation |
| Reordering | Drag drop untuk urutan | React DnD Pattern |
| Preview | Carousel preview sebelum publish | embla-carousel-react |
| Navigation | Arrow dan dot navigation | Custom UI |
Referensi Source Code
Performance 10x Lebih Cepat
Achievement teknikal terbesar di v5.0 adalah optimasi performa yang masif
Before vs After
| Halaman | v4.0 | v5.0 | Improvement |
|---|---|---|---|
| Karya Page | 8-12 detik | 1.5-2.5 detik | 5-8x lebih cepat |
| Profile Page | 6-8 detik | 1-1.5 detik | 6-8x lebih cepat |
| Admin Dashboard | 4-5 detik | 0.8-1.2 detik | 5x lebih cepat |
| Navigation | Full reload | Instant cache | Langsung jalan |
| Database Queries | 60+ per page | 4-5 per page | 92% reduction |
| Bundle Size | 450KB | 380KB | 15% smaller |
| Lighthouse Score | 94/100 | 96/100 | +2 points |
Database Level Optimization
15+ indexes baru yang ditambahkan untuk query yang lebih cepat
| Table | Index | Purpose |
|---|---|---|
| likes | idx_likes_work_id |
Fast like count per work |
| likes | idx_likes_user_id |
Fast user likes lookup |
| comments | idx_comments_work_id |
Fast comment count |
| comments | idx_comments_user_id |
Fast user comments |
| profiles | idx_profiles_user_id |
Fast profile lookup |
| works | idx_works_division |
Fast division filter |
| works | idx_works_created_at |
Fast date sorting |
| works | idx_works_is_approved |
Fast approved filter |
| announcements | idx_announcements_active |
Fast active check |
| follows | idx_follows_composite |
Fast follow lookup |
Application Level Optimization
React Query configuration yang lebih smart
| Config | v4.0 | v5.0 | Impact |
|---|---|---|---|
| staleTime | 10 minutes | 15 minutes | +50% cache duration |
| gcTime | 30 minutes | 2 hours | 4x longer retention |
| refetchOnMount | true (always) | 'stale' (only if needed) | Key performance fix |
Query Level Optimization
Fix N+1 query problem dengan split queries
| Step | v4.0 | v5.0 |
|---|---|---|
| 1 | Fetch works with nested data | Fetch works basic only |
| 2 | For each work fetch likes | Fetch all likes counts in one query |
| 3 | For each work fetch comments | Fetch all comments counts in one query |
| 4 | For each work fetch author | Fetch all authors in one query |
| 5 | Total 60+ queries | Combine data in frontend |
| Result | 60+ database calls | 4-5 database calls |
Referensi Source Code
Design System Baru
Evolusi dari Glowar ke Zen Minimalism
| Aspect | v4.0 Glowar | v5.0 Zen Minimalism |
|---|---|---|
| Philosophy | Eye catching vibrant | Calm over chaos |
| Colors | Pastel colorful | Monochrome black white gray |
| Effects | Gradient dan glow | Glassmorphism frosted glass |
| Theme | Light dan dark toggle | Dark mode only |
| Style | Soft rounded edges | Brutalist tegas |
| UI Library | Radix UI 25 packages | Custom components |
Color Palette
| Token | v4.0 Glowar | v5.0 Zen |
|---|---|---|
| Primary | #E5DEFF Light Lavender |
#ffffff Pure White |
| Background | Light/Dark toggle | #050505 Near Black |
| Surface | Gradient based | #0f0f0f Dark Surface |
| Accent 1 | #FEC6A1 Peach |
#e11d48 Accent Red |
| Accent 2 | #9B6DFF Amethyst |
#a855f7 Accent Purple |
| Brutalist Yellow | None | #FACC15 |
| Brutalist Pink | None | #F472B6 |
| Brutalist Cyan | None | #22D3EE |
Design Principles
| Principle | Description |
|---|---|
| Calm over Chaos | Minimal visual noise dengan focused content |
| Function over Form | Setiap element punya purpose bukan decorasi |
| Premium over Flashy | Sophisticated look bukan eye catching |
| Dark over Light | Optimized untuk eye comfort dan focus |
Referensi Source Code
Division Pages
Setiap kategori kreasi sekarang punya halaman dedicated dengan fitur khusus
| Division | URL | Features | Design Focus |
|---|---|---|---|
| Graphics | `/divisions/grap... |
Contributors
Ardelyo and cto-new