DATUM is a student-run Data Science community website that connects aspiring data scientists, showcases events, and provides resources for learning and collaboration.

Assigned to: Sparsh Shukla

Works on:

• Hero section (homepage)
• Short About section (homepage)
• Full About page

Focus Areas:

• Strong first impression and visual impact
• Smooth animations and transitions
• Fully responsive design
• Engaging user experience

Key Files:

• components/Hero.tsx
• components/AboutSummary.tsx
• pages/About.tsx

Assigned to: Dev Thakur

Works on:

• Team page component

Includes:

• Member photo
• Name and role
• LinkedIn profile link
• GitHub profile link

Focus Areas:

• Clean, modern card UI
• Professional layout
• Easy navigation
• Responsive grid system

Key Files:

• pages/Team.tsx

Assigned to: Mayank

Works on:

• Homepage Events/Timeline section
• Full Events page

Includes:

• Upcoming events
• Past events (timeline view)
• Event cards with details

Focus Areas:

• Clear visual timeline
• Distinction between past and upcoming events
• Responsive event layouts

Key Files:

• pages/Events.tsx
• components/Hero.tsx (events section)

Assigned to: Krishna

Works on:

• Gallery page
• Admin dashboard
• Add Event component

Gallery Features:

• Grid / masonry layout
• Lightbox image preview
• Image filtering and categorization
• Lazy loading for performance

Admin Features:

• Secure authentication
• Dashboard with website stats
• Event management (add / edit / delete)
• Gallery image management
• Content moderation

Add Event Features:

• Validated form
• Rich text editor
• Image upload
• Date & time picker
• Event preview before submission

Focus Areas:

• Secure admin access
• Intuitive content management
• Seamless Events–Gallery integration
• Optimized images and performance

Key Files:

• components/Admin.tsx
• components/AddEvent.tsx
• components/Gallery.tsx
• services/authService.ts
• services/eventService.ts
• services/galleryService.ts

Integration Points:

• Admin-added events appear on Events page
• Event images auto-sync to Gallery
• Shared event data types with Events module
• Consistent UI patterns across the app

DATUM-WEB-SITE/ ├── components/ │ ├── Header.tsx │ ├── Hero.tsx │ ├── AboutSummary.tsx │ ├── Footer.tsx │ ├── ChatWidget.tsx │ ├── Admin.tsx │ ├── AddEvent.tsx │ ├── Gallery.tsx ├── pages/ │ ├── Home.tsx │ ├── About.tsx │ ├── Team.tsx │ ├── Events.tsx │ ├── Gallery.tsx ├── services/ │ ├── geminiService.ts │ ├── authService.ts │ ├── eventService.ts │ ├── galleryService.ts │ └── index.ts ├── public/ │ ├── logo_datum.png │ └── images/ ├── types.ts ├── constants.tsx ├── App.tsx ├── index.tsx ├── vite.config.ts ├── package.json └── README.md 

• Frontend: React + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router
• Icons: Lucide React
• API Integration: Gemini API
• State Management: React Context
• Forms: React Hook Form + Zod
• Image Upload: React Dropzone
• Dates: date-fns
• Notifications: React Hot Toast

• Node.js v18 or higher
• npm or yarn

git clone https://github.com/your-username/DATUM-WEB-SITE.git cd DATUM-WEB-SITE npm install

npm run dev

App runs at: http://localhost:3000/

npm run build

• Primary: Indigo (#4f46e5)
• Secondary: Slate shades
• Accent: Gradients for depth

• Font weights: Regular, Bold, Black
• Headings: Tight letter spacing

• Smooth transitions (500–1000ms)
• Hover effects and subtle transforms

• Mobile-first design
• Breakpoints: sm, md, lg, xl

1. Create a feature branch

git checkout -b feature/your-feature-name

2. Commit changes

git commit -m "Descriptive commit message"

3. Push branch

git push origin feature/your-feature-name

4. Open a Pull Request

• Follow existing structure and style
• Ensure responsiveness
• Test animations and interactions
• Document complex logic if needed

For questions or clarifications, contact the respective team member or project lead.

Last Updated: January 22, 2026