A modern, responsive website showcasing the rich cultural heritage and tourism potential of Ketindan Village, Lawang, Malang Regency, East Java, Indonesia.
Cerita Ketindan is a comprehensive digital platform that presents the historical legacy, cultural artifacts, tourism destinations, and local businesses of Ketindan Village. The website features an immersive user experience with interactive elements, virtual tours, and detailed information about the village's heritage.
- Hero Slider: Interactive 3D carousel showcasing village highlights
- Village History: Comprehensive historical timeline and narratives
- Cultural Heritage: Detailed catalog of historical artifacts and relics
- Tourism Destinations: Interactive guide to local attractions
- Local Businesses (UMKM): Showcase of village enterprises and products
- Virtual Tour: 360° immersive experience of the village
- Responsive Design: Optimized for all device sizes
- Traditional Aesthetics: Batik-inspired patterns and ornamental designs
- Smooth Animations: CSS-based transitions and micro-interactions
- Accessibility: WCAG-compliant design principles
- Performance Optimized: Fast loading times and efficient asset management
- Launch Countdown: Animated countdown timer for website launch
- Launch Transition: Smooth animated transition from countdown to main site
- Dynamic Routing: React Router-based navigation with slug-based detail pages
- SEO Optimized: Meta tags and structured data for search engines
- Analytics Integration: Built-in analytics tracking
- React
- TypeScript
- Tailwind CSS
- React Router
- Vite
- Noto Serif - Primary serif font for headings
- Noto Serif Display - Display font for titles
- Plus Jakarta Sans - Sans-serif font for body text
- SVG Icons - Scalable vector graphics
- Optimized Images - WebP and JPEG formats
- Custom Ornaments - Traditional Javanese design elements
src/
├── components/
│ ├── Card.tsx
│ ├── Navbar.tsx
│ ├── Footer.tsx
│ ├── HeroSlider.tsx
│ ├── SectionTitle.tsx
│ ├── LaunchTransition.tsx
│ └── ...
├── pages/
│ ├── Home.tsx
│ ├── CountdownPage.tsx
│ ├── DetailPage.tsx
│ └── ...
├── data/
│ ├── sliderData.ts
│ ├── wisataData.ts
│ ├── peninggalanData.ts
│ └── UMKMData.ts
├── assets/
│ ├── images/
│ └── ornaments/
├── hooks/
├── config/
└── routes/
- Node.js (v18 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/AiFahri/cerita-ketindan.git cd cerita-ketindan -
Install dependencies
npm install # or yarn install -
Start development server
npm run dev # or yarn dev -
Open in browser Navigate to
http://localhost:5173
npm run build
# or
yarn buildThe built files will be in the dist/ directory.
The project is configured for deployment on various platforms:
- Vercel: Zero-config deployment
- Netlify: Continuous deployment from Git
- GitHub Pages: Static site hosting
- Traditional Hosting: Upload
dist/folder contents
- Mobile: 320px - 768px
- Tablet: 768px - 1024px
- Desktop: 1024px+
Edit src/config/countdown.ts to customize launch settings:
export const COUNTDOWN_CONFIG = {
LAUNCH_DATE: "2025-06-28T10:03:30",
REDIRECT: {
onComplete: "/",
autoRedirect: true,
},
CONTACT: {
phone: "Ketindan, Lawang, Kabupaten Malang",
instagram: "@pakdesadewa.berbakti",
copyright: "© 2025 Cerita Ketindan",
},
};Update content in the src/data/ directory:
sliderData.ts- Hero slider content and navigation itemswisataData.ts- Tourism destinations with images and descriptionspeninggalanData.ts- Cultural artifacts and historical itemssejarahData.ts- historical information of villageUMKMData.ts- Local businesses and products
The website includes a 360° virtual tour powered by Panoee:
// Virtual tour URL in VirtualTourSection.tsx
const VIRTUAL_TOUR_URL = "https://tour.panoee.net/685eb7a5329df6da384a5c61";/- Main homepage with all sections/countdown- Launch countdown page/demo- Launch transition demo/wisata/:slug- Tourism destination details/peninggalan/:slug- Cultural artifact details/umkm/:slug- Local business details
- Tourism Destinations: Add entries to
src/data/wisataData.ts - Cultural Artifacts: Add entries to
src/data/peninggalanData.ts - Local Businesses: Add entries to
src/data/UMKMData.ts - Hero Slides: Update
src/data/sliderData.ts
- Colors: Modify Tailwind config or CSS custom properties
- Fonts: Update font imports in
index.html - Ornaments: Replace SVG files in
src/assets/
- Lazy Loading: Images and components load on demand
- Code Splitting: Route-based code splitting with React Router
- Asset Optimization: Vite handles asset bundling and optimization
- Responsive Images: Multiple image formats and sizes
- Caching: Browser caching for static assets
- Google Analytics: Integrated tracking (configure in Analytics component)
- Meta Tags: Dynamic meta tags for each page
- Open Graph: Social media sharing optimization
- Structured Data: JSON-LD for search engines
- Sitemap: Auto-generated sitemap for SEO
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Maintain responsive design principles
- Write meaningful commit messages
- Test on multiple devices and browsers
Build Errors
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm installPort Already in Use
# Use different port
npm run dev -- --port 3001Image Loading Issues
- Ensure images are in
src/assets/ - Check file paths and extensions
- Verify image optimization settings
Developed by Tim Sadewa UB - Bakti BCA Awardee
- Live Demo: https://cerita-ketindan.vercel.app
- Virtual Tour: https://tour.panoee.net/685eb7a5329df6da384a5c61
- Repository: https://github.com/AiFahri/cerita-ketindan
© 2025 Cerita Ketindan. Preserving heritage, embracing the future.