HackTech 2025 - Hackathon Registration Website

A modern, responsive hackathon registration website built with React, TypeScript, Tailwind CSS, and featuring a futuristic technical design.

🚀 Features

✨ Core Features

• Modern UI/UX: Sleek, futuristic design with glassmorphism effects and neon accents
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Interactive Navigation: Sticky navbar with active tab highlighting
• Animated Hero Section: Dynamic background with countdown timer
• Registration System: Support for both individual and team registrations
• Authentication: Login and signup pages with form validation
• Payment Integration: Mock payment gateway simulation
• Data Management: Hackathon participant data with filtering and search
• Smooth Animations: Micro-interactions and page transitions

🎯 Pages & Components

• Landing Page: Hero section, features, schedule preview, and CTA sections
• About Page: Mission, values, team information, and competition tracks
• Registration Form: Team/individual registration with comprehensive form validation
• Authentication: Login and signup pages with password visibility toggle
• Payment Processing: Secure payment form with order summary
• Data Dashboard: Participant data with advanced filtering options
• Success Pages: Payment confirmation and next steps

🎨 Design System

• Dark Theme: Technical aesthetic with neon cyan and purple accents
• Glassmorphism: Modern card designs with backdrop blur effects
• Gradient Backgrounds: Dynamic color gradients and animated patterns
• Custom Animations: Floating elements, glow effects, and smooth transitions
• Typography: Clean, modern font choices optimized for readability

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite for fast development and optimized builds
• Styling: Tailwind CSS with custom design system
• UI Components: shadcn/ui component library
• Icons: Lucide React icon library
• Routing: React Router DOM for navigation
• State Management: React hooks and context
• Form Handling: React Hook Form with validation
• Animations: CSS animations and transitions

📸 Screenshots

Landing Page

The hero section features an animated background, countdown timer, and clear call-to-action buttons.

Registration Form

Comprehensive form supporting both individual and team registrations with validation.

Payment Integration

Mock payment gateway with secure form design and order summary.

Data Dashboard

Interactive participant data with filtering, search, and responsive card layouts.

🚀 Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <your-repository-url>
   cd hacktech-2025

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:8080 to view the application

Building for Production

npm run build

The built files will be in the dist directory, ready for deployment.

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── Navbar.tsx      # Navigation component
│   ├── HeroSection.tsx # Landing page hero
│   ├── CountdownTimer.tsx # Event countdown
│   └── RegistrationForm.tsx # Registration form
├── pages/              # Page components
│   ├── Index.tsx       # Landing page
│   ├── About.tsx       # About page
│   ├── Login.tsx       # Authentication
│   ├── Signup.tsx      # User registration
│   ├── Payment.tsx     # Payment processing
│   └── HackathonDetails.tsx # Data dashboard
├── hooks/              # Custom React hooks
├── lib/                # Utility functions
├── assets/             # Images and static files
└── index.css           # Global styles and design system

🎨 Design System

Color Palette

• Primary: Neon Cyan (hsl(187 100% 50%))
• Secondary: Dark Surface (hsl(224 71% 8%))
• Accent: Neon Purple (hsl(280 100% 70%))
• Success: Neon Green (hsl(120 100% 50%))
• Background: Dark Blue (hsl(224 71% 4%))

Custom CSS Classes

• .glass-card: Glassmorphism effect
• .glow-cyan: Cyan glow effect
• .bg-gradient-primary: Primary gradient background
• .animate-pulse-glow: Pulsing glow animation
• .grid-pattern: Animated grid background

🔧 Customization

Adding New Pages

1. Create a new component in the src/pages/ directory
2. Add the route to src/App.tsx
3. Update navigation in src/components/Navbar.tsx

Modifying Colors

Update the CSS custom properties in src/index.css and corresponding Tailwind config in tailwind.config.ts.

Adding New Components

Create components in src/components/ and follow the existing design system patterns.

📱 Responsive Design

The website is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🎯 Form Validation

Registration and authentication forms include:

• Email format validation
• Password strength requirements
• Required field validation
• Real-time error messages
• Success confirmations

🔒 Security Features

• Input sanitization
• Form validation
• Secure payment form (mock implementation)
• Protected routes (when authentication is integrated)

🌟 Performance Optimizations

• Lazy loading for images
• Code splitting with React Router
• Optimized bundle size with Vite
• Efficient re-renders with React hooks
• CSS optimizations with Tailwind

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-feature)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/new-feature)
5. Create a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📧 Contact

For questions or support, please contact:

• Email: support@hacktech2025.com
• Website: [Your Website URL]

🙏 Acknowledgments

• shadcn/ui for the component library
• Lucide React for the icon set
• Tailwind CSS for the styling framework
• React team for the amazing framework

---

HackTech 2025 - Building the future through innovation and collaboration. 🚀