This is a Next.js project bootstrapped with create-next-app.

A modern, full-stack web application featuring interactive data visualizations, community polls, and real-time news aggregation for Malaysia.

• Interactive Malaysia map with state-level data
• Multiple data categories (income, population, crime, water consumption, expenditure)
• Beautiful charts powered by Recharts
• State selector with search functionality
• Responsive design for all devices

• Create and vote on community polls
• Real-time results with state breakdown
• Gamification system (points, XP, levels)
• User authentication with Clerk
• Poll translation support (EN/MS)
• Visual poll results with charts

• Real-time RSS/XML feed parsing
• 8+ news sources (Malaysian & International)
  • Malaysian: The Star, Bernama, Malaysiakini, NST, Malay Mail
  • International: BBC, Reuters, Al Jazeera
• Featured breaking news section
• Source filtering
• Beautiful card-based layout
• Refresh on demand
• See NEWS_FEATURE.md for detailed documentation

• Full bilingual support (English/Bahasa Malaysia)
• Google Translate API integration
• Language toggle in UI
• Automatic content translation

• Dark mode / Light mode toggle
• Smooth transitions
• System preference detection
• Persistent user preference

• Responsive design
• Mobile bottom navigation
• Touch-friendly interactions
• PWA-ready architecture

• Node.js 18+
• npm, yarn, pnpm, or bun

1. Clone the repository:

git clone https://github.com/yourusername/mypeta.git
cd mypeta

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env.local file in the root directory:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
# Google Translate (Optional)
NEXT_PUBLIC_GOOGLE_TRANSLATE_API_KEY=your_google_translate_key

4. Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

npm run build
npm start

mypeta/
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── NewsCard.tsx # News article card
│ ├── FeaturedNews.tsx # Featured news hero
│ └── ...
├── contexts/ # React context providers
│ ├── DataContext.tsx
│ ├── LanguageContext.tsx
│ └── ThemeContext.tsx
├── pages/ # Next.js pages
│ ├── api/ # API routes
│ │ └── news/ # News API endpoints
│ ├── index.tsx # Home (data viz)
│ ├── polls/ # Polls page
│ └── news/ # News page
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── data/ # Static data
├── public/ # Static assets
└── styles/ # Global styles

• Framework: Next.js 16 (React 19)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animations: Framer Motion
• Charts: Recharts
• Icons: Lucide React

• API: Next.js API Routes
• Database: Supabase (PostgreSQL)
• Authentication: Clerk
• RSS Parsing: xml2js

• Hosting: Vercel
• CDN: Vercel Edge Network
• Analytics: (Ready to integrate)

• / - Home page with data visualization
• /polls - Community polls
• /news - News aggregation
• /profile - User profile & stats
• /privacy - Privacy policy
• /terms - Terms of service

GET /api/news/fetch?sources=thestar,bbc,reuters

Returns aggregated news from selected sources. See NEWS_FEATURE.md for details.

• Auth endpoints for user management
• Vote submission and retrieval
• Stats calculation

• NEWS_FEATURE.md - News feature documentation

• TRANSLATION_GUIDE.md - Translation system guide

• Next.js Documentation - Next.js features and API

• Learn Next.js - Interactive Next.js tutorial

• Tailwind CSS - Utility-first CSS framework

• Framer Motion - Animation library

• shadcn/ui - Re-usable components

Contributions are welcome! Please feel free to submit a Pull Request.

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

This project is open source and available under the MIT License.

• Data sources from Malaysian government open data
• News sources: The Star, Bernama, BBC, Reuters, Al Jazeera, and more
• UI components from shadcn/ui
• Icons from Lucide React
• Maps and visualizations built with love for Malaysia

For questions or feedback, please open an issue on GitHub.

Built with ❤️ for Malaysia

You can check out the Next.js GitHub repository - feedback and contributions are welcome!