Skip to content

Programming-Club-Ahmedabad-University/The-Programming-Club

BranchesTags
 
 

Repository files navigation

Programming Club | Ahmedabad University

Modern Web Platform for the Programming Club

P-Club Logo

Project Overview

The Programming Club at Ahmedabad University is a student-run organization dedicated to fostering a culture of coding, problem-solving, and technological innovation. This website serves as the digital hub for all club activities, member interactions, and event management.

Purpose:

  • Provide a centralized platform for club activities and member engagement
  • Streamline event management and registration processes
  • Showcase club achievements, projects, and member contributions
  • Facilitate communication between club members, faculty, and the broader university community

Target Audience:

  • Current and prospective club members
  • Ahmedabad University students and faculty
  • Alumni network

Key Features

User-Facing Features

  • Interactive Homepage

    • Dynamic hero section with featured events
    • Upcoming events carousel
    • Quick links to important sections

  • Event Management

    • Comprehensive event listings with filtering options
    • Detailed event pages with registration functionality
    • Calendar integration for important dates
    • Event reminders and notifications

  • Member Portal

    • User registration and profile management
    • Event registration history
    • Achievement tracking

  • Gallery

    • Photo and video gallery of past events
    • Categorized media collections
    • Social media integration

  • Team Section

    • Current team members and their roles
    • Alumni network
    • Faculty advisors

Administrative Features

  • Admin Dashboard

    • User management system
    • Event creation and management
    • Analytics and reporting
    • Content management system

  • Authentication & Security

    • Role-based access control (Admin, Member, Guest)
    • Secure password management
    • Email verification system
    • OTP-based authentication

Technology Stack

Frontend

  • Framework: Next.js 15 with App Router
  • UI Library: React 19
  • Styling:
    • Tailwind CSS 4 for utility-first styling
    • Styled Components for complex UI components
  • State Management: React Context API
  • Form Handling: React Hook Form with Yup validation
  • Animations: Framer Motion for smooth transitions
  • Icons: lucide-react and react-icons
  • Date Handling: date-fns

Backend

  • Runtime: Node.js with Next.js API Routes
  • Database:
    • MongoDB with Mongoose ODM
    • Redis for caching and session management
  • Authentication:
    • JWT (JSON Web Tokens)
    • bcryptjs for password hashing
    • Email verification system
  • Email Service: Nodemailer for transactional emails
  • File Storage: Cloudinary integration for media handling

Development Tools

  • Version Control: Git with GitHub
  • Package Manager: npm/yarn
  • Linting: ESLint with custom configuration
  • Code Formatting: Prettier
  • Environment Management: .env files with next-env

Project Structure

src/
├── app/                          # Next.js 13+ App Router - Contains the main application logic, including pages, layouts, and API routes.
│   ├── admin/                    # Admin interface
│   │   ├── dashboard/            # Admin dashboard
│   │   └── login/                # Admin authentication
│   │
│   ├── api/                     # API routes
│   │   ├── auth/                 # Authentication endpoints
│   │   ├── events/               # Event management
│   │   ├── users/                # User management
│   │   ├── gallery/              # Media handling
│   │   └── ...
│   │
│   ├── events/                  # Public event pages
│   │   └── [id]/                 # Dynamic event pages
│   │
│   ├── users/                   # User account management
│   │   ├── login/                # User login
│   │   ├── sign-up/             # User registration
│   │   └── forget-password/      # Password recovery
│   │
│   ├── our-team/               # Team information
│   ├── gallery/                 # Media gallery
│   └── contact-us/              # Contact information
│
├── Components/                 # Reusable UI components
│   ├── common/                  # Common components (buttons, cards, etc.)
│   ├── layout/                  # Layout components
│   └── ...
│
├── Client Components/          # Client-side components
├── Styles/                      # Global styles and themes
├── lib/                         # Utility functions and helpers
└── public/                      # Static assets
    ├── images/                  # Image assets
    └── ...

Directory Descriptions:

  • app: Contains the main application logic, including pages, layouts, and API routes.
  • Components: Contains reusable UI components used throughout the application.
  • Client Components: Contains client-side components.
  • Styles: Contains global styles and themes.
  • lib: Contains utility functions and helpers.
  • public: Contains static assets such as images and fonts.

Key Components:

  • Navbar: The main navigation bar.
  • Footer: The footer section.
  • EventCard: A component for displaying event information.
  • Hero: The hero section on the homepage.

Environment Variables:

  • MONGODB_URI: The connection string for the MongoDB database.
  • NEXTAUTH_SECRET: The secret used for NextAuth.js.
  • NEXTAUTH_URL: The URL of the NextAuth.js deployment.
  • SMTP_HOST: The host of the SMTP server.
  • SMTP_PORT: The port of the SMTP server.
  • SMTP_USER: The username for the SMTP server.
  • SMTP_PASSWORD: The password for the SMTP server.
  • SMTP_FROM: The email address used to send emails.
  • CLOUDINARY_CLOUD_NAME: The name of the Cloudinary cloud.
  • CLOUDINARY_API_KEY: The API key for Cloudinary.
  • CLOUDINARY_API_SECRET: The API secret for Cloudinary.
  • REDIS_URL: The URL for the Redis server.

API Documentation

Authentication

Endpoint Method Description Request Body Success Response Error Response
/api/auth/register POST Register a new user { name, email, password, codeforcesHandle } { success: true, user: {...} } { error: string }
/api/auth/login POST User login { email, password } { success: true, token: string, user: {...} } { error: string }
/api/auth/verify-token GET Verify JWT token Headers: Authorization: Bearer <token> { valid: boolean, user?: {...} } { valid: false }
/api/auth/forgot-password POST Request password reset { email } { success: boolean } { error: string }

Events

Endpoint Method Description Parameters Success Response
/api/events/get GET Get all events ?type=upcoming/past Event[]
/api/events/get/[id] GET Get event by ID - Event
/api/events/add POST Add new event Event { success: true, event: Event }
/api/events/patch/[id] PATCH Update event Partial<Event> { success: true, event: Event }
/api/events/delete/[id] DELETE Delete event - { success: true }
/api/events/winners GET Get all winners - Winner[]
/api/events/winners/[eventId] GET Get winners by event - Winner[]

Gallery

Endpoint Method Description Success Response
/api/gallery/get GET Get all gallery items GalleryItem[]
/api/gallery/add POST Add new gallery item { success: true, item: GalleryItem }
/api/gallery/delete/[id] DELETE Delete gallery item { success: true }

CP Gym

Endpoint Method Description Success Response
/api/cp/post-problem POST Add new problem { success: true, problem: Problem }
/api/codeforces/user/[handle] GET Get Codeforces user data CodeforcesUser

Forms

Endpoint Method Description Success Response
/api/forms/[formId]/submit POST Submit form response { success: true }
/api/forms/submissions GET Get all form submissions FormSubmission[]

Frontend Routes

Public Routes

Route Component Description
/ Home Landing page with hero section and featured content
/events Events List of all events
/events/[id] EventDetails Detailed view of a specific event
/gallery Gallery Photo and video gallery
/our-team Team Team members and leadership
/contact-us Contact Contact information and form
/cp-gym CpGym Competitive programming problems
/cp-gym/profile/[handle] CpGymProfile User's CP profile and stats

Authentication Routes

Route Component Description
/login Login User login page
/signup Signup User registration page
/forgot-password ForgotPassword Password recovery page
/reset-password ResetPassword Password reset page

User Routes

Route Component Description
/profile UserProfile User profile and settings
/my-events UserEvents User's registered events
/submissions MySubmissions User's form submissions

Admin Routes

Route Component Description
/admin AdminDashboard Admin dashboard overview
/admin/events AdminEvents Manage events
/admin/events/create CreateEvent Create new event
/admin/events/edit/[id] EditEvent Edit existing event
/admin/gallery AdminGallery Manage gallery items
/admin/users UserManagement Manage users and permissions
/admin/forms FormSubmissions View form submissions

Getting Started

Prerequisites

  • Node.js 18.0.0 or later
  • npm (v9+) or yarn (v1.22+)
  • MongoDB Atlas account or local MongoDB instance
  • Redis server (for caching and sessions)
  • SMTP server (or Mailtrap for development)

Installation

  1. Clone the repository

    git clone https://github.com/PClub-Ahmedabad-University/The-Programming-Club.git
cd The-Programming-Club

  2. Install dependencies

    npm install
# or
yarn

  3. Environment Setup

    • Create a .env.local file in the root directory
    • Copy the contents from .env.example to .env.local
    • Update the environment variables with your configuration: 
      MONGODB_URI=your_mongodb_connection_string
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000
SMTP_HOST=your_smtp_host
SMTP_PORT=587
SMTP_USER=your_smtp_username
SMTP_PASSWORD=your_smtp_password
[email protected]
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
REDIS_URL=your_redis_url

  4. Database Setup

    • Ensure MongoDB is running locally or update the connection string to your MongoDB Atlas cluster
    • Run database migrations if any

  5. Start the development server

    npm run dev
# or
yarn dev

  6. Open your browser

Available Scripts

  • npm run dev - Start the development server
  • npm run build - Build the application for production
  • npm start - Start the production server
  • npm run lint - Run ESLint
  • npm run format - Format code with Prettier

Deployment

The application is configured for deployment on Vercel, but can be deployed to any Node.js hosting platform that supports Next.js.

Vercel Deployment

  1. Push your code to a GitHub repository
  2. Import the repository to Vercel
  3. Add the required environment variables
  4. Deploy!

Acknowledgments

  • Ahmedabad University for their support
  • All the contributors who have helped build this platform

Developer Credits

Made with ❤️ by members of the Programming Club:

Contact

For any queries or support, please contact the development team at [email protected]

About

the-programming-club.vercel.app

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.6%
  • CSS 3.3%
  • HTML 2.1%