Sistem Informasi Magang

by TwentyOne Team

Front-end website for the Internship Information System at Kelurahan Pulo Gebang.

---

📚 Language: English | Bahasa Indonesia

---

📋 Table of Contents

• 📖 About
• ✨ Features
• 🛠️ Tech Stack
• 🏗️ System Architecture
• 🚀 Getting Started
  • 🔎 Prerequisites
  • 💾 Installation
  • 💻 Running Locally
• 📂 Project Structure
• 🖼️ Screenshots
• 📚 Documentation
• 🤝 Contributing
• ⚖️ License
• 🙏 Acknowledgements

---

📖 About

magang-pulogebang-vite is a modern front-end application designed for the Internship Information System (Sistem Informasi Magang) of Kelurahan Pulo Gebang. Built with TypeScript and Vite, this project offers a fast and smooth development experience for both contributors and users. The system helps candidates easily register and track their internship applications in Kelurahan Pulo Gebang.

---

✨ Features

• User-friendly registration and application process
• Responsive UI design for mobile and desktop
• Dashboard for applicants to monitor their application status
• Integrated chatbot for instant support and information

---

🛠️ Tech Stack

Frontend:

• TypeScript (TSX) (v5.9.3)
• Vite (v7.2.4)
• React (v18.3.1)
• TailwindCSS (v4.1.17)

Backend:

• Express.js (Node.js)
• PostgreSQL (Database)
• Gemini AI (Chatbot)

For in-depth backend documentation, see Backend README.

---

🏗️ System Architecture

┌─────────────────────────────────────────────────────┐
│         FRONTEND (Vite + React + TypeScript)        │
│  - User Registration & Login                         │
│  - Application Dashboard                             │
│  - Chatbot Integration                               │
│  - Port: http://localhost:5173                       │
└──────────────────────┬──────────────────────────────┘
                       │ API Calls (JSON)
                       │
┌──────────────────────▼──────────────────────────────┐
│         BACKEND (Express.js + PostgreSQL)           │
│  - Authentication & Authorization                    │
│  - Application Management                            │
│  - Gemini AI Chatbot                                 │
│  - Port: http://localhost:3001                       │
└──────────────────────┬──────────────────────────────┘
                       │
        ┌──────────────┼──────────────┐
        │              │              │
    ┌───▼──┐    ┌─────▼─────┐   ┌────▼────┐
    │  DB  │    │ Gemini AI │   │  Email  │
    │ (PG) │    │    API    │   │ Service │
    └──────┘    └───────────┘   └─────────┘

---

🚀 Getting Started

Follow these instructions to set up the project locally.

🔎 Prerequisites

• Node.js (v16 or later recommended)
• npm or Yarn
• PostgreSQL (for backend)

💾 Installation

1. Clone Repository:

git clone https://github.com/TwentyOneTeam/magang-pulogebang-vite.git
cd magang-pulogebang-vite

2. Install Frontend Dependencies:

npm install
# or
yarn install

3. Setup Backend (see Backend README):

cd backend
npm install
cp .env.example .env
# Edit .env with your configuration
npm run init-db

💻 Running Locally

Terminal 1 - Backend:

cd backend
npm run dev
# Backend server: http://localhost:3001

Terminal 2 - Frontend:

npm run dev
# Open browser: http://localhost:3000

📦 Building for Production

npm run build
# or
yarn build

The optimized build output will be in the dist/ folder.

---

📂 Project Structure

magang-pulogebang-vite/
├── src/                          # Frontend code
│   ├── components/               # React components
│   ├── services/                 # API services
│   ├── styles/                   # Global styles
│   ├── App.tsx                   # Root component
│   └── main.tsx                  # Entry point
├── backend/                      # Backend code
│   ├── config/                   # Configuration
│   ├── controllers/              # Business logic
│   ├── middleware/               # Express middleware
│   ├── models/                   # Database models
│   ├── routes/                   # API routes
│   ├── uploads/                  # File uploads
│   └── server.js                 # Entry point
├── public/                       # Static assets
├── README.md                     # Documentation (English)
├── README.id.md                  # Documentation (Indonesian)
├── vite.config.ts                # Vite configuration
├── tsconfig.json                 # TypeScript configuration
└── package.json                  # Dependencies

---

📚 Documentation

• Backend Documentation - API setup, database configuration, deployment guide
• Backend Dokumentasi (ID) - Dokumentasi backend dalam Bahasa Indonesia

---

🖼️ Screenshots

---

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork this repository
2. Create a new branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

---

⚖️ License

This project is licensed under the MIT License. See LICENSE for more information.

---

🙏 Acknowledgements

• Vite
• TypeScript
• React
• TailwindCSS
• And all contributors who help improve this project.

Made with ❤️ by the TwentyOne Team!