Back
UKM PENRISTEK UT
nextjstypescripttailwindmdx
Source CodeLive Demo

UKM PENRISTEK UT Website

Next.js TypeScript TailwindCSS WordPress

A modern website for UKM PENRISTEK (Unit Kegiatan Mahasiswa Pendidikan, Riset, dan Teknologi) Universitas Terbuka built with Next.js, TypeScript, and WordPress as a headless CMS.

Developer

January Ramadhan

Features

  • šŸš€ Built with Next.js 15 and TypeScript
  • šŸŽØ Styled with Tailwind CSS and Shadcn/ui components
  • šŸ“± Fully responsive design
  • šŸŒ™ Dark/Light mode support
  • šŸ“Š Interactive charts and data visualization using Recharts
  • šŸ—ƒļø WordPress integration as headless CMS
  • šŸ” SEO optimized
  • āš” Fast page loads and optimized performance
  • šŸ“± Mobile-first approach

Key Sections

  • Homepage with organization overview
  • Program Kerja (Work Programs)
  • Profil UKM (Organization Profile)
  • Blog/News section
  • Documentation
  • Member and Management data visualization
  • Organizational structure

Tech Stack

  • Framework: Next.js 15
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Shadcn/ui
  • CMS: WordPress (Headless)
  • Charts: Recharts
  • Animations: Framer Motion
  • Analytics: Vercel Analytics
  • Icons: Lucide, Tabler Icons
  • Forms: React Hook Form
  • Deployment: Vercel

Getting Started

  1. Clone the repository:
git clone https://github.com/your-username/next-wp-ukmpenristek.git
  1. Install dependencies:
npm install
  1. Set up environment variables:
cp .env.example .env.local
  1. Run the development server:
npm run dev

Open http://localhost:3000 to view the site.

Project Structure

next-wp-ukmpenristek/
ā”œā”€ā”€ app/               # Next.js app router pages
ā”œā”€ā”€ components/        # React components
ā”‚   ā”œā”€ā”€ charts/       # Chart components
ā”‚   ā”œā”€ā”€ commons/      # Common components
ā”‚   ā”œā”€ā”€ layouts/      # Layout components
ā”‚   ā”œā”€ā”€ posts/        # Blog post components
ā”‚   ā”œā”€ā”€ sections/     # Page sections
ā”‚   ā”œā”€ā”€ theme/        # Theme components
ā”‚   ā””ā”€ā”€ ui/           # UI components
ā”œā”€ā”€ lib/              # Utility functions
ā”œā”€ā”€ public/           # Static assets
ā””ā”€ā”€ styles/           # Global styles

Acknowledgments

This project was initially based on the next-wp template and has been extensively customized and enhanced for UKM PENRISTEK UT's specific needs.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

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

  1. Fork the project
  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

Contact

January Ramadhan - januaryramadhan.github.io

Project Link: https://github.com/your-username/next-wp-ukmpenristek