Platform e-learning #1 di Indonesia untuk persiapan SNBT bagi siswa SMA
Membantu siswa meraih impian masuk perguruan tinggi negeri terbaik dengan percaya diri dan hasil maksimal
- 🌟 Overview
- ✨ Key Features
- 🛠️ Tech Stack
- 🚀 Project Structure
- ⚙️ Installation & Setup
- 🔧 Development
- 📱 Pages Overview
- 🧩 Components
- 🎨 UI Components
- 🪝 Custom Hooks
- 🔄 Effects & Animations
- 📊 Platform Statistics
- 🔗 API References
- 🧪 Testing
- 🔒 Environment Variables
- 🚢 Deployment
- 👥 Team
- 📞 Contact
- 📝 License
SNBTIn adalah platform persiapan SNBT (Seleksi Nasional Berbasis Tes) terpercaya yang dirancang khusus untuk siswa SMA di Indonesia. Platform ini menyediakan ekosistem pembelajaran komprehensif dengan materi berkualitas, latihan soal, forum diskusi, dan fitur-fitur interaktif yang membantu siswa mempersiapkan diri secara optimal untuk SNBT guna melanjutkan pendidikan ke perguruan tinggi negeri impian mereka.
📈 Statistik Platform
- 10,000+ Siswa Aktif
- 85% Tingkat Kelulusan Siswa
- 98% Kemiripan Soal dengan SNBT
- 10,000+ Latihan Soal Tersedia
- 4.8/5 Rating Rata-rata
|
Materi pembelajaran komprehensif untuk semua mata pelajaran SNBT dengan format video, PDF, dan dokumen interaktif. |
Pembelajaran melalui video dengan penjelasan detail dari pengajar berpengalaman yang mudah dipahami. |
|
Ribuan latihan soal dengan pembahasan detail dan analisis kesalahan untuk membantu meningkatkan kemampuan. |
Wadah untuk bertanya, berdiskusi, dan mendapatkan jawaban dari pengajar maupun sesama siswa. |
|
Pantau perkembangan belajar dengan dashboard analisis performa detail dan rekomendasi materi. |
Simulasi SNBT secara berkala dengan soal-soal terbaru untuk mengukur kesiapan menghadapi ujian sesungguhnya. |
|
Fitur tampilan gelap/terang untuk kenyamanan belajar di berbagai kondisi pencahayaan. |
Tampilan responsif yang optimal di berbagai perangkat, dari desktop hingga smartphone. |
Frontend
- Framework: Next.js (v13.4.19)
- Language: TypeScript (v5.1.6)
- UI Library: React (v18.2.0)
- Styling:
- CSS Modules
- Tailwind CSS (inferring from structure)
- State Management: React Context API + Custom Hooks
- Animation Libraries:
- Custom CSS Animations
- Framer Motion (inferred)
- 3D Visualization: Three.js (inferred from ThreeDModel component)
Backend (inferred)
- API Routes: Next.js API Routes
- Database: Not specified (possibly MongoDB or PostgreSQL)
- Authentication: Next.js Authentication (inferred from login page)
DevOps & Tools
- Linting: ESLint (eslint.config.mjs)
- Code Formatting: Prettier (inferred)
- Version Control: Git
- Package Manager: npm
SNBTIn/
├── .next/ # Next.js build output
├── node_modules/ # Dependencies
├── public/ # Static assets
├── src/ # Source code
│ ├── components/ # React components
│ │ ├── effects/ # Visual effects components
│ │ │ ├── AnimatedWaveBackground.tsx
│ │ │ ├── DynamicHeroBackground.tsx
│ │ │ ├── FloatingElements.tsx
│ │ │ ├── ParallaxHero.tsx
│ │ │ ├── ParticlesBackground.tsx
│ │ │ └── ThreeDModel.tsx
│ │ ├── home/ # Homepage specific components
│ │ │ ├── CTASection.tsx
│ │ │ ├── FeatureCard.tsx
│ │ │ ├── FeaturesSection.tsx
│ │ │ ├── HeroSection.tsx
│ │ │ ├── TestimonialCard.tsx
│ │ │ └── TestimonialsSection.tsx
│ │ ├── layout/ # Layout components
│ │ │ ├── DarkModeToggle.tsx
│ │ │ ├── Footer.tsx
│ │ │ ├── Layout.tsx
│ │ │ └── Navbar.tsx
│ │ ├── profile/ # Profile page components
│ │ │ ├── TeamMemberCard.tsx
│ │ │ └── TeamSection.tsx
│ │ └── ui/ # Reusable UI components
│ │ ├── Alert.tsx
│ │ ├── Badge.tsx
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ └── Modal.tsx
│ ├── hooks/ # Custom React hooks
│ │ ├── useLocalStorage.js
│ │ ├── useMediaQuery.js
│ │ └── useScrollAnimation.js
│ ├── pages/ # Next.js pages
│ │ ├── api/ # API routes
│ │ │ └── hello.js
│ │ ├── _app.tsx # Custom App component
│ │ ├── _document.tsx # Custom Document
│ │ ├── forum-diskusi.tsx # Forum diskusi page
│ │ ├── index.tsx # Homepage
│ │ ├── kelas-online.tsx # Online classes page
│ │ ├── login.tsx # Login page
│ │ ├── materi.tsx # Materials page
│ │ ├── profil-saya.tsx # User profile page
│ │ └── profil.tsx # Team profile page
│ ├── styles/ # Global styles
│ │ ├── animations.css # Animation styles
│ │ └── globals.css # Global CSS
│ └── utils/ # Utility functions
│ └── data.js # Static data
├── .gitignore # Git ignore rules
├── eslint.config.mjs # ESLint configuration
├── jsconfig.json # JavaScript configuration
├── LICENSE # License file
├── next-env.d.ts # Next.js TypeScript declarations
├── next.config.js # Next.js configuration
├── package-lock.json # Package lock file
├── package.json # Project dependencies
├── postcss.config.js # PostCSS configuration
└── README.md # Project documentation
Ikuti langkah-langkah berikut untuk menginstall dan menjalankan SNBTIn secara lokal:
- Clone repository
git clone https://github.com/yourusername/SNBTIn.git- Pindah ke direktori project
cd SNBTIn- Install dependencies
npm install- Run development server
npm run dev- Buka http://localhost:3000 di browser Anda
npm run dev- Menjalankan development servernpm run build- Membangun aplikasi untuk productionnpm start- Menjalankan aplikasi yang sudah di-buildnpm run lint- Menjalankan ESLint untuk memeriksa kodenpm run format- Memformat kode dengan Prettier (inferred)npm run test- Menjalankan unit tests (inferred)
- Components: Komponen React di-organize berdasarkan fitur/halaman
- Pages: Mengikuti routing Next.js berbasis file
- Hooks: Custom hooks untuk logic yang dapat digunakan kembali
- Styling: CSS Modules untuk styling komponen
| Page | Deskripsi | Path |
|---|---|---|
| Homepage | Landing page utama dengan hero section, fitur, dan testimonial. | / |
| Kelas Online | Halaman untuk menjelajahi kelas SNBT yang tersedia. | /kelas-online |
| Materi | Halaman untuk mengakses berbagai materi pembelajaran SNBT. | /materi |
| Forum Diskusi | Platform diskusi interaktif untuk siswa dan pengajar. | /forum-diskusi |
| Profil Tim | Informasi tentang tim pengembang SNBTIn. | /profil |
| Login | Halaman untuk login ke platform. | /login |
| Profil Saya | Halaman profil pengguna setelah login. | /profil-saya |
SNBTIn dibangun dengan struktur komponen modular untuk memudahkan pengembangan dan maintenance.
Home Components
- HeroSection.tsx: Section utama di halaman beranda dengan headline, subheadline, dan CTA
- FeaturesSection.tsx: Section yang menampilkan fitur-fitur utama platform
- FeatureCard.tsx: Card untuk menampilkan fitur individual dengan icon dan deskripsi
- TestimonialsSection.tsx: Section yang menampilkan testimoni dari siswa
- TestimonialCard.tsx: Card untuk menampilkan testimoni individual dengan foto dan quote
- CTASection.tsx: Call-to-Action section untuk mengajak pengguna mendaftar
Layout Components
- Layout.tsx: Wrapper component untuk layout keseluruhan
- Navbar.tsx: Navigation bar responsif dengan logo dan menu links
- Footer.tsx: Footer section dengan links, kontak, dan copyright
- DarkModeToggle.tsx: Toggle switch untuk beralih antara mode terang dan gelap
Profile Components
- TeamSection.tsx: Section yang menampilkan anggota tim pengembang
- TeamMemberCard.tsx: Card untuk menampilkan profil anggota tim dengan foto dan informasi
Komponen UI yang dapat digunakan kembali di seluruh aplikasi.
UI Building Blocks
- Button.tsx: Komponen button dengan variasi style dan ukuran
- Card.tsx: Container card universal untuk berbagai konten
- Alert.tsx: Komponen notifikasi untuk info, warning, dan error messages
- Badge.tsx: Label kecil untuk status, kategori, atau tag
- Modal.tsx: Dialog popup untuk konfirmasi atau form input
Custom hooks untuk logic yang digunakan kembali di komponen-komponen berbeda.
Available Hooks
- useLocalStorage.js: Hook untuk menyimpan dan mengambil data dari localStorage
- useMediaQuery.js: Hook untuk responsive design dan media queries
- useScrollAnimation.js: Hook untuk animasi berbasis scroll
Komponen visual effects untuk meningkatkan UX dan estetika platform.
Effects Components
- AnimatedWaveBackground.tsx: Latar belakang dengan animasi gelombang
- DynamicHeroBackground.tsx: Background yang dinamis untuk hero section
- FloatingElements.tsx: Elemen-elemen yang bergerak mengambang
- ParallaxHero.tsx: Efek parallax untuk hero section
- ParticlesBackground.tsx: Latar belakang dengan efek partikel
- ThreeDModel.tsx: Integrasi model 3D dengan Three.js
Beberapa data tentang platform SNBTIn:
| Metrik | Nilai |
|---|---|
| Siswa Aktif | 10,000+ |
| Tingkat Kelulusan | 85% |
| Kemiripan SNBT | 98% |
| Soal Latihan | 10,000+ |
| Rating | 4.8/5 |
| Mata Pelajaran | 12+ |
| Pengajar Berpengalaman | 50+ |
Dokumentasi API untuk interaksi dengan backend (inferred).
API Endpoints
- GET /api/hello: Endpoint test sederhana
- GET /api/materi: Mendapatkan daftar materi pembelajaran
- GET /api/kelas: Mendapatkan daftar kelas online
- GET /api/forum: Mendapatkan daftar topik diskusi
- GET /api/user/profile: Mendapatkan data profil pengguna
- POST /api/auth/login: Endpoint untuk login
- POST /api/auth/register: Endpoint untuk registrasi
Strategi dan tools untuk testing aplikasi (inferred).
Testing Strategy
- Unit Testing: Testing komponen individual
- Integration Testing: Testing interaksi antar komponen
- E2E Testing: Testing pengalaman pengguna secara keseluruhan
Konfigurasi environment yang dibutuhkan untuk menjalankan aplikasi (inferred).
Required Environment Variables
# API
NEXT_PUBLIC_API_URL=
# Authentication
NEXTAUTH_URL=
NEXTAUTH_SECRET=
# Database
DATABASE_URL=
# Features Flags
NEXT_PUBLIC_ENABLE_ANALYTICS=
Panduan untuk deployment aplikasi (inferred).
Deployment Options
- Vercel: Deployment terintegrasi dengan GitHub
- Netlify: Alternatif deployment dengan continuous integration
- Self-hosted: Deployment manual dengan Node.js server
Tim pengembang SNBTIn yang berdedikasi:
|
Syahril Arfian Almazril Front End & UI/UX |
Maulana Cahya Magista Front End & UI/UX |
Stephani Maria Sianturi Front End & UI/UX |
Rafiy Fasha Purnomo Putra Front End & UI/UX |
📧 Email: [email protected]
📞 Telepon: +62 812-3456-789
📍 Alamat: Jl. Bandung bubat no 28
This project is licensed under the MIT License - see the LICENSE file for details.
© 2025 SNBTIn. Hak Cipta Dilindungi.