Skip to content

saadakhtr29/Hacked-Community-Website

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

52 Commits
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Hacked - Tech Community Website ๐Ÿš€

A comprehensive community platform for innovators, creators, and tech enthusiasts at Jamia Hamdard University and beyond.

GitHub License

๐Ÿ“‹ Table of Contents

๐ŸŽฏ About the Project

Hacked by Jamia Hamdard is the official coding and technology community website for Jamia Hamdard University. This full-stack platform serves as a comprehensive hub for students and tech enthusiasts worldwide to connect, learn, and grow together through mentorship programs, workshops, hackathons, and collaborative projects.

๐ŸŽ“ Mission Statement

Our mission is to create an inclusive digital ecosystem where technology enthusiasts can:

  • Learn through interactive workshops, tutorials, and mentorship programs
  • Collaborate on innovative projects that solve real-world problems
  • Connect with like-minded individuals and industry professionals globally
  • Compete in hackathons, coding competitions, and tech challenges
  • Create impactful solutions that benefit the community and beyond
  • Career Growth through recruitment drives and professional development

๐ŸŒŸ Community Focus

  • Primary Audience: Students at Jamia Hamdard University
  • Global Reach: Open to tech enthusiasts worldwide
  • Core Areas: Computer Science, Web Development, AI/ML, Blockchain, DevOps, and emerging technologies
  • Activities: Workshops, hackathons, recruitment drives, tech talks, project showcases, and industry partnerships

๐ŸŽฏ Key Objectives

  1. Educational Excellence: Providing high-quality learning resources and mentorship
  2. Industry Readiness: Preparing students for successful tech careers
  3. Innovation Hub: Fostering creative problem-solving and entrepreneurship
  4. Community Building: Creating lasting connections within the tech ecosystem
  5. Global Impact: Contributing to the broader technology community

โœจ Features

๐Ÿ  Frontend Features

  • Interactive Hero Section with animated text effects and interactive dot grid background
  • Responsive Design with mobile-first approach and cross-device compatibility
  • Dynamic Animations using GSAP and Framer Motion for smooth user experience
  • Modern UI Components with shadcn/ui and custom-styled elements

๐Ÿ“… Event Management System

  • Event Listings with comprehensive event details and categorization
  • Multi-Platform Integration with Luma and Commudle for event synchronization
  • Registration System for workshops, hackathons, and networking events
  • Event Categories: Workshops, Bootcamps, Networking, Competitions, Tech Talks

๐Ÿ“ Content Management

  • Blog Platform with multi-source content aggregation (Hashnode, Medium)
  • Technical Articles and community-driven tutorials
  • Resource Sharing for learning materials and development guides
  • Newsletter Integration for community updates and announcements

๐Ÿ‘ฅ Team & Community

  • Team Showcase with detailed member profiles and role descriptions
  • Department Structure: Graphics, Management, Social Media, Mentors, Content Teams
  • Recruitment System with application forms and team join requests
  • Member Profiles with achievements and contribution tracking

๐Ÿ“ž Communication & Engagement

  • Contact System with form submissions and inquiry management
  • Social Media Integration across all major platforms
  • Real-time Notifications for events and community updates
  • Community Guidelines and Code of Conduct pages

๐Ÿ”ง Backend Features

  • RESTful API with Express.js and TypeScript
  • Database Management with Prisma ORM and PostgreSQL
  • Contact Form Processing with data persistence and admin dashboard
  • Event Synchronization from external APIs (Luma, Commudle)
  • Blog Content Aggregation from multiple platforms
  • Error Handling and logging system

๐Ÿ›  Technology Stack

Frontend

  • React 18.3.1 - Modern UI library with hooks and concurrent features
  • TypeScript 5.5.3 - Type-safe JavaScript for better development experience
  • Vite 5.4.1 - Fast build tool with HMR and optimized bundling
  • CSS - CSS for styling
  • Motion (Framer Motion 12.23.12) - Production-ready motion library
  • GSAP 3.13.0 - Professional-grade JavaScript animation library
  • React Router DOM 6.26.2 - Declarative routing for React applications
  • TanStack Query 5.56.2 - Powerful data synchronization for React

Backend

  • Node.js - JavaScript runtime for server-side development
  • Express.js - Fast, minimalist web framework for Node.js
  • TypeScript - Type-safe server-side development
  • Prisma ORM - Modern database toolkit with type safety
  • PostgreSQL - Advanced open-source relational database
  • Axios - Promise-based HTTP client for API integrations

Development Tools

  • ESLint - Code linting and quality enforcement
  • SWC - Fast TypeScript/JSX compilation
  • Vite Dev Server - Lightning-fast development server
  • React Icons & Lucide React - Comprehensive icon libraries

External Integrations

  • Luma API - Event management and synchronization
  • Commudle API - Community event platform integration
  • Hashnode API - Technical blog content aggregation
  • Medium RSS - Blog post synchronization
  • Social Media APIs - Community engagement tracking

๐Ÿ— Project Architecture

Frontend Architecture

Client (React + Vite + TypeScript)
โ”œโ”€โ”€ Components (Reusable UI Components)
โ”œโ”€โ”€ Pages (Route-based page components)
โ”œโ”€โ”€ Services (API communication layer)
โ”œโ”€โ”€ Utils (Helper functions and utilities)
โ””โ”€โ”€ Assets (Images, fonts, and static files)

Backend Architecture

Server (Node.js + Express + TypeScript)
โ”œโ”€โ”€ Controllers (Request handling logic)
โ”œโ”€โ”€ Services (Business logic layer)
โ”œโ”€โ”€ Routes (API endpoint definitions)
โ”œโ”€โ”€ Config (Database and environment configuration)
โ””โ”€โ”€ Utils (Server utilities and helpers)

Database Schema

  • Contact - User inquiries and form submissions
  • Event - Community events and activities
  • Blog - Aggregated blog content
  • User - Community member profiles (future implementation)
  • Team - Team member information and roles

๐Ÿ“ File Structure

hacked-community-website/
โ”œโ”€โ”€ README.md                         # Project documentation
โ”œโ”€โ”€ client/                           # Frontend React application
โ”‚   โ”œโ”€โ”€ public/                       # Static assets and SEO files
โ”‚   โ”‚   โ”œโ”€โ”€ robots.txt               # Search engine optimization
โ”‚   โ”‚   โ””โ”€โ”€ favicon.ico              # Site favicon
โ”‚   โ”œโ”€โ”€ src/                         # Source code directory
โ”‚   โ”‚   โ”œโ”€โ”€ components/              # Reusable UI components
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ About.tsx            # About section with mission/vision
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Blog.tsx             # Blog listing and aggregation
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ BlurText.tsx         # Animated text component
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ CardNav.tsx          # Advanced navigation component
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ ContactForm.tsx      # Contact form with validation
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ DotGrid.tsx          # Interactive canvas background
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Events.tsx           # Event showcase and listings
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Footer.tsx           # Site footer with links
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Hero.tsx             # Landing page hero section
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Navbar.tsx           # Main navigation component
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Section.tsx          # Layout wrapper component
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Team.tsx             # Team member showcase
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ TextType.tsx         # Typewriter animation effect
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ TrueFocus.tsx        # Focus animation component
โ”‚   โ”‚   โ”‚   
โ”‚   โ”‚   โ”‚    
โ”‚   โ”‚   โ”œโ”€โ”€ pages/                   # Page-level components
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Index.tsx            # Main homepage
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ NotFound.tsx         # 404 error page
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ TeamPage.tsx         # Dedicated team page
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ CodeOfConduct.tsx    # Community code of conduct
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ PrivacyPolicy.tsx    # Privacy policy page
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ TermsOfService.tsx   # Terms of service
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ communityGuidelinesPage.tsx # Community guidelines
โ”‚   โ”‚   โ”œโ”€โ”€ style/                   # Component-specific CSS
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ About.css            # About section styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Blogs.css            # Blog component styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ CardNav.css          # Navigation component styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ ContactForm.css      # Form styling and animations
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ DotGrid.css          # Canvas background styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Events.css           # Event component styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Footer.css           # Footer styling
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Hero.css             # Hero section styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ NotFound.css         # 404 page styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Section.css          # Layout component styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ TextType.css         # Animation component styles
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ TrueFocus.css        # Focus animation styles
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ [Other component styles]
โ”‚   โ”‚   โ”œโ”€โ”€ App.tsx                  # Main application component
โ”‚   โ”‚   โ”œโ”€โ”€ App.css                  # Global application styles
โ”‚   โ”‚   โ”œโ”€โ”€ index.css                # Global CSS reset and base styles
โ”‚   โ”‚   โ”œโ”€โ”€ main.tsx                 # Application entry point
โ”‚   โ”‚   โ””โ”€โ”€ vite-env.d.ts            # Vite environment type definitions
โ”‚   โ”œโ”€โ”€ components.json              # Shadcn/ui configuration
โ”‚   โ”œโ”€โ”€ eslint.config.js             # ESLint configuration
โ”‚   โ”œโ”€โ”€ index.html                   # HTML template
โ”‚   โ”œโ”€โ”€ package.json                 # Frontend dependencies and scripts
โ”‚   โ”œโ”€โ”€ tsconfig.app.json            # TypeScript app configuration
โ”‚   โ”œโ”€โ”€ tsconfig.json                # Main TypeScript configuration
โ”‚   โ”œโ”€โ”€ tsconfig.node.json           # TypeScript Node.js configuration
โ”‚   โ””โ”€โ”€ vite.config.ts               # Vite build configuration
โ”œโ”€โ”€ server/                          # Backend Node.js application
โ”‚   โ”œโ”€โ”€ src/                         # Server source code
โ”‚   โ”‚   โ”œโ”€โ”€ controllers/             # Request handling logic
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ blogController.ts    # Blog API endpoints
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ contactController.ts # Contact form handling
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ eventController.ts   # Event management endpoints
โ”‚   โ”‚   โ”œโ”€โ”€ services/                # Business logic layer
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ blogService.ts       # Blog aggregation logic
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ contactService.ts    # Contact data processing
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ eventService.ts      # Event synchronization
โ”‚   โ”‚   โ”œโ”€โ”€ routes/                  # API route definitions
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ blogRoutes.ts        # Blog-related routes
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ contactRoutes.ts     # Contact form routes
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ eventRoutes.ts       # Event management routes
โ”‚   โ”‚   โ”œโ”€โ”€ config/                  # Configuration files
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ prisma.ts            # Database configuration
โ”‚   โ”‚   โ”œโ”€โ”€ utils/                   # Utility functions
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ notifier.ts          # Notification utilities
โ”‚   โ”‚   โ”œโ”€โ”€ app.ts                   # Express application setup
โ”‚   โ”‚   โ””โ”€โ”€ server.ts                # Server startup file
โ”‚   โ”œโ”€โ”€ prisma/                      # Database schema and migrations
โ”‚   โ”‚   โ””โ”€โ”€ schema.prisma            # Prisma database schema
โ”‚   โ”œโ”€โ”€ package.json                 # Backend dependencies
โ”‚   โ””โ”€โ”€ .env                         # Environment variables (not in repo)
โ””โ”€โ”€ .gitignore                       # Git ignore configuration

๐Ÿš€ Getting Started

Prerequisites

Ensure you have the following installed on your system:

๐Ÿ”ง Frontend Installation

  1. Clone the repository

    git clone https://github.com/saadakhtr29/Hacked-Community-Website.git
    cd Hacked-Community-Website
  2. Navigate to the client directory

    cd client
  3. Install dependencies

    npm install
    # or
    yarn install
  4. Start the development server

    npm run dev
    # or
    yarn dev
  5. Open your browser Visit http://localhost:5173 to see the application running.

๐Ÿ“ฑ Available Frontend Scripts

  • npm run dev - Start development server with hot reload
  • npm run build - Build production bundle
  • npm run build:dev - Build development bundle
  • npm run lint - Run ESLint for code quality
  • npm run preview - Preview production build locally

๐Ÿ—„๏ธ Backend Setup

Database Configuration

  1. Install PostgreSQL and create a database:

    CREATE DATABASE hacked_community;
  2. Set up environment variables in server/.env:

    # Database Configuration
    DATABASE_URL="postgresql://username:password@localhost:5432/hacked_community"
    
    # Server Configuration
    PORT=3000
    NODE_ENV=development
    
    # API Keys for External Services
    LUMA_API_KEY=your_luma_api_key
    COMMUDLE_API_KEY=your_commudle_api_key
    HASHNODE_USERNAME=your_hashnode_username
    MEDIUM_USERNAME=your_medium_username
    
    # Email Configuration (Optional)
    SMTP_HOST=smtp.gmail.com
    SMTP_PORT=587
    SMTP_USER=your_email@gmail.com
    SMTP_PASS=your_app_password

Backend Installation

  1. Navigate to the server directory

    cd server
  2. Install dependencies

    npm install
  3. Generate Prisma client

    npx prisma generate
  4. Run database migrations

    npx prisma db push
  5. Start the development server

    npm run dev

The backend server will start on http://localhost:3000.

๐Ÿ”ง Available Backend Scripts

  • npm run dev - Start development server with hot reload
  • npm run build - Build production version
  • npm run start - Start production server
  • npm run prisma:generate - Generate Prisma client
  • npm run prisma:push - Push schema changes to database
  • npm run prisma:studio - Open Prisma Studio for database management

๐Ÿ“š API Documentation

Contact Endpoints

POST /api/contact
Content-Type: application/json

{
  "fullname": "John Doe",
  "email": "john@example.com",
  "subject": "general",
  "message": "Hello, I'm interested in joining the community."
}
GET /api/contact
# Returns all contact submissions (admin only)

Blog Endpoints

GET /api/blogs
# Returns aggregated blog posts from Hashnode and Medium

Event Endpoints

GET /api/events
# Returns all synchronized events
POST /api/events/sync
# Manually trigger event synchronization from external APIs

Response Format

All API responses follow this structure:

{
  "success": true,
  "data": {...},
  "message": "Success message",
  "timestamp": "2024-01-01T00:00:00.000Z"
}

Error responses:

{
  "success": false,
  "error": "Error message",
  "code": "ERROR_CODE",
  "timestamp": "2024-01-01T00:00:00.000Z"
}

๐Ÿค Contributing

We welcome contributions from developers of all skill levels! Here's how you can contribute to the Hacked community website:

๐ŸŒŸ Ways to Contribute

  1. ๐Ÿ› Bug Reports - Report issues or bugs you encounter
  2. ๐Ÿ’ก Feature Requests - Suggest new features or improvements
  3. ๐Ÿ“ Documentation - Improve README, comments, or API documentation
  4. ๐ŸŽจ Design - UI/UX improvements and design enhancements
  5. ๐Ÿ’ป Frontend Development - React components, animations, and user experience
  6. ๐Ÿ”ง Backend Development - API endpoints, database optimization, and integrations
  7. ๐Ÿงช Testing - Write tests and improve code coverage
  8. ๐Ÿ“š Content - Blog posts, tutorials, and educational content

๐Ÿ”„ Contribution Workflow

  1. Fork the Repository

    # Fork on GitHub or use GitHub CLI
    gh repo fork YOUR_USERNAME/hacked-community-website
  2. Create a Feature Branch

    git checkout -b feature/your-feature-name
    # or for bug fixes
    git checkout -b fix/your-bug-fix
    # or for documentation
    git checkout -b docs/your-documentation-update
  3. Make Your Changes

    • Follow the existing code style and conventions
    • Add comments for complex logic
    • Update documentation if needed
    • Test your changes thoroughly
    • Ensure responsive design for UI changes
  4. Test Your Changes

    # Frontend testing
    cd client && npm run lint
    cd client && npm run build
    
    # Backend testing
    cd server && npm run build
    cd server && npm run test # if tests are available
  5. Commit Your Changes

    git add .
    git commit -m "feat: add new community event management feature"
    # Follow conventional commit format
  6. Push to Your Fork

    git push origin feature/your-feature-name
  7. Create a Pull Request

    • Go to GitHub and create a PR from your fork
    • Provide a clear description of your changes
    • Include screenshots for UI changes
    • Link any related issues
    • Request review from maintainers

๐Ÿ“‹ Commit Message Convention

We use conventional commits for clear history and automated changelogs:

  • feat: - New features (frontend or backend)
  • fix: - Bug fixes
  • docs: - Documentation changes
  • style: - Code style changes (formatting, missing semi-colons, etc.)
  • refactor: - Code refactoring without functionality changes
  • perf: - Performance improvements
  • test: - Adding or updating tests
  • chore: - Maintenance tasks, dependency updates
  • ci: - CI/CD configuration changes

๐ŸŽจ Code Style Guidelines

Frontend Guidelines

  • TypeScript: Use TypeScript for all new components and maintain type safety
  • Components: Create reusable, well-documented React components
  • Styling: Use Tailwind CSS utilities when possible, custom CSS for complex animations
  • Animations: Leverage GSAP and Framer Motion for smooth, performant animations
  • Accessibility: Ensure components are accessible (ARIA labels, keyboard navigation, contrast)
  • Responsive Design: Test on multiple screen sizes and devices
  • Performance: Optimize images, lazy load components, minimize bundle size

Backend Guidelines

  • TypeScript: Maintain strict type safety across all server code
  • API Design: Follow RESTful conventions and consistent response formats
  • Error Handling: Implement comprehensive error handling and logging
  • Database: Use Prisma ORM for all database interactions
  • Security: Validate all inputs, implement rate limiting, secure API endpoints
  • Documentation: Document all API endpoints and complex business logic

๐Ÿงช Testing Guidelines

  • Write unit tests for utility functions and services
  • Create integration tests for API endpoints
  • Test responsive design across different devices
  • Verify accessibility compliance
  • Test performance under load
  • Validate error handling scenarios

๐Ÿ› Community Guidelines

๐Ÿค Code of Conduct

Our community is committed to providing a welcoming and inclusive environment for everyone. We expect all participants to adhere to the following principles:

  • Be Respectful: Treat all community members with respect, kindness, and empathy
  • Be Inclusive: Welcome developers from all backgrounds, skill levels, and experiences
  • Be Collaborative: Share knowledge freely and help others learn and grow
  • Be Professional: Maintain professional communication in all interactions
  • Be Constructive: Provide helpful feedback and engage in meaningful discussions
  • Be Patient: Remember that everyone is learning and growing at their own pace

๐ŸŽฏ Community Scope

Our community focuses on:

  • Education: Workshops, tutorials, mentorship programs, and skill development
  • Innovation: Hackathons, project collaborations, and emerging technology exploration
  • Networking: Connecting students with industry professionals and like-minded peers
  • Career Development: Job opportunities, resume reviews, interview preparation
  • Open Source: Contributing to and maintaining community projects
  • Research: Academic research collaborations and paper publications
  • Industry Partnerships: Collaborations with tech companies and organizations

๐Ÿ“œ Community Policies

  1. Academic Integrity: We promote honest learning and original work
  2. Intellectual Property: Respect copyrights and give proper attribution
  3. Privacy: Protect personal information and respect member privacy
  4. Anti-Harassment: Zero tolerance for harassment, discrimination, or abuse
  5. Quality Content: Share high-quality, relevant, and helpful content
  6. Commercial Activities: Community-first approach to any commercial activities

๐Ÿ‘จโ€๐Ÿ’ป Contributors

๐Ÿ—๏ธ Project Creator & Lead Developer

Saad - Founder & Lead Developer

  • ๐ŸŽฏ Role: Project Creator, Full-Stack Architect, Lead Developer, Community Lead
  • ๐Ÿš€ Major Contributions:
    • Project Vision & Conception: Conceptualized and initiated the entire Hacked community platform
    • Full-Stack Architecture: Designed and implemented both frontend and backend architecture
    • Core Development: Built the foundational components, animations, and user experience
    • Database Design: Architected the database schema and API structure
    • UI/UX Leadership: Created the visual identity, design system, and user interface
    • Animation Systems: Implemented advanced GSAP and Framer Motion animations
    • Community Building: Established community guidelines, contribution workflows, and project roadmap
    • Technical Leadership: Set coding standards, best practices, and development processes
    • Project Management: Coordinated development milestones and community engagement strategies

๐ŸŒŸ Core Contributors

This section will be updated as contributors join and their pull requests are merged. We welcome developers, designers, content creators, and community managers to join our growing team.

Active Contributors

  • Contributors: We're looking for passionate developers to join our team!
  • Areas Needed: Frontend Development, Backend Development, UI/UX Design, DevOps, Content Creation, Community Management

How to Become a Contributor

  1. Start Contributing: Make meaningful contributions through pull requests
  2. Community Engagement: Participate in discussions and help other community members
  3. Quality Contributions: Demonstrate coding skills, attention to detail, and collaborative spirit
  4. Consistent Participation: Show ongoing commitment to the project's growth and success

๐Ÿ† Recognition System

Contributors will be recognized based on:

  • Code Contributions: Pull requests merged, features implemented, bugs fixed
  • Community Support: Helping other members, answering questions, providing mentorship
  • Documentation: Improving project documentation, writing tutorials, creating guides
  • Design Contributions: UI/UX improvements, graphics, branding materials
  • Testing & QA: Bug reports, testing new features, improving code quality

๐ŸŽ‰ Special Recognition

We believe in acknowledging the hard work and dedication of our contributors:

  • Contributor Hall of Fame: Featured on project README and website
  • Annual Recognition: Special recognition during community events
  • Networking Opportunities: Connections with industry professionals and recruiters
  • Skill Development: Mentorship opportunities and technical growth
  • Project Ownership: Lead roles in specific features or project areas

Want to see your name here? Start contributing today and become part of our growing tech community!

๐Ÿš€ Deployment

๐Ÿ“ฆ Production Build

Frontend Deployment

# Build the frontend
cd client
npm run build

# Preview the build locally
npm run preview

Backend Deployment

# Build the backend
cd server
npm run build

# Start production server
npm run start

๐ŸŒ Deployment Options

1. Vercel (Frontend)

# Install Vercel CLI
npm i -g vercel

# Deploy from client directory
cd client
vercel --prod

2. Railway (Backend)

# Configure environment variables
# Set DATABASE_URL and other required variables
# Deploy via Git integration

4. Full-Stack Deployment

  • Frontend: Deploy on Vercel
  • Backend: Deploy on Railway
  • Database: PostgreSQL on Railway

๐Ÿ”ง Environment Configuration

Production Environment Variables

# Database
DATABASE_URL=postgresql://user:password@host:port/database

# Server
PORT=8000
NODE_ENV=production

# API Keys
LUMA_API_KEY=your_production_luma_key
COMMUDLE_API_KEY=your_production_commudle_key


# Email Service
SMTP_HOST=your_smtp_host
SMTP_PORT=587
SMTP_USER=your_email
SMTP_PASS=your_password

๐ŸŽจ Design Philosophy

Visual Identity

  • Color Palette: Beige (#f5f5da) backgrounds with black (#000000), red (#ff0000), and white (#ffffff) accents
  • Typography: Playfair Display for headings (elegant, academic), Inter for body text (modern, readable)
  • Animation Philosophy: Smooth, purposeful animations that enhance user experience without overwhelming
  • Layout Principles: Clean, modern design with strategic use of whitespace and visual hierarchy
  • Responsive Design: Mobile-first approach ensuring optimal experience across all devices

User Experience

  • Performance-First: Optimized animations, lazy loading, and efficient rendering
  • Accessibility: WCAG 2.1 AA compliant with proper contrast ratios and navigation
  • Interactive Elements: Engaging hover effects, micro-interactions, and visual feedback
  • Loading States: Smooth loading animations and skeleton screens
  • Error Handling: User-friendly error messages and recovery options

Design System

  • Component Library: Consistent, reusable components with shadcn/ui foundation
  • Spacing System: Systematic spacing using Tailwind's spacing scale
  • Elevation: Strategic use of shadows and depth for visual hierarchy
  • Motion Design: Physics-based animations using GSAP and Framer Motion
  • Iconography: Consistent icon style using Lucide React icons

๐Ÿ”ฎ Future Roadmap

Phase 1: Core Platform Enhancement

  • User Authentication System - JWT-based authentication with role management
  • Advanced Event Management - Event registration, waitlists, and capacity management
  • Enhanced Blog System - Community-contributed blog posts with rich text editor
  • Search Functionality - Full-text search across events, blog posts, and members
  • Mobile App - React Native mobile application for iOS and Android

Phase 2: Community Features

  • Member Profiles - Comprehensive user profiles with skills, projects, and achievements
  • Project Showcase - Portfolio section for member projects with live demos
  • Discussion Forums - Category-based discussion boards for technical topics
  • Mentorship Platform - Automated mentor-mentee matching system
  • Skill Assessment - Technical skill evaluation and certification system

Phase 3: Advanced Features

  • Live Streaming Platform - Integrated live streaming for virtual events and workshops
  • Job Board - Career opportunities, internships, and freelance projects
  • Resource Library - Curated learning materials, tutorials, and documentation
  • Achievement System - Gamification with badges, points, and leaderboards
  • API Ecosystem - Public APIs for third-party integrations

Phase 4: AI & Analytics (Q4 2024)

  • AI-Powered Recommendations - Personalized event and content recommendations
  • Analytics Dashboard - Community insights and engagement metrics
  • Smart Notifications - AI-driven notification system for relevant updates
  • Content Generation - AI-assisted content creation and curation
  • Predictive Analytics - Event attendance and community growth predictions

Technical Improvements (Ongoing)

  • Performance Optimization - Code splitting, caching, and CDN integration
  • Security Enhancements - Advanced security measures and vulnerability scanning
  • Testing Coverage - Comprehensive unit, integration, and e2e testing
  • CI/CD Pipeline - Automated testing, building, and deployment
  • Monitoring & Logging - Application monitoring and error tracking
  • Documentation - Comprehensive API documentation and developer guides

๐Ÿซ About Jamia Hamdard University

Jamia Hamdard University is a premier educational institution in India, renowned for its commitment to academic excellence and innovation. Founded with the vision of providing world-class education, the university offers comprehensive programs across various disciplines:

Academic Excellence

  • Medical Sciences: Leading programs in medicine, pharmacy, and healthcare
  • Engineering & Technology: Cutting-edge programs in computer science, engineering, and technology
  • Research Focus: Strong emphasis on research and development across all disciplines
  • Industry Partnerships: Collaborations with leading industry players and research institutions

Technology Innovation

The Hacked community represents Jamia Hamdard's commitment to:

  • Digital Transformation: Embracing modern technology and digital learning methods
  • Student Innovation: Encouraging entrepreneurship and creative problem-solving
  • Industry Readiness: Preparing students for successful careers in technology
  • Global Connectivity: Connecting students with the global tech community

Community Impact

  • Student Development: Holistic development through technical and soft skills training
  • Social Responsibility: Projects that benefit society and address real-world challenges
  • Cultural Diversity: Welcoming students from diverse backgrounds and cultures
  • Alumni Network: Strong network of successful professionals across industries

๐Ÿ“ž Contact & Support

๐ŸŒ Community Links

๐Ÿ“ง Get in Touch

๐Ÿ†˜ Support Channels

For Contributors & Developers

  1. GitHub Issues - Report bugs and request features
  2. GitHub Discussions - Community discussions and Q&A

For Community Members

  1. Contact Form - Use the contact form on our website
  2. Social Media - Reach out via our social media channels
  3. Community Events - Meet us at workshops and meetups
  4. University Campus - Visit us at Jamia Hamdard University

๐Ÿค Partnership Opportunities

We're always looking for:

  • Industry Partners - Tech companies interested in student engagement
  • Educational Institutions - Universities for collaboration and exchange programs
  • Sponsors - Support for events, hackathons, and community initiatives
  • Mentors - Experienced professionals to guide student development
  • Speaker Program - Industry experts for workshops and tech talks

๐Ÿ“‹ Frequently Asked Questions

General Questions

Q: Who can join the Hacked community? A: Our community is open to all tech enthusiasts, with a primary focus on students at Jamia Hamdard University and the broader global tech community.

Q: Are events free to attend? A: Most of our events are free for community members. Some specialized workshops may have nominal fees to cover materials and venue costs.

Q: How can I stay updated with community activities? A: Subscribe to our newsletter, follow our social media channels, and join our Discord server for real-time updates.

Technical Questions

Q: Can I contribute to the project without being a student at Jamia Hamdard? A: Absolutely! We welcome contributions from developers worldwide. Check our contributing guidelines to get started.

Q: What skill level is required to contribute? A: We welcome contributors of all skill levels, from beginners to experts. We have issues labeled for different experience levels.

Q: Is there a coding style guide? A: Yes, we follow specific coding standards outlined in our contributing guidelines. We use ESLint and Prettier for code formatting.

๐Ÿ† Recognition & Awards

  • University Recognition: Officially recognized student organization at Jamia Hamdard
  • Community Impact: Growing community of 500+ active members
  • Event Success: 50+ successful events and workshops conducted
  • Project Portfolio: 100+ student projects showcased and mentored
  • Industry Partnerships: Collaborations with leading tech companies
  • Alumni Network: Strong network of graduates in top tech companies

๐Ÿ“Š Community Statistics

  • Active Members: 500+
  • Events Conducted: 50+
  • Industry Mentors: 15+
  • GitHub Stars: Growing (Star our repository!)
  • Social Media Followers: 1000+ across platforms

Contributing to Open Source

By contributing to this project, you agree that your contributions will be licensed under the same MIT License. This ensures that the project remains open and accessible to everyone in the community.

๐Ÿ™ Acknowledgments

๐ŸŽ“ Educational Support

  • Jamia Hamdard University for providing institutional support and fostering innovation
  • Faculty Members who encourage student participation in technology initiatives
  • University Administration for supporting student-led technology communities

About

A community website build for the purpose of engaging and educating the students worldwide and Jamia Hamdard especially in the various fields of computer science.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 64.5%
  • CSS 33.4%
  • HTML 1.4%
  • JavaScript 0.7%