Skip to content

🎓 Platform visualisasi data SINTA Indonesia untuk pembelajaran web development & data visualization dengan React.js

License

Notifications You must be signed in to change notification settings

firdausmntp/opensinta

Repository files navigation

OpenSINTA

OpenSINTA Logo

Version License Educational React Vite Tailwind CSS

Platform visualisasi terbuka untuk data publikasi SINTA (Science and Technology Index) Indonesia

🎓 EDUCATIONAL PURPOSE ONLY - Repository ini dibuat khusus untuk tujuan pembelajaran dan edukasi dalam bidang web development, data visualization, dan ethical web scraping.

🌐 Live Demo | 📖 Documentation | 🐛 Report Bug


📋 Daftar Isi


🎯 Tentang OpenSINTA

OpenSINTA adalah platform visualisasi data terbuka yang menyediakan analisis mendalam terhadap jurnal akademik Indonesia berdasarkan data SINTA (Science and Technology Index). Platform ini memungkinkan pengguna untuk mengeksplorasi, menganalisis, dan memvisualisasikan data publikasi akademik dengan interface yang modern dan responsif.

🎨 Preview

Home Page Visualisasi Tutorial
Home Visualization Tutorial

📚 About Repository

⚠️ DISCLAIMER: TUJUAN EDUKASI DAN PEMBELAJARAN

Repository ini dibuat khusus untuk tujuan edukasi dan pembelajaran dalam bidang:

  • Web Development dengan React.js dan Vite
  • Data Visualization menggunakan Recharts
  • Web Scraping Ethics dan best practices
  • Open Source Development workflow

🎯 Tujuan Pembelajaran

  • Frontend Development: Memahami React hooks, routing, dan state management
  • Data Processing: Belajar manipulasi JSON, filtering, dan analitik
  • UI/UX Design: Implementasi Tailwind CSS dan responsive design
  • Ethical Scraping: Panduan scraping yang bertanggung jawab
  • Open Data: Praktik penggunaan data publik secara etis

📖 Untuk Pelajar & Educator

  • Students: Gunakan sebagai referensi project React
  • Educators: Template untuk mengajar web development
  • Researchers: Contoh visualisasi data akademik
  • Developers: Best practices untuk data visualization

⚖️ Ethical Guidelines

  1. Data Usage: Semua data bersumber dari informasi publik SINTA
  2. Educational Purpose: Tidak untuk komersial atau profit
  3. Respect Robots.txt: Ikuti panduan scraping yang bertanggung jawab
  4. Attribution: Berikan credit kepada sumber data
  5. Rate Limiting: Gunakan delay dan tidak overload server

🚫 Pembatasan Penggunaan

  • Tidak untuk tujuan komersial
  • Tidak untuk scraping massal tanpa izin
  • Tidak untuk menyalahgunakan data institusi
  • Boleh untuk pembelajaran dan riset akademik
  • Boleh untuk portfolio dan demo

✨ Fitur Utama

🏠 Dashboard Utama

  • Hero Section dengan search bar terintegrasi
  • Quick Stats dengan statistik real-time
  • Trending Topics berdasarkan Subject Area dari data actual
  • Kategori Populer dengan distribusi persentase
  • Journal Cards dengan informasi lengkap dan aksi interaktif

📊 Visualisasi Data

  • Multiple Chart Types: Bar Chart, Pie Chart, Scatter Plot
  • Interactive Filters: Pencarian, Akreditasi, Subject Area
  • Data Export: JSON dan CSV
  • Real-time Analytics:
    • Distribusi Akreditasi SINTA (S1-S6)
    • Status Pengindeksan Scopus & Garuda
    • Analisis Impact Factor
    • Top Institutions
    • Subject Area Distribution

🎓 Tutorial & Panduan

  • Ethical Web Scraping guidelines
  • Step-by-step tutorial untuk scraping SINTA
  • Code Examples dengan best practices
  • Error Handling dan troubleshooting

🧮 Kalkulator Tools (Coming Soon)

  • Impact Factor Predictor
  • Citation Calculator
  • Journal Ranking Tool
  • Research Performance Analyzer

🛠️ Teknologi

Frontend Framework

  • React 18.2.0 - Modern React dengan Hooks
  • React Router DOM 6.22.3 - Client-side routing
  • Vite 5.2.10 - Fast build tool dan development server

Styling & UI

  • Tailwind CSS 3.4.3 - Utility-first CSS framework
  • Framer Motion 11.0.24 - Animation library
  • Lucide React 0.379.0 - Beautiful icons

Data Visualization

  • Recharts 2.8.0 - Chart library untuk React
  • Custom Analytics - Real-time data processing

Development Tools

  • ESLint - Code linting
  • PostCSS - CSS processing
  • Autoprefixer - CSS vendor prefixes

🚀 Instalasi

Prasyarat

  • Node.js >= 18.0.0
  • npm >= 9.0.0
  • Git

Clone Repository

git clone https://github.com/firdausmntp/opensinta.git
cd opensinta

Install Dependencies

npm install

Development Server

npm run dev

Aplikasi akan berjalan di http://localhost:5173

Build Production

npm run build
npm run preview

Deploy ke GitHub Pages

npm run deploy

📱 Penggunaan

1. Eksplorasi Data Jurnal

  • Buka halaman utama untuk melihat overview jurnal
  • Gunakan search bar untuk mencari jurnal spesifik
  • Filter berdasarkan Scopus, SINTA, atau Garuda indexing
  • Klik jurnal untuk melihat detail dan aksi:
    • Kunjungi Website - Buka website jurnal
    • Profil SINTA - Lihat profil di portal SINTA
    • Bagikan - Share jurnal via native sharing atau clipboard

2. Analisis & Visualisasi

# Navigate ke halaman Visualisasi
/visualisasi
  • Overview Dashboard - Statistik umum
  • Chart Navigation - Pilih jenis analisis:
    • Akreditasi SINTA
    • Bidang Subjek
    • Impact Factor
    • Status Pengindeksan
    • Top Institutions
  • Filters - Gunakan search dan filter akreditasi
  • Export Data - Download hasil analisis

3. Tutorial Scraping

# Navigate ke halaman Tutorial
/tutorial
  • Overview - Pengenalan web scraping
  • Installation - Setup environment
  • Code Examples - Implementasi scraper
  • Ethics - Guidelines untuk scraping yang bertanggung jawab

4. Kalkulator Tools

# Navigate ke halaman Kalkulator
/kalkulasi
  • Subscribe untuk notifikasi launch
  • Preview fitur yang akan datang

📁 Struktur Project

opensinta/
├── public/                     # Static assets
│   ├── opensinta.png          # Logo aplikasi
│   ├── sinta_journals.json    # Main dataset
│   ├── sinta1.json           # S1 accredited journals
│   ├── sinta2.json           # S2 accredited journals
│   ├── sinta3.json           # S3 accredited journals
│   ├── sinta4.json           # S4 accredited journals
│   ├── sinta5.json           # S5 accredited journals
│   └── sinta6.json           # S6 accredited journals
├── src/
│   ├── components/            # React components
│   │   ├── Home.jsx          # Main dashboard
│   │   ├── Visualisasi.jsx   # Data visualization
│   │   ├── Tutorial.jsx      # Scraping tutorial
│   │   ├── Kalkulasi.jsx     # Calculator tools
│   │   ├── Navbar.jsx        # Navigation component
│   │   └── Footer.jsx        # Footer component
│   ├── App.jsx               # Main app component
│   ├── main.jsx             # Entry point
│   └── index.css            # Global styles
├── index.html               # HTML template
├── package.json            # Dependencies & scripts
├── vite.config.js         # Vite configuration
├── tailwind.config.js     # Tailwind CSS config
├── postcss.config.js      # PostCSS config
└── README.md              # Documentation

🧩 Komponen

Home.jsx - Dashboard Utama

// Core components
├── HeroSection          # Search & filters
├── QuickStats          # Real-time statistics
├── JournalList         # Featured journals with pagination
├── JournalCard         # Individual journal display
├── Pagination          # Page navigation
└── Sidebar             # Trending topics & categories

Key Features:

  • Real-time Subject Analysis dari JSON data
  • Interactive Search dengan multiple filters
  • Dynamic Trending Topics berdasarkan Subject Area
  • Kategori Populer dengan distribusi actual

Visualisasi.jsx - Data Analytics

// Chart components
├── Overview Dashboard   # Summary statistics
├── Accreditation Chart # SINTA level distribution
├── Subject Analysis    # Subject area breakdown
├── Impact Scatter      # Impact factor analysis
├── Indexing Status     # Scopus/Garuda indexing
├── Institution Ranking # Top institutions
└── Data Table         # Paginated data view

Key Features:

  • Multiple Chart Types: Bar, Pie, Scatter, Line
  • Interactive Filters: Real-time data filtering
  • Export Functionality: JSON/CSV download
  • Responsive Design: Mobile-friendly charts

Tutorial.jsx - Learning Platform

// Tutorial sections
├── Overview            # Introduction to scraping
├── Installation       # Environment setup
├── Code Examples      # Practical implementation
└── Ethics             # Responsible scraping

Key Features:

  • Copy-to-clipboard code examples
  • Step-by-step guides
  • Best practices untuk ethical scraping
  • Error handling strategies

Kalkulasi.jsx - Future Tools

// Calculator features (planned)
├── Impact Predictor    # Predict journal impact
├── Citation Calculator # Citation analysis
├── Ranking Tool       # Journal evaluation
└── Performance Analyzer # Research metrics

📊 Data Sources

Structure Dataset

{
  "Nama Jurnal": "string",
  "Profile URL": "string",
  "Google Scholar URL": "string",
  "Website URL": "string",
  "Editor URL": "string",
  "P-ISSN": "string",
  "E-ISSN": "string",
  "Subject Area": "string",
  "Afiliasi": "string",
  "Akreditasi Sinta": "string",
  "Scopus Indexed": "Yes/No",
  "Garuda Indexed": "Yes/No",
  "Impact": "number",
  "H5-index": "number",
  "Citations 5yr": "string",
  "Citations": "string"
}

Data Processing

  • Validation: isValidValue() dan getDisplayValue() helpers
  • Filtering: Multi-criteria filtering system
  • Sorting: Impact factor, name, SINTA level
  • Analytics: Real-time statistics calculation
  • Export: JSON dan CSV format

🤝 Kontribusi

Kontribusi sangat diterima! Silakan ikuti langkah berikut:

1. Fork Repository

# Fork via GitHub UI atau
gh repo fork firdausmntp/opensinta

2. Create Feature Branch

git checkout -b feature/amazing-feature

3. Commit Changes

git commit -m "feat: add amazing feature"

4. Push & Pull Request

git push origin feature/amazing-feature
# Create PR via GitHub UI

Contribution Guidelines

  • Follow existing code style
  • Add proper documentation
  • Include tests if applicable
  • Update README if needed

🗺️ Roadmap

Phase 1: Foundation

  • Basic dashboard dan visualization
  • Data processing dan filtering
  • Responsive design
  • Tutorial section

Phase 2: Calculator Tools 📋

  • Impact Factor Predictor
  • Citation Calculator
  • Journal Ranking Tool
  • Research Performance Analyzer

📄 License

Distributed under the MIT License. See LICENSE for more information.


🙏 Acknowledgments

  • SINTA (Science and Technology Index) untuk data publikasi
  • Kemenristekdikti untuk platform SINTA
  • Open Source Community untuk tools dan libraries
  • Contributors yang telah berkontribusi

📞 Contact

Firdausmntp

Project Link: https://github.com/firdausmntp/opensinta


Built with ❤️ by firdausmntp

About

🎓 Platform visualisasi data SINTA Indonesia untuk pembelajaran web development & data visualization dengan React.js

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published