Skip to main content

Teman Kuliah

📖 Table of Contents​

  1. Introduction
  2. System Architecture
  3. Core Technologies
  4. Project Setup
  5. 🔐 Environment Variables
  6. 📁 Project Structure
  7. 🔑 Authentication
  8. 🌐 API Integration
  9. ✨ Key Features & Modules
  10. 📊 System Diagrams
  11. 🔧 Development Notes
  12. 🤝 Contributing
  13. 📜 License

Introduction​

UlasKelas is a comprehensive course review and academic feedback platform consisting of two main components:

Frontend​

A modern web application built with Next.js that provides an intuitive interface for course reviews and academic feedback.

Backend​

A Django-based REST API service that powers the UlasKelas platform, providing robust backend infrastructure for managing course reviews, user content, and media storage integration.

System Architecture​

The platform follows a microservices architecture with the following components:

  1. Frontend Client: Next.js application serving the user interface
  2. Backend API: Django REST Framework service handling business logic
  3. Database: PostgreSQL for data persistence
  4. Translation Service: Multilingual content support via Django Parler

Core Technologies​

Frontend​

  • Framework: Next.js 13.3.4 with App Router
  • Language: TypeScript 5.0.4
  • Styling: Tailwind CSS 3.3.2
  • State Management: React Context + Hooks
  • UI Components:
    • Headless UI
    • Hero Icons
    • Framer Motion
  • HTTP Client: Axios

Backend​

  • Python 3.x
  • Django 4.2.1 - Web framework
  • Django REST Framework 3.14.0 - REST API development
  • Django Parler 2.3 - Multilingual content management
  • PostgreSQL - Database
  • Gunicorn - WSGI HTTP Server
  • Whitenoise - Static file serving

Project Setup​

Frontend Setup​

# Clone the repository
git clone [frontend-repository-url]
cd ulaskelas-fe

# Install dependencies using pnpm
pnpm install

# Set up environment variables
cp .env.example .env.local

# Start development server
pnpm dev

Backend Setup​

# Clone the repository
git clone [backend-repository-url]
cd ulaskelas-be

# Create and activate virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Set up environment variables
# Create .env file (see Environment Variables section)

# Run migrations
python manage.py migrate

# Start development server
python manage.py runserver

🔐 Environment Variables​

Frontend (.env.local)​

NEXT_PUBLIC_API_URL=your_api_url
NEXT_PUBLIC_BASE_URL=your_base_url

Backend (.env)​

DEBUG=True
SECRET_KEY=your-secret-key
DATABASE_URL=postgresql://user:password@localhost:5432/dbname
ALLOWED_HOSTS=localhost,127.0.0.1
CORS_ALLOWED_ORIGINS=http://localhost:3000

📁 Project Structure​

Frontend Structure​

src/
├── app/                # Next.js 13 App Router pages
├── components/         # Reusable React components
├── config/            # Configuration files
├── services/          # API services and data fetching
├── styles/            # Global styles and Tailwind config
└── middleware.ts      # Next.js middleware for auth & routing

Backend Structure​

ulaskelas-be/
├── app/                    # Main application directory
│   ├── article/           # Article management module
│   ├── migrations/        # Database migrations
│   ├── admin.py          # Admin interface configuration
│   ├── models.py         # Database models
│   ├── urls.py           # URL routing
│   └── views.py          # View logic
├── ulaskelas_be/         # Project configuration
│   ├── settings.py       # Project settings
│   ├── urls.py          # Main URL configuration
│   └── wsgi.py          # WSGI configuration
└── manage.py             # Django management script

🔑 Authentication​

🌐 API Integration​

Frontend Integration​

  • Axios-based HTTP client
  • Request/response interceptors
  • Token management
  • Error handling
  • Response caching

Backend API Endpoints​

  • GET /api/articles/ - List all articles
  • [Additional endpoints documented in API documentation]

✨ Key Features & Modules​

Frontend Features​

  1. Authentication Module

    • Login/Logout functionality
    • Protected routes
    • Session handling

  2. Course Review System

    • Course listings
    • Review submission
    • Rating system

  3. User Dashboard

    • Profile management
    • Review history
    • Recommendations

Backend Features​

  1. Content Management (CMS)

    • Article management system
    • Multilingual content support
    • Admin interface

  2. API Services

    • RESTful endpoints
    • Authentication
    • Data validation

📊 System Diagrams​

Database Schema​

Component Interaction​

🔧 Development Notes​

Code Style & Quality​

  • Frontend uses Prettier and ESLint
  • Backend uses Black formatter
  • TypeScript for type safety
  • Comprehensive testing setup

Performance Optimization​

  • Image optimization with Next.js
  • Static file serving with Whitenoise
  • API response caching
  • Database query optimization