tutorial: submit an tutorial integrating our SocialShareButton with different tech stack repo from our org

[kpj2006]

we are looking for tutorials, preferably yt video, demonstrating the functionality of our Social-Share-Button in any frontend repo of our org which help other devs while integrating and use the button effectively.

this idea is also part of potential ideas for GSOC 2026 (https://github.com/AOSSIE-Org/Info/blob/main/GSoC-Ideas/2026/SEO.md) that's why we need tutorials for devs for demonstrating button's functionality.

in this tuturial:

• Clone any repository from our organization (not this repository).
• Follow the instructions provided in this repository’s README according to that's repo tech stack.
• Run the project locally and ensure proper functionality.
• Create a tutorial video and submit a PR with the video link added to the README demo section.

DO NOT demonstrate more than one tech stack in one video.

we prefer not to add any simulation or anything in the video, just submit a basic video but creativity should be welcomed. however track the timer also, should not be more than 150 sec.

you should upload video on your drive or any platform you are using however video must be PUBLICly accessible(later we will upload it on AOSSIE yt).

for reference:
https://www.youtube.com/watch?v=cLJaT-8rEvQ (integrating next.js app router site with our button)

tech stack in which we have done development:

you may close your pr if your pr is changing any code apart from adding tutorial video link in readme demo section.

do not ask for assign just submit link in readme

[amankv1234]

Hi @kpj2006,

I have implemented one of the open-source best practices by adding a CONTRIBUTING.md file aligned with the template repository.

PR: #22

Kindly review it and let me know if any modifications, corrections, or additional improvements are required. I’ll be happy to make the necessary updates.

Thanks!

[AnshuPriya-1]

Hi @kpj2006,
I’m planning to create a tutorial video integrating SocialShareButton with one of the frontend repositories from AOSSIE-Org (single tech stack, under 150 seconds as mentioned).
I’ll submit a PR with the video link added to the README demo section once completed.
Thanks!

[kpj2006]

go ahead!! pick any of the stack other than next.js(app router)

since stability nexus and Djed alliance are under AOSSIE umbrella, so you can also pick repos from those org also.

try to follow the flow in given attach tutorial. in starting, show how you import button in that frontend codebase, and then move on to functionality which part is minimum.

[Aarya-Chaudhari]

Hello @kpj2006
I have started working on this issue as you told me to do.
I will update you once I complete the updates.
Thanks

[lakshyasarve]

Hi @kpj2006, could you please assign this issue to me?

[kpj2006]

@CodeRabbit can you split this issue in sub-issues as this contains tutorail to be record in
Create React App
▲ Next.js (App Router)
Next.js (Pages Router)
Vite/Vue / Angular

according to our our new guidelines https://github.com/AOSSIE-Org/SocialShareButton/blob/main/docs/demo-video-instruction.md.

[coderabbitai]

Coding Plan

Summary

• Select an AOSSIE frontend repository using a tech stack not yet covered by existing tutorials (avoiding Next.js App Router)
• Create a sub-150-second tutorial video demonstrating real integration following README instructions
• Submit a minimal PR that only adds the new tutorial link to the README demo section, matching the existing plain URL format with tech stack identification

Design Choices

Design Choice 1: Which tech stack to demonstrate in the tutorial video?

Options Considered:

1. React (Create React App) - Common, well-documented in README
2. Next.js Pages Router - Alternative Next.js pattern, different from existing tutorial
3. Vite/Vue - Modern build tool, growing popularity
4. Preact - Lightweight React alternative with enhanced wrapper
5. Angular - Enterprise framework option

Chosen Option: 1

Rationale: Option 1 or 3: Select based on which AOSSIE repositories are available. The existing tutorial covers Next.js App Router, so React (CRA) or Vite would provide complementary coverage for developers. Choose the tech stack that matches an available AOSSIE repository.

Design Choice 2: What format should the tutorial link use in README?

Options Considered:

1. Plain URL format (matching existing style): Tutorial: https://youtu.be/...
2. Markdown link format: [Tutorial Name](https://youtu.be/...)
3. Descriptive format with tech stack: Tutorial (React): https://youtu.be/...

Chosen Option: 3

Rationale: Option 3: Use descriptive format with tech stack identifier to differentiate multiple tutorials, while maintaining consistency with the plain URL approach (e.g., React Tutorial: https://youtu.be/...).

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Tutorial Video Creation (External Work)

This phase covers the external preparation and video creation work that must be completed before the PR can be submitted.

Task 1: Repository Selection and Setup

Select an appropriate AOSSIE organization repository and prepare the development environment.

• Browse AOSSIE GitHub organization to identify a frontend repository matching one of the documented tech stacks (React, Next.js Pages Router, Vite, Vue, Angular, or Preact)
• Avoid selecting a repository that uses Next.js App Router since that's already covered by the existing tutorial
• Clone the selected repository locally
• Install dependencies and verify the project runs successfully before integration

Task 2: SocialShareButton Integration

Follow the README integration instructions for the repository's tech stack.

• Reference the appropriate <details> section in the README for the selected tech stack
• Add CDN links for CSS and JS to the project's main HTML/layout file
• Place the container <div id="share-button"></div> in an appropriate component
• Initialize SocialShareButton using the framework-specific lifecycle hook
• Test share functionality across multiple platforms to ensure proper operation

Task 3: Tutorial Video Recording

Record a concise demonstration video following the ticket guidelines.

• Plan video flow: repository clone → dependency install → integration steps → functionality demonstration
• Keep total duration under 150 seconds as specified
• Focus on one tech stack only - do not cover multiple frameworks
• Demonstrate actual share functionality working in the browser
• Avoid simulations or artificial demonstrations; show real integration workflow
• Upload completed video to a publicly accessible platform (YouTube, Google Drive with public link, etc.)

🤖 Prompt for AI agents

This phase is entirely external work (video creation) and does not involve code
generation. Complete the following steps manually before proceeding to Phase 2:

- Browse the AOSSIE GitHub organization to find a suitable frontend repository
using a tech stack other than Next.js App Router (e.g., React/CRA, Vite/Vue,
Preact, Angular, or Next.js Pages Router)
- Clone the selected repository and install dependencies to confirm it runs
successfully
- Follow the README's `<details>` section for the chosen tech stack to integrate
SocialShareButton:
  - Add the CDN CSS and JS links to the main HTML/layout file
  - Insert `<div id="share-button"></div>` in an appropriate component
  - Initialize `SocialShareButton` via the framework-specific lifecycle hook
- Record a video (under 150 seconds) showing: repository clone → dependency
install → integration steps → live functionality in browser
- Upload the completed video to a publicly accessible platform and retain the
shareable URL for use in Phase 2

Phase 2: README Update

This phase covers the only code change required - adding the tutorial link to the demo section.

Add Tutorial Video Link to Demo Section

Update the README demo section with the new tutorial link.

• Modify README.md at the demo section (around lines 810-813)
• Add a new line following the existing tutorial link format
• Include the tech stack identifier to distinguish from other tutorials (e.g., React Tutorial: https://...)
• Ensure the video URL is the public/shareable version
• Verify no other files are modified in the PR - changes must be limited to README demo section only

🤖 Prompt for AI agents

This phase makes a single, minimal change to `README.md`. Open the file and
navigate to the demo section (around lines 810-813).

- Add a new line after the existing tutorial link entry
- Format the new entry using the descriptive plain-URL style with a tech stack
identifier, e.g.: `React Tutorial: https://youtu.be/<video-id>`
- Replace the placeholder URL with the actual public video URL obtained in Phase
1
- Do not modify any other files — the PR must contain changes limited to the
README demo section only
- Confirm the video URL used is the public/shareable version

Research

The SocialShareButton project is a vanilla JS library with React and Preact wrappers. The README contains comprehensive integration instructions for 5 tech stacks (React/CRA, Next.js App Router, Next.js Pages Router, Vite/Vue/Angular, and Preact). The current demo section (lines 810-813) is minimal, containing a reference to the local index.html and a single YouTube tutorial link in plain URL format. The existing tutorial demonstrates Next.js App Router integration.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase is entirely external work (video creation) and does not involve code
generation. Complete the following steps manually before proceeding to Phase 2:

- Browse the AOSSIE GitHub organization to find a suitable frontend repository
using a tech stack other than Next.js App Router (e.g., React/CRA, Vite/Vue,
Preact, Angular, or Next.js Pages Router)
- Clone the selected repository and install dependencies to confirm it runs
successfully
- Follow the README's `<details>` section for the chosen tech stack to integrate
SocialShareButton:
  - Add the CDN CSS and JS links to the main HTML/layout file
  - Insert `<div id="share-button"></div>` in an appropriate component
  - Initialize `SocialShareButton` via the framework-specific lifecycle hook
- Record a video (under 150 seconds) showing: repository clone → dependency
install → integration steps → live functionality in browser
- Upload the completed video to a publicly accessible platform and retain the
shareable URL for use in Phase 2
===============================================================================

Task: 2

This phase makes a single, minimal change to `README.md`. Open the file and
navigate to the demo section (around lines 810-813).

- Add a new line after the existing tutorial link entry
- Format the new entry using the descriptive plain-URL style with a tech stack
identifier, e.g.: `React Tutorial: https://youtu.be/<video-id>`
- Replace the placeholder URL with the actual public video URL obtained in Phase
1
- Do not modify any other files — the PR must contain changes limited to the
README demo section only
- Confirm the video URL used is the public/shareable version

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[lakshyasarve]

Hi there, please find below tutorials for -
Vite - https://drive.google.com/file/d/1HTSD1l4nsR4jhjV9RPf9DTX9VNNJeF0x/view?usp=sharing
Create React App - https://drive.google.com/file/d/1InsN3FLGW-LbX5aIpB48gzo5RYorlFJb/view?usp=sharing

Please let me know incase of any changes