Museum of Black Civilizations Digital Platform is an innovative web application developed during an intensive 5-day hackathon organized by the Musée des Civilisations Noires in Dakar, Senegal. This project showcases the power of technology to preserve and share African cultural heritage through immersive digital experiences.
Transform the museum experience into a comprehensive digital platform featuring:
- 🖼️ Artwork Catalog - Complete collection browsing
- 🌍 Multilingual Support - French, English, and Wolof
- 📱 QR Code Scanner - Instant artwork information access
- 🔄 360° Virtual Tours - Immersive room exploration
- 🎨 3D Exhibitions - Interactive 3D artwork modeling
https://hackathon-musee.vercel.app
- 3 Languages Support: French, English, and Wolof
- Dynamic language switching
- Complete translation coverage
- Cultural accessibility
- Comprehensive artwork catalog
- High-resolution images with zoom
- Detailed descriptions and history
- Artist information and context
- Audio guides in multiple languages
- Instant artwork recognition
- Scan physical QR codes at the museum
- Direct access to detailed information
- Seamless mobile experience
- Manual code entry option
- Immersive room-by-room navigation
- Panoramic view exploration
- Interactive hotspots
- Full-screen mode
- Mobile-responsive design
- Interactive 3D artwork modeling
- Advanced visualization
- Rotate and zoom capabilities
- Detailed texture rendering
- Professional narrations
- Multi-language audio support
- Contextual artwork explanations
- Cultural storytelling
- Timeline visualization
- Historical milestones
- Founding story
- Cultural significance
- Next.js 14.2.16 - Server-side rendering & routing
- TypeScript - Type-safe development
- React 18 - Component architecture
- Tailwind CSS - Utility-first styling
- Radix UI - Accessible component primitives
- Framer Motion - Smooth animations
- Geist Font - Modern typography
- shadcn/ui - Beautiful UI components
- MongoDB - Document database
- Mongoose - ODM for data modeling
- Next.js API Routes - Serverless functions
- Framer Motion - Animation library
- Lenis - Smooth scroll
- GSAP - Advanced animations
- Embla Carousel - Touch-friendly carousels
- QR Code Generation - qrcode library
- React Hook Form - Form management
- Zod - Schema validation
- date-fns - Date manipulation
- Vercel - Deployment & hosting
- ESLint - Code quality
- PostCSS - CSS processing
- Autoprefixer - CSS compatibility
- Node.js 18+
- npm or yarn
- MongoDB connection (optional for local development)
# Clone the repository
git clone https://github.com/Ftk-keit/hackathon-musee.git
cd hackathon-musee
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your MongoDB URI
# Run database seeds (optional)
npm run seed:all
# Start development server
npm run devnpm run dev # Start development server (port 3000)
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run seed # Seed artworks
npm run seed:exhibitions # Seed exhibitions
npm run seed:all # Seed all dataOpen http://localhost:3000 in your browser
hackathon-musee/
├── app/ # Next.js app directory
│ ├── (home)/ # Home page routes
│ ├── api/ # API routes
│ │ └── artworks/ # Artwork endpoints
│ ├── admin/ # Admin dashboard
│ ├── exhibition/ # Exhibition pages
│ ├── virtual-tour/ # 360° tour
│ ├── scanner/ # QR scanner
│ └── histoire/ # Museum history
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── QRLauncher.tsx # QR scanner component
│ └── LanguageSwitcher.tsx # Language selector
├── lib/ # Utilities & configs
│ ├── i18n.ts # Internationalization
│ ├── translations.ts # Translation strings
│ ├── mongodb.ts # Database connection
│ └── artwork-data.ts # Static data
├── models/ # Mongoose models
│ └── Artwork.ts # Artwork schema
├── scripts/ # Database scripts
│ ├── seed.ts # Seed artworks
│ └── seed-exhibitions.ts # Seed exhibitions
└── public/ # Static assets
└── audio/ # Audio guides
| Route | Description |
|---|---|
/ |
Home page with hero and features |
/exhibition/[slug] |
Exhibition collections |
/exhibition/[slug]/artwork/[id] |
Individual artwork details |
/virtual-tour |
360° immersive tour |
/scanner |
QR code scanner |
/histoire |
Museum history timeline |
/admin |
Admin dashboard |
/api/artworks |
Artwork API endpoint |
✅ Next.js 14 - App router, server components, API routes
✅ TypeScript - Advanced type safety and interfaces
✅ React Patterns - Hooks, context, composition
✅ Responsive Design - Mobile-first approach
✅ Performance Optimization - Image optimization, lazy loading
✅ Modern Design - Clean, elegant interfaces
✅ Animations - Smooth transitions and interactions
✅ Accessibility - WCAG compliance
✅ Multilingual UX - Cultural adaptation
✅ MongoDB Integration - Document modeling
✅ Mongoose ODM - Schema design
✅ RESTful APIs - CRUD operations
✅ Data Seeding - Database initialization
✅ QR Code Technology - Generation and scanning
✅ Audio Integration - Multi-language narrations
✅ 3D Visualization - Interactive models
✅ Virtual Tours - 360° panoramic views
✅ i18n Implementation - Complete translation system
✅ Dynamic Language Switching - Runtime language changes
✅ Cultural Localization - Wolof, French, English
✅ Vercel Deployment - Continuous deployment
✅ Environment Configuration - Secure secrets management
✅ Performance Monitoring - Analytics integration
✅ Rapid Development - 5-day delivery
✅ Team Collaboration - Git workflow
✅ Agile Methodology - Sprint-based development
✅ Time Management - Tight deadline execution
- ✅ Duration: 5 days intensive development
- ✅ Team: Collaborative effort
- ✅ Deliverable: Fully functional web application
- ✅ Deployment: Live production site
- ✅ Features: All requirements implemented
- Cultural Preservation - Digital heritage conservation
- Accessibility - Multi-language support including Wolof
- Technology Integration - QR codes, 3D, 360° tours
- User Experience - Intuitive and immersive interface
- Scalability - MongoDB-based architecture
This project serves as a bridge between:
- Tradition & Technology - Preserving heritage digitally
- Local & Global - Making African art accessible worldwide
- Education & Entertainment - Engaging learning experiences
- Past & Future - Modern platform for ancient civilizations
- Performance Score: 95+ (Lighthouse)
- Accessibility: WCAG AA compliant
- Mobile Responsive: 100%
- Languages Supported: 3 (FR, EN, WO)
- Artworks Cataloged: 50+
- Audio Guides: Multiple per artwork
Organized by: Museum of Black Civilizations, Dakar
Development Team: Hackathon Participants
Duration: 5 Days
Location: Dakar, Senegal
This project was developed for educational purposes during the Museum of Black Civilizations Hackathon.
- Live Demo: hackathon-musee.vercel.app
- Repository: github.com/Ftk-keit/hackathon-musee
- Museum: Museum of Black Civilizations, Dakar
🏛️ Built with passion during the 5-day Museum Hackathon - Preserving African Heritage Through Technology