A smart education resource navigator for Malaysian B40, M40 & T20 communities
EduLaluan (Education Path) helps Malaysian families discover scholarships, free courses, vocational training, and financial aid programs tailored to their income bracket and educational goals.
π Built for Krackathon - Category: Best Practical Use
- π― Smart Navigator: Answer simple questions to get personalized resource recommendations
- π Advanced Filtering: Search and filter by category, income group, cost, and education level
- π Comprehensive Database: 146+ curated educational resources including:
- 77 Malaysian government boarding schools (SBP/Sekolah Berasrama Penuh)
- Government scholarships (PTPTN, PTPK, MARA, JPA, Khazanah, Petronas)
- Free online courses (edX, Coursera, MIT OCW, CS50, Code.org)
- Digital skills training (freeCodeCamp, 42 Penang, KrackedDevs)
- Financial aid programs
- TVET and vocational training
- Elite boarding schools (Eton, Le Rosey, Phillips Exeter, MCKK)
- Top universities (Oxford, Stanford, ETH Zurich)
- π Education Level Filtering: Resources tagged by Malaysian education system (Primary, Secondary, Post-Secondary, Tertiary)
- π° Income-Specific: Resources tagged for B40, M40, and T20 households
- π Multi-Language: Support for English and Bahasa Malaysia content
- π± Mobile-First: Fully responsive design for all devices
- β‘ Lightning Fast: Static-first architecture with React islands
- Framework: Astro 5.x - Static-first, islands architecture
- UI Library: React 18 - Interactive components as Astro islands
- Styling: Tailwind CSS 4 - Utility-first CSS
- Components: shadcn/ui - Beautiful, accessible components
- Data: Astro Content Collections with JSON files
- Deployment: Netlify - Free static hosting
- Language: TypeScript - Type-safe development
- Node.js 18+ and npm
- Clone the repository:
git clone https://github.com/pizofreude/edulaluan.git
cd edulaluan- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser to
http://localhost:4321
npm run buildThe built site will be in the dist/ directory.
npm run previewedulaluan/
βββ public/ # Static assets
β βββ favicon.svg
βββ src/
β βββ components/ # Astro & React components
β β βββ ui/ # shadcn/ui components
β β βββ Header.astro
β β βββ Footer.astro
β β βββ Hero.astro
β β βββ Navigator.tsx # Multi-step wizard
β β βββ ResourceCard.tsx # Resource display
β β βββ FilterBar.tsx # Filtering interface
β βββ content/
β β βββ config.ts # Content collection schema
β β βββ resources/ # 40+ JSON resource files
β βββ layouts/
β β βββ Layout.astro # Base HTML layout
β βββ lib/
β β βββ utils.ts # Utility functions
β βββ pages/
β β βββ index.astro # Landing page
β β βββ navigate.astro # Navigator page
β β βββ resources.astro # All resources
β β βββ about.astro # About page
β βββ styles/
β βββ global.css # Global styles + Tailwind
βββ astro.config.mjs # Astro configuration
βββ tailwind.config.mjs # Tailwind configuration
βββ tsconfig.json # TypeScript configuration
βββ package.json
Resources are stored as JSON files in src/content/resources/. To add a new resource:
- Create a new
.jsonfile insrc/content/resources/ - Follow the schema:
{
"name": "Resource Name",
"provider": "Provider Organization",
"description": "Brief description of the resource",
"url": "https://example.com",
"category": "scholarship",
"incomeGroups": ["B40", "M40"],
"cost": "free",
"mode": "online",
"language": ["en", "ms"],
"tags": ["tag1", "tag2"],
"featured": false,
"educationLevel": ["secondary", "tertiary"]
}Categories: scholarship, mooc, tvet, financial-aid, digital-skills, degree, secondary-education, elite-institutions, community, other
Income Groups: B40 (< RM4,850), M40 (RM4,850-10,970), T20 (> RM10,970)
Cost: free, subsidized, paid
Mode: online, in-person, hybrid
Languages: en, ms, zh, ta
Education Levels (optional): primary (Std 1-6), secondary (Form 1-5/SPM), post-secondary (STPM/Diploma), tertiary (Degree+), all-levels
- The resource will automatically appear on the site after rebuilding
- Primary Color: Teal (#0d9488) - Represents growth and education
- Accent Color: Amber/Gold (#d97706) - Malaysian-inspired warmth
- Typography: Inter font family
- Components: Built with shadcn/ui for consistency and accessibility
- B40 (Bottom 40%): Household income < RM4,850/month
- M40 (Middle 40%): Household income RM4,850 - RM10,970/month
- T20 (Top 20%): Household income > RM10,970/month
We welcome contributions! Here's how you can help:
- Add Resources: Submit new educational resources via pull request
- Improve UI/UX: Enhance the design or user experience
- Fix Bugs: Report or fix issues
- Translate: Help translate content to reach more Malaysians
- Share: Spread the word about EduLaluan
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Test locally:
npm run dev - Commit:
git commit -m 'Add amazing feature' - Push:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
- Built for Krackathon hackathon
- Developed with assistance from GitHub Copilot
- Inspired by the need to democratize access to education in Malaysia
- Community resources curated from government agencies, NGOs, and educational platforms
- GitHub: @pizofreude
- Form: EduLaluan Forms
EduLaluan is an independent community project not officially affiliated with any government agency or organization. Information is provided for educational purposes. Always verify details with official sources before applying.
Built with β€οΈ for Malaysian communities π²πΎ