🚀 Code Vimarsh Web

Where Coding Excellence Meets Innovation! 🌟

A vibrant community platform designed to foster learning, collaboration, and innovation among students and developers.

Features • Tech Stack • Getting Started • Deployment • Contributing

---

📋 Table of Contents

• Features
• Tech Stack
• Getting Started
• Environment Variables
• Database Schema
• Project Structure
• Available Scripts
• Deployment
• Contributing
• Contact
• License

---

🔥 Features

🌐 Core Features

• Modern UI/UX: Premium dark mode aesthetic with glassmorphism effects, smooth animations, and micro-interactions
• Secure Authentication: Complete user management powered by Supabase
  • User registration and login
  • Password recovery and reset
  • Profile management with avatar uploads
  • Role-based access control (Admin/User)
• Responsive Design: Fully optimized for mobile, tablet, and desktop devices with touch-friendly interactions
• Theme Support: Light and dark mode with seamless transitions

📄 Pages & Functionality

🏠 Home

• Interactive hero section with animated backgrounds
• Mission and vision statements
• Key offerings showcase
• Statistics and achievements section
• Call-to-action buttons

📅 Events

• Browse upcoming and past events
• Event registration system
• Workshop and hackathon listings
• Event details with date, time, and location
• Dynamic event management via admin dashboard

📚 Resources

• Curated DSA practice sheets with infinite scroll
• YouTube playlists and tutorials
• Learning materials organized by topics
• External resource links

💻 Projects

• Student project showcase
• Project details including tech stack
• Live demo and GitHub repository links
• Deployment links
• Project thumbnails and descriptions

👥 Team

• Meet the Code Vimarsh Family
• Team members organized by departments:
  • Core Team
  • Management
  • Web Development
  • Design
  • Marketing
  • Mentors
• Team member profiles with social links

📞 Contact

• Professional contact form with EmailJS integration
• Real-time form validation
• Contact information display
• Social media links with animations
• Location and email details

🛡️ Admin Dashboard

• Event management (Create, Edit, Delete)
• User management and role assignment
• Analytics and statistics
• Content moderation
• Protected routes with role-based access

👤 User Profile

• Personal information management
• Avatar upload and customization
• Bio and social links
• Password change functionality
• Account settings

---

🛠️ Tech Stack

Frontend

• React 19.2.3 - UI library with TypeScript
• Vite 6.2.0 - Build tool and dev server
• React Router 7.11.0 - Client-side routing
• Lucide React 0.562.0 - Icon library
• Recharts 3.6.0 - Data visualization

Backend & Services

• Supabase 2.89.0 - Backend as a Service
  • PostgreSQL database
  • Authentication
  • Storage for file uploads
  • Real-time subscriptions
• EmailJS 3.2.0 - Email service integration

Styling

• Custom CSS - Premium design system with CSS variables
• Glassmorphism - Modern UI effects
• Animations - Smooth transitions and micro-interactions

Development Tools

• TypeScript 5.8.2 - Type safety
• @vitejs/plugin-react - React Fast Refresh
• @types/node - Node.js type definitions

---

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

Ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/Aryanbuha89/Code_Vimarsh_Web.git
   cd Code_Vimarsh_Web

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory (see Environment Variables section below)

4. Run the development server

   npm run dev

   The application will be available at http://localhost:5173

---

🔐 Environment Variables

Create a .env file in the root directory with the following variables:

# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# EmailJS Configuration (for Contact Form)
VITE_EMAILJS_SERVICE_ID=your_emailjs_service_id
VITE_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
VITE_EMAILJS_PUBLIC_KEY=your_emailjs_public_key

How to Get These Values:

Supabase

1. Create a project at supabase.com
2. Go to Project Settings → API
3. Copy the Project URL and anon/public key

EmailJS

1. Create an account at emailjs.com
2. Create an email service
3. Create an email template
4. Copy the Service ID, Template ID, and Public Key

⚠️ Important: Never commit the .env file to version control. It's already included in .gitignore.

---

🗄️ Database Schema

The project uses Supabase (PostgreSQL) with the following tables:

Core Tables

Table	Description	Key Fields
profiles	User profile information	id, user_id, full_name, avatar_url, bio, github_url, linkedin_url, portfolio_url
events	Events and workshops	id, title, description, date, time, location, status, registration_link, image_url
projects	Student projects showcase	id, title, description, tech_stack, github_url, live_url, thumbnail_url, created_by
team_members	Team directory	id, name, role, department, photo_url, github_url, linkedin_url, order
resources	Learning resources	id, title, description, type, url, category
roles	User role management	user_id, role (admin/user)

Team Departments

• core - Core team members
• management - Management team
• web - Web development team
• design - Design team
• marketing - Marketing team
• mentor - Mentors and advisors

SQL Setup Scripts

The repository includes several SQL scripts for database setup:

• supabase_schema.sql - Main schema setup
• create_dynamic_tables.sql - Dynamic table creation
• setup_registrations.sql - Event registration setup
• enable_admin_permissions.sql - Admin role setup
• fix_storage.sql - Storage bucket configuration

💡 Tip: Refer to types.ts for TypeScript interfaces matching the database schema.

---

📁 Project Structure

Code_Vimarsh_Web/
├── Logo/                      # Brand assets
├── components/                # Reusable components
│   ├── AuthLayout.tsx        # Authentication layout wrapper
│   └── ui/                   # UI components
├── context/                   # React context providers
│   ├── AuthContext.tsx       # Authentication context
│   └── ThemeContext.tsx      # Theme management
├── hooks/                     # Custom React hooks
├── lib/                       # Utility libraries
│   └── supabase.ts           # Supabase client configuration
├── pages/                     # Page components
│   ├── Admin/                # Admin dashboard
│   │   └── Dashboard.tsx
│   ├── Contact.tsx           # Contact page with EmailJS
│   ├── Events.tsx            # Events listing
│   ├── ForgotPassword.tsx    # Password recovery
│   ├── Home.tsx              # Landing page
│   ├── Login.tsx             # Login page
│   ├── Profile.tsx           # User profile
│   ├── Projects.tsx          # Projects showcase
│   ├── Resources.tsx         # Learning resources
│   ├── Signup.tsx            # Registration page
│   ├── Team.tsx              # Team directory
│   └── UpdatePassword.tsx    # Password reset
├── thumbnails/                # Project thumbnails
├── App.tsx                    # Main app component with routing
├── index.tsx                  # App entry point
├── types.ts                   # TypeScript type definitions
├── vite.config.ts            # Vite configuration
├── tsconfig.json             # TypeScript configuration
├── package.json              # Dependencies and scripts
└── README.md                 # This file

---

📜 Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

---

🚢 Deployment

This project is deployment-ready for platforms like Vercel, Netlify, or GitHub Pages.

Build for Production

npm run build

This generates a dist folder with optimized static assets.

Deployment Platforms

Vercel (Recommended)

1. Push your code to GitHub
2. Import the repository in Vercel
3. Add environment variables in project settings
4. Deploy!

Netlify

1. Push your code to GitHub
2. Create a new site in Netlify
3. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
4. Add environment variables
5. Deploy!

GitHub Pages

npm run build
# Deploy the dist folder to gh-pages branch

⚠️ Note: Remember to add all environment variables to your deployment platform.

---

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

How to Contribute

1. Fork the repository

   git clone https://github.com/YOUR_USERNAME/Code_Vimarsh_Web.git

2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Make your changes

   • Write clean, readable code
   • Follow the existing code style
   • Add comments where necessary
   • Test your changes thoroughly

4. Commit your changes

   git commit -m 'Add some AmazingFeature'

5. Push to your branch

   git push origin feature/AmazingFeature

6. Open a Pull Request

   • Provide a clear description of the changes
   • Reference any related issues
   • Wait for review and feedback

Contribution Guidelines

• Follow the existing code structure and naming conventions
• Ensure your code is properly typed (TypeScript)
• Test your changes on multiple screen sizes
• Update documentation if needed
• Be respectful and constructive in discussions

---

📬 Contact Us

Code Vimarsh Team

• Email: codingclub-cse@msubaroda.ac.in
• Location: CSE Department, Vadodara, Gujarat, India
• GitHub: @code-vimarsh
• LinkedIn: Code Vimarsh

Get in Touch

Have questions, suggestions, or want to collaborate? Feel free to:

• Open an issue
• Submit a pull request
• Reach out via email

---

📄 License

This project is maintained by the Code Vimarsh team. All rights reserved.

---

Developed with ❤️ by the Code Vimarsh Web Team

Architecture of Logic

⬆ Back to Top