DevClub IIT Delhi - Landing Page

The official landing page for DevClub, IIT Delhi - showcasing our community, events, projects, and team.

Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS with PostCSS
• 3D Graphics: Three.js with React Three Fiber and Drei
• Routing: React Router DOM
• Icons: Lucide React
• Code Quality: ESLint with TypeScript support
• Development: Hot Module Replacement (HMR) via Vite

Project Structure

devclub-website/
├── public/                  # Static assets
│   ├── events/              # Event-related images
│   ├── pastocs/             # Past Open Source Contribution images
│   ├── projects/            # Project showcase images
│   └── team_photos/         # Team member photos
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Background.tsx   # 3D background component
│   │   ├── Footer.tsx       # Site footer
│   │   ├── Hero.tsx         # Landing hero section
│   │   ├── Navbar.tsx       # Navigation bar
│   │   └── Notification.tsx # Notification banner
│   ├── pages/               # Page components
│   │   ├── Communities.tsx  # Communities showcase
│   │   ├── Events.tsx       # Events listing
│   │   ├── PastOCs.tsx      # Past contributions
│   │   ├── Projects.tsx     # Projects showcase
│   │   ├── Team.tsx         # Team members
│   │   └── NotFound.tsx     # 404 page
│   ├── lists/               # Data files (JSON)
│   │   ├── events.json      # Events data
│   │   ├── pastOCs.json     # Past OC data
│   │   ├── projects.json    # Projects data
│   │   └── team.json        # Team members data
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # Application entry point
│   └── index.css            # Global styles
├── package.json             # Dependencies and scripts
├── vite.config.ts           # Vite configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
└── eslint.config.js         # ESLint configuration

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

5. Preview production build:

   npm run preview

Features

• Interactive 3D Background: Powered by Three.js and React Three Fiber
• Responsive Design: Mobile-first approach with Tailwind CSS
• Dynamic Content: JSON-based data management for easy updates
• Modern Routing: Client-side routing with React Router
• Type Safety: Full TypeScript implementation

About DevClub

For this. check out the actual website at devclub.in!

Attribution and Licensing

As enthusiastic contributors to the open source ecosystem, we at DevClub are always open and willing to collaborate on projects. We do not however, allow our public branding and therefore the code of our landing page to be reused. This repository is public to encourage you to learn to make stuff like this, but we do not permit reuse of this code under any license.

If you'd like to collaborate with us to make a landing page (or anything under the sun) for your club/society/company, feel free to reach out to us on devclub@iitd.ac.in