A modern web application for finding and comparing Form 6 (STPM) schools in Malaysia. CariSTPM helps students, parents, and educators make informed decisions about their educational journey.
All school and subject package data is scraped from the official MOE Form 6 Central Information System (SST6).
The scraper collects comprehensive information about:
- Schools across all states in Malaysia
- Available subject packages for each semester
- Core and elective subjects for both Science and Arts streams
Each record contains:
- State (Negeri)
- District (PPD)
- School/Center (Pusat)
- Semester (1 or 3)
- Stream (Bidang)
- Subject Package
- School Search & Filtering: Find schools by name, location, and available streams
- Comprehensive Comparison: Compare up to 4 schools side-by-side
- Multilingual Support: Available in English and Bahasa Malaysia
- Smart Filtering: Filter schools by states, subjects, and streams
- Modern UI: Beautiful, responsive design with dark mode support
- AI-Powered Guidance: Get personalized answers about entry requirements and eligibility
- Framework: Next.js 14 with App Router and Server Components
- Language: TypeScript
- Database: Supabase
- Styling:
- Tailwind CSS for utility-first styling
- Shadcn UI for beautiful, accessible components
- Framer Motion for smooth animations
- State Management:
- React Context for app-wide state
- nuqs for URL search params
- Form Handling: React Hook Form with Zod validation
- UI Components: Radix UI for accessible primitives
- Node.js 18+
- pnpm (recommended) or npm
- Git
- Clone the repository:
git clone https://github.com/yourusername/CariSTPM.git
cd CariSTPM- Install dependencies:
pnpm install
# or
npm install- Create a
.env.localfile in the root directory:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key- Start the development server:
pnpm dev
# or
npm run dev- Open http://localhost:3000 in your browser.
src/
├── app/ # Next.js app router pages
├── components/ # Reusable React components
│ ├── ui/ # Shadcn UI components
│ └── layout/ # Layout components
├── context/ # React Context providers
│ ├── language-context # Multilingual support
│ └── comparison-context # School comparison state
└── lib/ # Utilities and configurations
└── supabase/ # Database client and queries
We welcome contributions! Here's how you can help:
- Fork the repository
- Create your feature branch:
git checkout -b feature/AmazingFeature-
Follow our coding standards:
- Use TypeScript for all new code
- Follow functional programming patterns
- Write descriptive commit messages using conventional commits
- Ensure responsive design with Tailwind CSS
- Optimize for performance using React Server Components when possible
- Add bilingual support for all user-facing text
-
Commit your changes:
git commit -m "feat: Add amazing feature"- Push to your branch:
git push origin feature/AmazingFeature- Open a Pull Request
- Use conventional commits format
- Start with type:
feat,fix,docs,style,refactor,test,chore - Keep subject line under 50 characters
- Use imperative mood ("Add feature" not "Added feature")
- Wrap body at 72 characters
- Separate subject from body with blank line
Example:
feat(search): Add advanced filtering options
- Implement state-based filtering
- Add subject stream filters
- Support multiple filter combinations
This project is licensed under the MIT License - see the LICENSE file for details.