A modern, interactive website showcasing the Data Science Lab's research, projects, and community at Daffodil International University.
🌐 Live Demo • 📚 Documentation • 🐛 Report Bug • ✨ Request Feature
The Data Science Lab website serves as the digital hub for Daffodil International University's Data Science community. Built with cutting-edge web technologies, it provides an engaging platform for students, researchers, and industry professionals to explore our lab's initiatives, projects, and educational resources.
Empowering the next generation of data scientists through innovative research, collaborative projects, and comprehensive educational programs.
- University & Lab Information - Comprehensive overview of our mission and achievements
- AI-Powered Chatbot (ROBO) - Intelligent assistant powered by Google Gemini API
- Interactive Hero Section - Dynamic animations and engaging user experience
- Latest Updates - Real-time news and announcements
- Project Portfolio - Showcase of ongoing and completed research projects
- Advanced Search & Filter - Find projects by technology, status, or category
- Detailed Project Views - In-depth information with live demos and source code
- Progress Tracking - Real-time status updates for ongoing developments
- Kaggle Integration - Direct access to competitions and datasets
- Competition Listings - Curated data science challenges
- Dataset Repository - Comprehensive collection of research datasets
- External Redirects - Seamless navigation to Kaggle platform
- Event Calendar - Upcoming workshops, seminars, and conferences
- News Feed - Latest developments in data science and lab activities
- Registration Integration - Direct links to event registration forms
- Archive System - Historical events and news articles
- Faculty Profiles - Detailed information about lab advisors and researchers
- Student Showcase - Highlighting talented team members and their contributions
- Research Interests - Areas of expertise and ongoing research focus
- Contact Information - Direct communication channels
- Interactive Contact Form - Powered by EmailJS for reliable message delivery
- Google Maps Integration - Easy location finding and directions
- Multiple Communication Channels - Email, phone, and social media links
- Office Hours - Availability and meeting scheduling information
- Club Information - Mission, activities, and membership details
- Club Events - Workshops, bootcamps, and training sessions
- Backend Integration - Real-time data from custom API
- Member Portal - Exclusive content and resources
- Next.js 15.3.4 - React framework with server-side rendering
- React 19.0.0 - Modern UI library with latest features
- TypeScript - Type-safe development environment
- Tailwind CSS 4.1.11 - Utility-first CSS framework
- Framer Motion 12.23.12 - Advanced animations and interactions
- Radix UI - Accessible component primitives
- Lucide React - Beautiful, customizable icons
- React Icons - Comprehensive icon library
- Google Gemini API - AI chatbot functionality
- Kaggle API - Contest and dataset integration
- EmailJS - Contact form email delivery
- Google Maps API - Location and mapping services
- Custom Backend API - Lab data management
- ESLint - Code quality and consistency
- PostCSS & Autoprefixer - CSS processing and optimization
- Vercel - Deployment and hosting platform
- Node.js 18.0 or higher
- npm or yarn package manager
- Git for version control
-
Clone the repository ```bash git clone https://github.com/your-username/ds-lab-frontend.git cd ds-lab-frontend ```
-
Install dependencies ```bash npm install
yarn install ```
-
Environment Setup ```bash cp .env.example .env.local ```
-
Configure environment variables ```env
NEXT_PUBLIC_API_URL=http://localhost:5000 NEXT_PUBLIC_BACKEND_URL=http://localhost:5000
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_maps_api_key
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
NEXT_PUBLIC_KAGGLE_API_KEY=your_kaggle_api_key ```
-
Start development server ```bash npm run dev
yarn dev ```
-
Open your browser Navigate to http://localhost:3000
``` ds-lab-frontend/ ├── 📁 app/ # Next.js App Router │ ├── 📁 (pages)/ # Page routes │ │ ├── page.tsx # Homepage │ │ ├── projects/ # Projects & Development │ │ ├── contests/ # Contests & Datasets │ │ ├── events/ # Events & News │ │ ├── team/ # Our Team │ │ ├── contact/ # Contact Page │ │ └── ds-club/ # DS Club │ ├── 📁 api/ # API routes │ ├── layout.tsx # Root layout │ └── globals.css # Global styles ├── 📁 components/ # Reusable components │ ├── 📁 ui/ # UI primitives │ ├── 📁 HomePage/ # Homepage components │ ├── 📁 ProjectsPage/ # Projects components │ ├── 📁 EventsPage/ # Events components │ ├── 📁 ContactPage/ # Contact components │ └── 📁 DSClubPage/ # DS Club components ├── 📁 lib/ # Utility functions ├── 📁 hooks/ # Custom React hooks ├── 📁 data/ # Static data files ├── 📁 public/ # Static assets │ ├── 📁 images/ # Image assets │ └── 📁 icons/ # Icon files ├── 📄 next.config.js # Next.js configuration ├── 📄 tailwind.config.js # Tailwind configuration ├── 📄 package.json # Dependencies └── 📄 README.md # Project documentation ```
- Primary: Blue (#3B82F6) - Trust and professionalism
- Secondary: Green (#10B981) - Growth and innovation
- Accent: Purple (#8B5CF6) - Creativity and technology
- Neutral: Gray scale for text and backgrounds
- Headings: Inter - Modern, readable sans-serif
- Body: System fonts - Optimized for performance
- Code: JetBrains Mono - Developer-friendly monospace
- Consistent spacing using Tailwind's scale
- Accessible color contrasts (WCAG AA compliant)
- Responsive design for all screen sizes
- Smooth animations and micro-interactions
```bash
npm run dev # Start development server npm run build # Build for production npm run start # Start production server npm run lint # Run ESLint checks
npm run export # Export static files npm run analyze # Bundle size analysis ```
- Connect your GitHub repository to Vercel
- Configure environment variables in Vercel dashboard
- Deploy automatically on every push to main branch
```bash npm run build npm run start ```
```bash npm run build npm run export ```
The frontend seamlessly integrates with our custom backend API for:
- Dynamic content management
- Real-time data updates
- User authentication
- File uploads and media management
- Google Gemini: AI chatbot responses
- Kaggle API: Competition and dataset data
- Google Maps: Location services
- EmailJS: Contact form submissions
- Mobile First: Optimized for mobile devices
- Tablet Support: Enhanced experience on tablets
- Desktop: Full-featured desktop interface
- Accessibility: WCAG 2.1 AA compliant
- Performance: Lighthouse score 95+
- Environment Variables: Secure API key management
- Input Validation: Client-side and server-side validation
- HTTPS Enforcement: Secure data transmission
- Content Security Policy: XSS protection
- Rate Limiting: API abuse prevention
We welcome contributions from the community! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
- Ensure responsive design compatibility
- Use TypeScript for type safety
- Follow React best practices
- Implement proper error handling
- Optimize for performance
- Maintain accessibility standards
- Lighthouse Score: 95+ across all categories
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- Time to Interactive: < 3.5s
```bash
rm -rf .next npm run build ```
- Ensure
.env.localexists - Restart development server
- Check variable naming (NEXT_PUBLIC_ prefix for client-side)
- Verify backend server is running
- Check CORS configuration
- Validate API endpoints
This project is licensed under the MIT License - see the LICENSE file for details.
- Daffodil International University - For supporting our research initiatives
- Data Science Lab Team - For their dedication and innovative contributions
- Open Source Community - For the amazing tools and libraries
- Students & Researchers - For their continuous feedback and engagement
- Email: dslab@diu.edu.bd
- Website: https://ds-lab-diu.vercel.app
- GitHub: Data Science Lab DIU
- LinkedIn: DS Lab DIU
Built with ❤️ by the Data Science Lab Team
Empowering Innovation Through Data Science