diff --git a/.github/scripts/add-contributor.js b/.github/scripts/add-contributor.js
new file mode 100644
index 0000000..e5fb4ab
--- /dev/null
+++ b/.github/scripts/add-contributor.js
@@ -0,0 +1,48 @@
+const fs = require('fs');
+const path = require('path');
+
+const username = process.env.CONTRIBUTOR_USERNAME;
+if (!username) {
+ console.error('Missing CONTRIBUTOR_USERNAME env variable');
+ process.exit(1);
+}
+
+const readmePath = path.join(process.cwd(), '/readme.md');
+let readme = fs.readFileSync(readmePath, 'utf8');
+
+const thankYouMarker = "## ๐ Thanks for being part of Codextream!";
+const contributorsHeader = "## Contributors";
+const contributorLine = `- [@${username}](https://github.com/${username})`;
+
+// Already present? Exit.
+if (readme.includes(contributorLine)) {
+ console.log('Contributor already present. Skipping.');
+ process.exit(0);
+}
+
+if (readme.includes(contributorsHeader)) {
+ // Add to existing Contributors section (append if not present)
+ const contribSectionRegex = /(## Contributors\s*\n)((?:.|\n)*?)(\n## |\n# |\n$)/;
+ readme = readme.replace(
+ contribSectionRegex,
+ (match, sectionHeader, sectionBody, sectionEnd) => {
+ if (sectionBody.includes(contributorLine)) {
+ return match; // Already present
+ }
+ return `${sectionHeader}${sectionBody}${contributorLine}\n${sectionEnd}`;
+ }
+ );
+} else if (readme.includes(thankYouMarker)) {
+ // Add Contributors section after Thank You marker
+ const thankYouIndex = readme.indexOf(thankYouMarker);
+ const afterThankYouIndex = readme.indexOf('\n', thankYouIndex);
+ const before = readme.slice(0, afterThankYouIndex + 1);
+ const after = readme.slice(afterThankYouIndex + 1);
+ readme = before + `\n${contributorsHeader}\n${contributorLine}\n` + after;
+} else {
+ // Fallback: append at end
+ readme += `\n${contributorsHeader}\n${contributorLine}\n`;
+}
+
+fs.writeFileSync(readmePath, readme, 'utf8');
+console.log(`Added ${username} to Contributors section.`);
diff --git a/.github/workflows/add-contributor-on-merge.yml b/.github/workflows/add-contributor-on-merge.yml
new file mode 100644
index 0000000..d5449ed
--- /dev/null
+++ b/.github/workflows/add-contributor-on-merge.yml
@@ -0,0 +1,47 @@
+name: Add Contributor to README
+
+on:
+ pull_request:
+ types:
+ - closed
+ push:
+ branches:
+ - main
+
+permissions:
+ contents: write
+
+jobs:
+ add-contributor:
+ if: github.event_name == 'push' || github.event.pull_request.merged == true
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout repo
+ uses: actions/checkout@v4
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: 20
+
+ - name: Get PR author username
+ if: github.event_name == 'pull_request'
+ id: get_pr_author
+ run: echo "username=${{ github.event.pull_request.user.login }}" >> $GITHUB_OUTPUT
+
+ - name: Get committer username (for push)
+ if: github.event_name == 'push'
+ id: get_committer
+ run: echo "username=${{ github.actor }}" >> $GITHUB_OUTPUT
+
+ - name: Add contributor to README
+ env:
+ CONTRIBUTOR_USERNAME: ${{ steps.get_pr_author.outputs.username || steps.get_committer.outputs.username }}
+ run: |
+ node .github/scripts/add-contributor.js
+
+ - name: Commit changes
+ uses: stefanzweifel/git-auto-commit-action@v5
+ with:
+ commit_message: "chore: add ${{ steps.get_pr_author.outputs.username || steps.get_committer.outputs.username }} to Contributors in README"
+ branch: main
diff --git a/challenges/2025-06-28.json b/challenges/2025-06-28.json
index a87698f..5d7406a 100644
--- a/challenges/2025-06-28.json
+++ b/challenges/2025-06-28.json
@@ -2,7 +2,7 @@
{
"event": "Profile Submission [PS]",
"date": "2025-06-28",
- "status": "Active",
+ "status": "Completed",
"projects": [
{
@@ -131,7 +131,36 @@
"linkedin": "",
"instagram": "https://www.instagram.com/kartikeygupta0311/"
}
- }
+ },
+
+ {
+ "projectName": "ps_vikash",
+ "studentName": "vikash",
+ "rollNo": "240108083",
+ "branch": "Information Technology",
+ "college": "Harcourt Butler Technical University",
+ "liveLink": "https://studentcard1.vercel.app/",
+ "socials": {
+ "github": "https://github.com/vikash2309",
+ "linkedin": "https://www.linkedin.com/in/vikash-chaudhary-75b495346/",
+ "instagram": "https://www.instagram.com/vikash_chaudhary9031/"
+ }
+},
+ {
+ "projectName": "ps_sumit",
+ "studentName": "Sumit Singh Gautam",
+ "rollNo": "240104073",
+ "branch": "Computer Science & Engineering",
+ "college": "Harcourt Butler Technical University",
+ "liveLink": "https://sumitbhai9c.github.io/basic-portfolio/",
+ "socials": {
+ "github": "https://github.com/SumitBhai9c",
+ "linkedin": "https://www.linkedin.com/in/sumit-singh-gautam-209b48324",
+ "instagram": "https://www.instagram.com/sumitsinghgautam9c"
+ }
+}
+
+
]
}
]
diff --git a/challenges/2025-07-05.json b/challenges/2025-07-05.json
new file mode 100644
index 0000000..a3c900d
--- /dev/null
+++ b/challenges/2025-07-05.json
@@ -0,0 +1,77 @@
+[
+ {
+ "event": "Frontend Challenge 01 [FC01]",
+ "date": "2025-07-05",
+ "status": "Active",
+ "projects": [
+ {
+ "projectName": "FC01-ravixalgorithm",
+ "studentName": "Ravi Pratap Singh",
+ "rollNo": "230104047",
+ "branch": "Computer Science & Engineering",
+ "college": "Harcourt Butler Technical University",
+ "liveLink": "https://briskpay.netlify.app/",
+ "socials": {
+ "github": "https://github.com/ravixalgorithm",
+ "linkedin": "https://www.linkedin.com/in/ravixalgorithm",
+ "instagram": "https://instagram.com/ravixalgorithm"
+ }
+ },
+ {
+ "projectName": "PS_Lokesh",
+ "studentName": "Lokeh Singhal",
+ "rollNo": "240108039",
+ "branch": "Information Technology",
+ "college": "Harcourt Butler Technical University",
+ "liveLink": "https://briskpay2.netlify.app/",
+ "socials": {
+ "github": "https://github.com/lokesh-singhal",
+ "linkedin": "https://www.linkedin.com/in/lokesh-singhal",
+ "instagram": "https://instagram.com/singhal_g_"
+ }
+ },
+ {
+
+ "projectName": "FC01_vikash",
+ "studentName": "vikash",
+ "rollNo": "240108083",
+ "branch": "Information Technology",
+ "college": "Harcourt Butler Technical University",
+ "liveLink": "https://briskpay-one.vercel.app/",
+ "socials": {
+ "github": "https://github.com/vikash2309",
+ "linkedin": "https://www.linkedin.com/in/vikash-chaudhary-75b495346/",
+ "instagram": "https://www.instagram.com/vikash_chaudhary9031/"
+ }
+ },
+ {
+ "projectName": "FC01_AYUSHI",
+ "studentName": "Ayushi Saha",
+ "rollNo": "23IUT0010111",
+ "branch": "Computer Science & Engineering",
+ "college": "ICFAI UNIVERSITY OF TRIPURA",
+ "liveLink": "https://briskpay-five.vercel.app/",
+ "socials": {
+ "github": "https://github.com/ayuushisaha",
+ "linkedin": "https://www.linkedin.com/in/ayushi-s-6a73bb35b",
+ "instagram": "https://instagram.com/ayuuushiiz"
+ }
+ },
+ {
+
+ "projectName": "FC01_VEDANT",
+ "studentName": "Vedant Patil",
+ "rollNo": "23IUT0010115",
+ "branch": "IT",
+ "college": "SPPU UNIVERSITY",
+ "liveLink": "https://686b6859ef402d3062537666--vocal-cobbler-fa7a49.netlify.app/",
+ "socials": {
+ "github": "https://github.com/Vedant515",
+ "linkedin": "https://www.linkedin.com/in/vedant-patil-932160339/",
+ "instagram": "https://www.instagram.com/vedant_1512_?igsh=dThha3ltczl5ZWZk"
+ }
+ }
+ ]
+
+ }
+]
diff --git a/readme.md b/readme.md
index 293f308..4a5d25a 100644
--- a/readme.md
+++ b/readme.md
@@ -1,48 +1,402 @@
-# ๐ Challenge Submissions Webpage
+
-Welcome to the **Codextream Community Challenge Submissions** repository!
+# ๐ Frontend Challenges Submission Platform
-This is a simple and modern webpage where students can showcase their projects for various challenges and events.
-> ๐ **Just fork the repo, add your project details, and open a Pull Request to get featured!**
+**A Modern Showcase Platform for Student Projects by CodeXtream Community**
-
+[](https://developer.mozilla.org/en-US/docs/Web/HTML)
+[](https://developer.mozilla.org/en-US/docs/Web/CSS)
+[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+[](https://tailwindcss.com/)
+
+[](https://github.com/CodeXtream-Community-cc/frontend-challenges-submission/stargazers)
+[](https://github.com/CodeXtream-Community-cc/frontend-challenges-submission/network/members)
+[](https://github.com/CodeXtream-Community-cc/frontend-challenges-submission/issues)
+[](https://github.com/CodeXtream-Community-cc/frontend-challenges-submission/pulls)
+
+[๐ Live Demo](https://codextreamchallengesubmission.netlify.app/) | [๐ Contribute](#-how-to-contribute) | [๐ฅ Community](#-contributors--community) | [๐ง Support](#-support-and-contact)
+
+
+
+---
+
+## ๐ Table of Contents
+
+- [๐ฏ About](#-about)
+- [โจ Features](#-features)
+- [๐ Getting Started](#-getting-started)
+- [๐ How to Contribute](#-how-to-contribute)
+- [๐๏ธ Project Structure](#๏ธ-project-structure)
+- [๐ป Technologies Used](#-technologies-used)
+- [๐ค Community Guidelines](#-community-guidelines)
+- [๐ ๏ธ Development](#๏ธ-development)
+- [๐ฅ Contributors & Community](#-contributors--community)
+- [๐ License](#-license)
+- [๐ง Support and Contact](#-support-and-contact)
+
+---
+
+## ๐ฏ About
+
+Welcome to the **CodeXtream Community Frontend Challenges Submission Platform** - a modern, responsive web application designed to showcase student projects from various coding challenges and hackathons. This platform serves as a centralized hub where aspiring developers can display their creativity, connect with peers, and build their coding portfolio.
+
+### ๐ Our Mission
+
+> **Empowering students to showcase their coding journey and connect with a vibrant community of developers.**
+
+- **๐ Showcase Talent**: Provide a professional platform for students to display their frontend projects
+- **๐ค Build Community**: Connect developers through shared learning experiences and project collaboration
+- **๐ Track Progress**: Document coding journey through challenge submissions and portfolio building
+- **๐ก Inspire Innovation**: Encourage creative solutions and best practices in frontend development
+
+---
+
+## โจ Features
+
+### ๐จ **Modern Design**
+- **Dark Glassmorphism Theme**: Beautiful, modern UI with glass-effect design elements
+- **Responsive Layout**: Optimized for all devices - desktop, tablet, and mobile
+- **Smooth Animations**: Engaging user experience with subtle animations and transitions
+
+### ๐ **Smart Search & Discovery**
+- **Multi-Parameter Search**: Search by project name, student name, college, branch, or event
+- **Real-time Filtering**: Instant results as you type
+- **Event-based Organization**: Projects grouped by challenge dates and events
+
+### ๐ฅ **Social Integration**
+- **Social Links**: Direct links to contributors' GitHub, LinkedIn, and Instagram profiles
+- **Community Building**: Easy networking and connection with fellow developers
+- **Professional Networking**: Enhanced visibility for career opportunities
+
+### ๐ **Easy Submission Process**
+- **Simple JSON Format**: Straightforward project submission via JSON files
+- **Automated Integration**: GitHub Actions for seamless contributor management
+- **Pull Request Workflow**: Standard Git workflow for collaboration and review
+
+### ๐ **Project Showcase**
+- **Live Demo Links**: Direct access to deployed projects
+- **Detailed Information**: Student details, college, branch, and project information
+- **Professional Presentation**: Clean, card-based layout for optimal viewing
+
+---
+
+## ๐ Getting Started
+
+### ๐ Prerequisites
+
+Before you begin, ensure you have:
+- A modern web browser (Chrome, Firefox, Safari, Edge)
+- Basic knowledge of HTML, CSS, and JavaScript
+- A GitHub account for contributions
+- Git installed on your local machine (for development)
+
+### ๐ง Quick Setup
+
+#### Method 1: Direct Browser Access (Recommended for Viewing)
+```bash
+# Simply open the live demo
+https://codextreamchallengesubmission.netlify.app/
+```
+
+#### Method 2: Local Development Setup
+```bash
+# 1. Clone the repository
+git clone https://github.com/CodeXtream-Community-cc/frontend-challenges-submission.git
+
+# 2. Navigate to project directory
+cd frontend-challenges-submission
+
+# 3. Option A: Open directly in browser
+open index.html
+
+# 3. Option B: Use Live Server (Recommended)
+# Install Live Server extension in VS Code
+# Right-click on index.html and select "Open with Live Server"
+
+# 3. Option C: Use Python's built-in server
+python -m http.server 8000
+# Then visit http://localhost:8000
+```
+
+#### Method 3: Using Node.js HTTP Server
+```bash
+# Install http-server globally
+npm install -g http-server
+
+# Start the server
+http-server
+
+# Visit http://localhost:8080
+```
+
+---
## ๐ How to Contribute
-1๏ธโฃ **Fork** this repository.
+We welcome contributions from developers of all skill levels! Follow these steps to add your project to our showcase:
-2๏ธโฃ **Add your project** in the correct `challenges/YYYY-MM-DD.json` file.
+### ๐ด Step 1: Fork the Repository
-> **โจ Tip: Include your social links (GitHub, LinkedIn, etc.) โ it helps others connect with your work!**
+1. Click the **"Fork"** button at the top right of this repository
+2. โญ **Star** this repository to show your support!
+
+### ๐ Step 2: Add Your Project
+
+1. Navigate to the `challenges/` directory
+2. Find the appropriate `YYYY-MM-DD.json` file for your event date
+3. Add your project information in the following format:
-โ
Example:
```json
{
- "projectName": "",
- "studentName": "Ayushi Saha",
- "rollNo": "23IUT0010111",
- "branch": "Computer Science & Engineering",
- "college": "ICFAI UNIVERSITY OF TRIPURA",
- "liveLink": "https://ayuushisaha.github.io/portfolio/",
+ "projectName": "Your Amazing Project Name",
+ "studentName": "Your Full Name",
+ "rollNo": "Your Roll Number",
+ "branch": "Your Academic Branch",
+ "college": "Your College/University Name",
+ "liveLink": "https://your-deployed-project-url.com",
"socials": {
- "github": "https://github.com/ayuushisaha",
- "linkedin": "https://www.linkedin.com/in/ayushi-s-6a73bb35b",
- "instagram": "https://instagram.com/ayuuushiiz"
+ "github": "https://github.com/yourusername",
+ "linkedin": "https://www.linkedin.com/in/yourprofile",
+ "instagram": "https://instagram.com/yourhandle"
}
}
```
-3๏ธโฃ **Open a Pull Request** โ your project will appear on the site once your PR is merged!
+#### ๐ Field Descriptions:
+- **`projectName`**: A descriptive name for your project
+- **`studentName`**: Your full name as you'd like it displayed
+- **`rollNo`**: Your student roll number or ID
+- **`branch`**: Your field of study (e.g., "Computer Science & Engineering")
+- **`college`**: Your educational institution name
+- **`liveLink`**: URL to your deployed project (GitHub Pages, Netlify, Vercel, etc.)
+- **`socials`**: Your social media profiles (all optional but recommended)
+
+> **๐ก Pro Tip**: Including your social links helps others connect with your work and can lead to networking opportunities!
+
+### ๐ Step 3: Submit Your Changes
+
+1. **Commit your changes** with a descriptive message:
+ ```bash
+ git add .
+ git commit -m "Add [Your Name]'s project submission"
+ ```
+
+2. **Push to your fork**:
+ ```bash
+ git push origin main
+ ```
+
+3. **Open a Pull Request**:
+ - Go to your forked repository on GitHub
+ - Click "New Pull Request"
+ - Add a descriptive title and description
+ - Submit your PR for review
+
+### โ
Step 4: Celebrate!
+
+Once your PR is reviewed and merged:
+- ๐ Your project will appear on the live website
+- ๐ค You'll be automatically added to our Contributors section
+- ๐ Your work will be visible to the entire community
+
+---
+
+## ๐๏ธ Project Structure
+
+```
+frontend-challenges-submission/
+โโโ ๐ .github/ # GitHub configuration
+โ โโโ ๐ scripts/ # Automation scripts
+โ โ โโโ add-contributor.js # Auto-add contributors
+โ โโโ ๐ workflows/ # GitHub Actions
+โ โโโ add-contributor-on-merge.yml
+โโโ ๐ challenges/ # Project submissions
+โ โโโ 2025-06-28.json # Event-specific submissions
+โ โโโ 2025-07-05.json # Organized by date
+โโโ ๐ src/ # Source code
+โ โโโ script.js # Main JavaScript functionality
+โโโ ๐ index.html # Main webpage
+โโโ ๐ readme.md # Project documentation
+```
+
+### ๐ Directory Details:
+
+- **`.github/`**: Contains GitHub Actions workflows and automation scripts
+- **`challenges/`**: JSON files containing project submissions, organized by event dates
+- **`src/`**: JavaScript source code for the web application functionality
+- **`index.html`**: The main HTML file with embedded CSS and the complete web application
+- **`readme.md`**: This comprehensive documentation file
+
+---
+
+## ๐ป Technologies Used
+
+### ๐จ **Frontend Technologies**
+- **HTML5**: Semantic markup and structure
+- **CSS3**: Custom properties, animations, and responsive design
+- **JavaScript (ES6+)**: Modern JavaScript with async/await, modules, and DOM manipulation
+
+### ๐จ **UI Frameworks & Libraries**
+- **[Tailwind CSS](https://tailwindcss.com/)**: Utility-first CSS framework for rapid UI development
+- **[Font Awesome](https://fontawesome.com/)**: Icon library for social media and UI icons
+- **[Google Fonts](https://fonts.google.com/)**: Custom typography with Space Grotesk font family
+
+### ๐ ๏ธ **Development Tools**
+- **JSON**: Data structure for project submissions
+- **GitHub Actions**: Automated workflows for contributor management
+- **Live Server**: Development server for local testing
+
+### ๐ง **Browser APIs Used**
+- **Fetch API**: For loading JSON data asynchronously
+- **DOM Manipulation**: Dynamic content rendering and search functionality
+- **CSS Custom Properties**: Theme management and design consistency
+
+---
+
+## ๐ค Community Guidelines
+
+### ๐ **Code of Conduct**
+
+We are committed to providing a welcoming and inspiring community for all. Please follow these guidelines:
+
+#### โ
**Do's**
+- โจ Be respectful and inclusive in all interactions
+- ๐ฏ Provide constructive feedback and suggestions
+- ๐ Help newcomers and answer questions
+- ๐ Share resources and learning materials
+- ๐ Celebrate others' achievements and progress
+
+#### โ **Don'ts**
+- ๐ซ Use discriminatory or offensive language
+- ๐ซ Spam or promote unrelated content
+- ๐ซ Submit plagiarized or inappropriate projects
+- ๐ซ Engage in harassment or trolling behavior
+
+### ๐ **Submission Guidelines**
+
+#### โ
**Project Requirements**
+- Must be your own original work
+- Should be a functional frontend project
+- Must include a working live demo link
+- Should demonstrate coding skills and creativity
+
+#### ๐จ **Quality Standards**
+- Code should be clean and well-organized
+- Project should be responsive and accessible
+- Live demo should be functional and bug-free
+- README or documentation is encouraged
+
+### ๐ค **Community Support**
+
+- ๐ฌ Join our discussions in Issues and Pull Requests
+- ๐ Ask questions - no question is too small!
+- ๐ Share learning resources and tutorials
+- ๐ค Collaborate on projects and learn together
+
+---
+
+## ๐ ๏ธ Development
+
+### ๐ง **Setting Up Development Environment**
+
+```bash
+# Clone the repository
+git clone https://github.com/CodeXtream-Community-cc/frontend-challenges-submission.git
+cd frontend-challenges-submission
+
+# Start development server
+# Option 1: VS Code Live Server (Recommended)
+code . # Open in VS Code, then use Live Server extension
+
+# Option 2: Python HTTP Server
+python -m http.server 8000
+
+# Option 3: Node.js HTTP Server
+npx http-server -p 8000
+```
+
+### ๐งช **Testing Your Changes**
+
+1. **Local Testing**: Always test your changes locally before submitting
+2. **Cross-browser Testing**: Check compatibility across different browsers
+3. **Responsive Testing**: Ensure your changes work on mobile devices
+4. **JSON Validation**: Validate JSON syntax before submitting
+
+### ๐ **Code Quality**
+
+- Follow existing code style and conventions
+- Use meaningful variable and function names
+- Add comments for complex logic
+- Keep functions small and focused
+
+---
+
+## ๐ฅ Contributors & Community
+
+### ๐ **Connect with CodeXtream Community**
+
+- ๐ **GitHub**: [CodeXtream Community](https://github.com/CodeXtream-Community-cc)
+- ๐ **Website**: [codextream.in](https://codextream.in)
+- ๐ผ **LinkedIn**: Follow us for updates and opportunities
+
+### ๐ฅ **Contributors**
+
+We extend our heartfelt gratitude to all contributors who have made this project possible:
+
+## Contributors
+- [@ravixalgorithm](https://github.com/ravixalgorithm)
+- [@vaishnavi-singh5](https://github.com/vaishnavi-singh5)
+- [@lokesh-singhal](https://github.com/lokesh-singhal)
+
+> **Want to see your name here?** [Contribute to the project](#-how-to-contribute) and you'll be automatically added!
+
+### ๐ **Recognition**
+
+- All contributors are automatically recognized in our README
+- Outstanding contributions are highlighted in our community channels
+- Top contributors may receive special recognition and badges
+
+---
+- [@Copilot](https://github.com/Copilot)
+
+## ๐ License
+
+This project is open source and available under the [MIT License](LICENSE). Feel free to fork, modify, and distribute as needed.
+
+---
+
+## ๐ง Support and Contact
+
+### ๐ **Need Help?**
+
+- ๐ **Issues**: [Create an issue](https://github.com/CodeXtream-Community-cc/frontend-challenges-submission/issues) for bugs or feature requests
+- ๐ฌ **Discussions**: Join our community discussions for questions and suggestions
+- ๐ง **Email**: Contact us for partnership opportunities or general inquiries
+
+### ๐ **Stay Updated**
+
+- โญ **Star this repository** to receive updates
+- ๐ **Watch the repository** for new releases and features
+- ๐ฆ **Follow CodeXtream Community** on social media
+
+---
+
+
+
+### ๐ **Made with โค๏ธ by CodeXtream Community**
+
+**Founded by [Ravixalgorithm](https://github.com/ravixalgorithm)**
+
+*Empowering the next generation of developers, one project at a time.*
-## ๐ป View or Test Locally
+[](https://github.com/CodeXtream-Community-cc)
-๐ Open `index.html` in your browser.
+**[โฌ๏ธ Back to Top](#-frontend-challenges-submission-platform)**
-If you want to run it locally with fetch working: Use **VSCode Live Server**
+
-
+---
## ๐ Thanks for being part of Codextream!
-Made with โค๏ธ by Codextream Community and Created by [Ravixalgorithm](https://github.com/ravixalgorithm)
diff --git a/src/script.js b/src/script.js
index ba1ed4d..7c4473c 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,6 +1,7 @@
// List all JSON files for each date here
const jsonFiles = [
"/challenges/2025-06-28.json",
+ "/challenges/2025-07-05.json"
];
let allEvents = [];