From cbe9f3a9be416f2b487ed3b11649743b6786c5f0 Mon Sep 17 00:00:00 2001 From: Ardelyo Date: Thu, 19 Feb 2026 09:02:52 +0700 Subject: [PATCH] Revise README formatting and project details Updated README.md to improve formatting, fix badge labels, and enhance project description. --- README.md | 370 +++++++++++++++++------------------------------------- 1 file changed, 117 insertions(+), 253 deletions(-) diff --git a/README.md b/README.md index 42c1e1a..31601f0 100644 --- a/README.md +++ b/README.md @@ -1,334 +1,198 @@
-# ๐ŸŽจ OurCreativity +# OurCreativity -### Revolution Edition v5.0 +**Platform Komunitas Kreatif โ€” Revolution Edition v5.0** -![Version](https://img.shields.io/badge/Versi-5.0.0-0D1117?style=for-the-badge&labelColor=1a1a2e) -![Status](https://img.shields.io/badge/Status-Aktif-00d26a?style=for-the-badge&labelColor=1a1a2e) -![License](https://img.shields.io/badge/Lisensi-MIT-blue?style=for-the-badge&labelColor=1a1a2e) +![Version](https://img.shields.io/badge/versi-5.0.0-0D1117?style=flat-square&labelColor=1a1a2e) +![Status](https://img.shields.io/badge/status-aktif-00d26a?style=flat-square&labelColor=1a1a2e) +![License](https://img.shields.io/badge/lisensi-MIT-blue?style=flat-square&labelColor=1a1a2e) -![React](https://img.shields.io/badge/React-19.2.0-61DAFB?style=flat-square&logo=react&logoColor=white) -![TypeScript](https://img.shields.io/badge/TypeScript-5.8.2-3178C6?style=flat-square&logo=typescript&logoColor=white) -![Vite](https://img.shields.io/badge/Vite-6.2.0-646CFF?style=flat-square&logo=vite&logoColor=white) -![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4-38B2AC?style=flat-square&logo=tailwind-css&logoColor=white) -![Framer Motion](https://img.shields.io/badge/Framer_Motion-Latest-FF0055?style=flat-square&logo=framer&logoColor=white) +React 19 ยท TypeScript ยท Vite 6 ยท Tailwind CSS ยท Framer Motion ยท Supabase -
- -**Platform Komunitas Kreatif Generasi Berikutnya** - -*Merangkai Imajinasi, Menghidupkan Karya.* - -
- -[Lihat Demo](https://ourcreativity.vercel.app) ยท [Laporkan Bug](https://github.com/ardelyo/ourcreativity/issues) ยท [Ajukan Fitur](https://github.com/ardelyo/ourcreativity/issues) - ---- +[Demo](https://ourcreativity.vercel.app) ยท [Laporkan Bug](https://github.com/ardelyo/ourcreativity/issues) ยท [Ajukan Fitur](https://github.com/ardelyo/ourcreativity/issues)
-
- -## ๐ŸŒ English Quick Start - -**OurCreativity** is a creative community platform built with React 19, TypeScript, and Tailwind CSS. It showcases creative works across five divisions: Graphics, Coding, Video, Writing, and Memes. - -### Quick Setup -```bash -git clone https://github.com/ardelyo/ourcreativity.git -cd ourcreativity -npm install -cp .env.example .env # Add your Supabase credentials -npm run dev -``` - -๐Ÿ“– **For detailed setup instructions, see [docs/SETUP.md](docs/SETUP.md)** (available in Indonesian with key technical details) - --- -
- -## ๐Ÿ“‹ Daftar Isi - -- [English Quick Start](#-english-quick-start) -- [Tentang Proyek](#-tentang-proyek) -- [Fitur Utama](#-fitur-utama) -- [Tech Stack](#-tech-stack) -- [Memulai](#-memulai) -- [Struktur Proyek](#-struktur-proyek) -- [Dokumentasi](#-dokumentasi) -- [Kontribusi](#-kontribusi) -- [Governance](#-governance) -- [Tim Pengembang](#-tim-pengembang) -- [Lisensi](#-lisensi) - -
- -## ๐ŸŒŸ Tentang Proyek - -**OurCreativity** adalah platform ekosistem digital yang dirancang untuk menjadi wadah utama bagi para kreator dari berbagai disiplin ilmu. Dibangun dengan filosofi **"Luminous Design"**, platform ini menawarkan pengalaman visual yang mendalam, elegan, dan futuristik. +## Apa Ini? -Versi 5.0 (**Revolution Edition**) menandai transformasi total dari antarmuka pengguna, menghadirkan: +OurCreativity adalah platform buat komunitas kreatif. Tempat orang-orang showcase karya mereka โ€” mulai dari desain grafis, coding, video, tulisan, sampai meme. Dibangun pakai React 19, TypeScript, dan Supabase sebagai backend. -- โœ… Interaksi yang cair dan responsif -- โœ… Performa tinggi dengan optimisasi modern -- โœ… Struktur navigasi berbasis *Bento Grid* yang intuitif -- โœ… Nuansa atmosferik dan pencahayaan dinamis -- ๐Ÿ†• **Master Update v5.0** โ€” [Lihat Detail Perubahan Besar](docs/MASTER_UPDATE_V5.md) -- ๐Ÿ†• **BrowserRouter** dengan URL yang persisten dan shareable -- ๐Ÿ†• **Error Boundary** untuk penanganan error yang user-friendly -- ๐Ÿ†• **Fetch Error States** dengan retry functionality +Versi 5.0 ini hasil rebuild total dari UI sebelumnya. Navigasi sekarang pakai Bento Grid, animasi pakai Framer Motion, dan routing sudah pakai BrowserRouter biar URL-nya bisa di-share. -
- -## โœจ Fitur Utama - -### ๐ŸŽจ Desain Luminous -Antarmuka yang hidup dengan kedalaman visual, efek glassmorphism, dan pencahayaan ambien yang bereaksi terhadap interaksi pengguna. - -### ๐Ÿงฉ Lima Divisi Kreativitas - -| Divisi | Deskripsi | -|--------|-----------| -| **๐Ÿ–ผ๏ธ Grafis** | Galeri visual untuk seni digital, UI/UX, dan ilustrasi | -| **๐Ÿ’ป Coding** | Showcase untuk rekayasa perangkat lunak dan eksperimen kode | -| **๐ŸŽฌ Video** | Teater sinematik untuk karya gambar bergerak | -| **โœ๏ธ Menulis** | Ruang editorial untuk literatur dan jurnalisme | -| **๐Ÿ˜‚ Meme** | Pusat budaya internet yang dinamis dan penuh humor | +--- -### ๐Ÿ“ฑ Pengalaman Pengguna Premium -- **Animasi Fluid** โ€” Transisi halaman menggunakan Framer Motion -- **Creation Studio v2** โ€” Editor multi-fungsi (Slide, Code, Text, Video) -- **Dynamic Island** โ€” Navigasi adaptif dan cair -- **Responsif Total** โ€” Optimal di desktop, tablet, dan mobile +## Fitur -
+**Lima divisi kreativitas:** -## ๐Ÿ› ๏ธ Tech Stack +| Divisi | Isi | +|--------|-----| +| Grafis | Seni digital, UI/UX, ilustrasi | +| Coding | Project software, eksperimen kode | +| Video | Karya sinematik, short film | +| Menulis | Artikel, cerita, jurnalisme | +| Meme | Ya... meme | -Proyek ini dibangun di atas fondasi teknologi web modern: +**Yang baru di v5.0:** +- BrowserRouter โ€” URL yang persistent dan bisa di-share +- Error Boundary โ€” kalau ada error, nggak langsung white screen +- Creation Studio v2 โ€” editor multi-format (slide, code, text, video) +- Fetch error states dengan tombol retry +- Glassmorphism dan pencahayaan dinamis di seluruh UI -| Kategori | Teknologi | -|----------|-----------| -| **Framework** | React v19 | -| **Bahasa** | TypeScript v5.8 | -| **Build Tool** | Vite v6 | -| **Styling** | Tailwind CSS v3 (File-based Config) | -| **Animasi** | Framer Motion | -| **Routing** | React Router DOM (BrowserRouter) | -| **Database** | Supabase | -| **Ikon** | Lucide React | -| **Error Handling** | React Error Boundary | +Detail perubahan lengkap ada di [docs/MASTER_UPDATE_V5.md](docs/MASTER_UPDATE_V5.md). -
+--- -## ๐Ÿš€ Memulai +## Tech Stack -### Prasyarat +| | | +|---|---| +| Framework | React 19 | +| Bahasa | TypeScript 5.8 | +| Build Tool | Vite 6 | +| Styling | Tailwind CSS 3 | +| Animasi | Framer Motion | +| Routing | React Router DOM | +| Database | Supabase | +| Ikon | Lucide React | -Pastikan Anda telah menginstal: -- **Node.js** v18 atau lebih baru -- **npm** atau **yarn** +--- -### Instalasi +## Cara Jalankan -1. **Clone repositori** - ```bash - git clone https://github.com/ardelyo/ourcreativity.git - ``` +Butuh **Node.js v18+** dan **npm** atau **yarn**. -2. **Masuk ke direktori proyek** - ```bash - cd ourcreativity - ``` +```bash +# clone repo +git clone https://github.com/ardelyo/ourcreativity.git +cd ourcreativity -3. **Instal dependensi** - ```bash - npm install - # atau - yarn install - ``` +# install dependencies +npm install -4. **Jalankan server pengembangan** - ```bash - npm run dev - # atau - yarn dev - ``` +# setup environment +cp .env.example .env +# isi .env dengan kredensial Supabase kamu -5. **Konfigurasi Environment** - ```bash - cp .env.example .env - # Edit .env dengan kredensial Supabase kamu - ``` +# jalankan +npm run dev +``` -6. **Buka di browser** - ``` - http://localhost:5173 - ``` +Buka `http://localhost:5173` di browser. -> ๐Ÿ“– Untuk panduan setup lengkap termasuk Supabase, lihat [Panduan Setup](docs/SETUP.md) +Kalau butuh panduan setup Supabase yang lebih detail, baca [docs/SETUP.md](docs/SETUP.md). -### Perintah Tersedia +### Perintah Lain -| Perintah | Deskripsi | -|----------|-----------| -| `npm run dev` | Menjalankan server pengembangan | -| `npm run build` | Build untuk produksi | -| `npm run preview` | Preview build produksi | +```bash +npm run build # build produksi +npm run preview # preview hasil build +``` -
+--- -## ๐Ÿ“‚ Struktur Proyek +## Struktur Folder ``` ourcreativity/ -โ”‚ -โ”œโ”€โ”€ ๐Ÿ“ components/ # Komponen UI Reusable +โ”œโ”€โ”€ components/ # komponen UI yang reusable โ”‚ โ”œโ”€โ”€ BentoGrid/ โ”‚ โ”œโ”€โ”€ Navbar/ โ”‚ โ”œโ”€โ”€ CreationStudio/ โ”‚ โ””โ”€โ”€ ... -โ”‚ -โ”œโ”€โ”€ ๐Ÿ“ pages/ # Halaman Aplikasi +โ”œโ”€โ”€ pages/ # halaman-halaman aplikasi โ”‚ โ”œโ”€โ”€ Home.tsx โ”‚ โ”œโ”€โ”€ Karya.tsx โ”‚ โ”œโ”€โ”€ Tim.tsx โ”‚ โ””โ”€โ”€ ... -โ”‚ -โ”œโ”€โ”€ ๐Ÿ“ lib/ # Utilities & Helpers -โ”‚ โ””โ”€โ”€ supabase.ts # Supabase client -โ”‚ -โ”œโ”€โ”€ ๐Ÿ“ docs/ # Dokumentasi (Bahasa Indonesia) -โ”‚ โ”œโ”€โ”€ versions/ # Arsip Riwayat Versi -โ”‚ โ”œโ”€โ”€ ARSITEKTUR.md -โ”‚ โ”œโ”€โ”€ KOMPONEN.md -โ”‚ โ””โ”€โ”€ ... -โ”‚ -โ”œโ”€โ”€ ๐Ÿ“„ App.tsx # Komponen Root & Routing -โ”œโ”€โ”€ ๐Ÿ“„ index.css # Global Styles -โ”œโ”€โ”€ ๐Ÿ“„ tailwind.config.ts # Konfigurasi Tailwind -โ”œโ”€โ”€ ๐Ÿ“„ vite.config.ts # Konfigurasi Vite -โ””โ”€โ”€ ๐Ÿ“„ README.md +โ”œโ”€โ”€ lib/ # utilities +โ”‚ โ””โ”€โ”€ supabase.ts +โ”œโ”€โ”€ docs/ # dokumentasi (Bahasa Indonesia) +โ”œโ”€โ”€ App.tsx # root component & routing +โ”œโ”€โ”€ index.css # global styles +โ”œโ”€โ”€ tailwind.config.ts +โ””โ”€โ”€ vite.config.ts ``` -
+--- -## ๐Ÿ“š Dokumentasi +## Dokumentasi -Dokumentasi teknis lengkap tersedia dalam **Bahasa Indonesia**: +Semua dokumentasi ditulis dalam Bahasa Indonesia. -| Dokumen | Deskripsi | -|---------|-----------| -| ๐Ÿš€ [Panduan Setup](docs/SETUP.md) | **MULAI DARI SINI** - Install & konfigurasi | -| โœจ [**Master Update v5.0**](docs/MASTER_UPDATE_V5.md) | **BARU!** - Ringkasan fitur revolusioner v5.0 | -| ๐Ÿ—„๏ธ [Database](docs/DATABASE.md) | Schema & query Supabase | -| ๐Ÿ—๏ธ [Arsitektur Sistem](docs/ARSITEKTUR.md) | Struktur kode dan keputusan teknis | -| ๐Ÿ›ฃ๏ธ [**Routing**](docs/ROUTING.md) | **BARU!** - Panduan lengkap sistem routing | -| ๐Ÿงฉ [Komponen UI](docs/KOMPONEN.md) | Panduan penggunaan komponen | -| ๐Ÿ“„ [Halaman](docs/HALAMAN.md) | Detail implementasi setiap halaman | -| ๐Ÿš€ [Deployment](docs/PANDUAN_DEPLOYMENT.md) | Panduan peluncuran ke produksi | -| ๐Ÿค [Kontribusi](docs/KONTRIBUSI.md) | Standar kode dan alur kerja | -| ๐Ÿ“ [Catatan Pengembang](docs/CATATAN_PENGEMBANG.md) | Catatan teknis dan TODO | -| ๐Ÿ“œ [Riwayat Versi](docs/versions/RIWAYAT_VERSI_LENGKAP.md) | Sejarah evolusi proyek | +| Dokumen | Tentang | +|---------|---------| +| [Setup](docs/SETUP.md) | Instalasi dan konfigurasi awal | +| [Master Update v5.0](docs/MASTER_UPDATE_V5.md) | Ringkasan perubahan besar di v5.0 | +| [Database](docs/DATABASE.md) | Schema dan query Supabase | +| [Arsitektur](docs/ARSITEKTUR.md) | Struktur kode dan keputusan teknis | +| [Routing](docs/ROUTING.md) | Sistem routing aplikasi | +| [Komponen](docs/KOMPONEN.md) | Cara pakai tiap komponen | +| [Halaman](docs/HALAMAN.md) | Detail implementasi halaman | +| [Deployment](docs/PANDUAN_DEPLOYMENT.md) | Cara deploy ke produksi | +| [Kontribusi](docs/KONTRIBUSI.md) | Standar kode dan alur kerja | +| [Riwayat Versi](docs/versions/RIWAYAT_VERSI_LENGKAP.md) | Sejarah versi dari awal | -
+--- -## ๐Ÿค Kontribusi +## Kontribusi -Kontribusi sangat kami hargai! Untuk berkontribusi: +Mau bantu? Silakan. -1. Fork repositori ini -2. Buat branch fitur (`git checkout -b fitur/FiturBaru`) -3. Commit perubahan (`git commit -m 'Menambahkan FiturBaru'`) -4. Push ke branch (`git push origin fitur/FiturBaru`) +1. Fork repo ini +2. Buat branch baru (`git checkout -b fitur/nama-fitur`) +3. Commit perubahanmu (`git commit -m 'Tambah fitur X'`) +4. Push (`git push origin fitur/nama-fitur`) 5. Buat Pull Request -> ๐Ÿ“– Baca [Panduan Kontribusi](docs/KONTRIBUSI.md) dan [CONTRIBUTING.md](./CONTRIBUTING.md) untuk informasi lebih detail. - -
- -## ๐Ÿ›๏ธ Governance +Baca [CONTRIBUTING.md](./CONTRIBUTING.md) dulu sebelum mulai biar nggak bingung soal standar kode dan alur review. -OurCreativity is governed transparently with clear ownership and decision-making processes. - -### Key Governance Documents - -| Document | Purpose | -|----------|---------| -| **[MAINTAINERS.md](./MAINTAINERS.md)** | Project leadership, responsibilities, and decision framework | -| **[ROADMAP.md](./ROADMAP.md)** | Future direction and planned features | -| **[CHANGELOG.md](./CHANGELOG.md)** | Release history and what changed | -| **[CONTRIBUTING.md](./CONTRIBUTING.md)** | How to contribute to the project | -| **[AUTHORS.md](./AUTHORS.md)** | All contributors and their roles | - -### Escalation & Support - -- **Questions?** [GitHub Discussions](https://github.com/ardelyo/ourcreativity/discussions) -- **Bug Reports?** [GitHub Issues](https://github.com/ardelyo/ourcreativity/issues) -- **Security Issues?** See [SECURITY.md](./SECURITY.md) - -
- -## ๐Ÿ‘ฅ Tim Pengembang - - - - - - -
- Ardelyo
- Lead Developer & Designer - 		- DoctorThink
- Code Refactoring & Documentation -
+--- -
+## Governance -## โš ๏ธ Penggunaan Brand & Lisensi +| Dokumen | Fungsi | +|---------|--------| +| [MAINTAINERS.md](./MAINTAINERS.md) | Siapa yang maintain, bagaimana keputusan diambil | +| [ROADMAP.md](./ROADMAP.md) | Rencana fitur ke depan | +| [CHANGELOG.md](./CHANGELOG.md) | Riwayat rilis | +| [AUTHORS.md](./AUTHORS.md) | Daftar kontributor | +| [SECURITY.md](./SECURITY.md) | Laporan masalah keamanan | -### ๐Ÿ“ Penting Dibaca! +Punya pertanyaan? Buka [GitHub Discussions](https://github.com/ardelyo/ourcreativity/discussions). +Nemuin bug? Buat [issue](https://github.com/ardelyo/ourcreativity/issues). -**OurCreativity adalah proyek open source untuk edukasi**, dengan aturan sederhana: +--- -โœ… **Kode: Bebas dipakai** (MIT License) -- Gratis untuk belajar, modifikasi, dan pakai di project sendiri -- Boleh untuk komersial -- Boleh fork dan distribute +## Tim -โš ๏ธ **Brand: Dilindungi** -- **JANGAN pakai** nama "OurCreativity" untuk website/project kamu -- **JANGAN copy** logo dan identitas visual kami -- Tujuan: Menghindari kebingungan di komunitas +**Ardelyo** โ€” Lead Developer & Designer +**DoctorThink** โ€” Code Refactoring & Documentation -> ๐Ÿ“– **Baca detail lengkap:** [BRAND_USAGE.md](./BRAND_USAGE.md) (Bahasa Indonesia, mudah dipahami!) +--- -
+## Soal Lisensi dan Brand -## ๐Ÿ“„ Lisensi +Kodenya open source di bawah lisensi MIT. Bebas dipakai buat belajar, dimodifikasi, atau dipakai di project sendiri โ€” termasuk komersial. +Tapi nama "OurCreativity", logo, dan identitas visualnya dilindungi. Jangan pakai nama atau logo kami buat project lain supaya nggak bikin bingung orang. Detail lengkapnya ada di [BRAND_USAGE.md](./BRAND_USAGE.md). ``` Hak Cipta ยฉ 2025 OurCreativity - -Proyek ini dilisensikan di bawah Lisensi MIT. -Lihat file LICENSE untuk informasi lebih lanjut. +Dilisensikan di bawah Lisensi MIT. ``` -
- ---
-**Dibuat dengan โค๏ธ dan โ˜• oleh Tim OurCreativity Edisi Coding** - -*"Merangkai Imajinasi Kita."* +Dibuat oleh Tim OurCreativity โ€” Edisi Coding -
+*Merangkai Imajinasi Kita.* [![GitHub Stars](https://img.shields.io/github/stars/ardelyo/ourcreativity?style=social)](https://github.com/ardelyo/ourcreativity)