Skip to content

Added Button for downloading Resonate from Google Play Store#518

Closed
TheGoodUser wants to merge 1 commit intoAOSSIE-Org:masterfrom
TheGoodUser:readme-updates
Closed

Added Button for downloading Resonate from Google Play Store#518
TheGoodUser wants to merge 1 commit intoAOSSIE-Org:masterfrom
TheGoodUser:readme-updates

Conversation

@TheGoodUser
Copy link
Contributor

@TheGoodUser TheGoodUser commented Sep 1, 2025

Description

Added an attractive download section to the README with Google Play Store button to improve user experience and app discoverability. The section includes professional styling with animations and clear call-to-action text.

Fixes: #517

Type of change

  • Documentation update

Preview

Download Section Preview

How Has This Been Tested?

  • Verified download link works correctly
  • Tested responsive design on different screen sizes
  • Confirmed animations and hover effects function properly
  • Validated HTML/CSS renders correctly in markdown

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation
  • I have checked my code and corrected any misspellings

Summary by CodeRabbit

  • Documentation
    • Added a promotional “Download Resonate” banner with shimmering gradient and Google Play badge.
    • Expanded Features with three new items: Stories with synced lyrics (WIP), Pair Chatting, and Friends/Profiles (coming soon).
    • Reworked App Screenshots into a two-row, three-column gallery with updated captions and images.
    • Introduced Getting Started elements and preserved onboarding reference.
    • Enhanced Contributing sections, added “Thanks To All Contributors,” and updated maintainer contact links.
    • Applied minor formatting tweaks and whitespace cleanup.

@coderabbitai
Copy link

coderabbitai bot commented Sep 1, 2025

Walkthrough

The README was updated with a promotional banner, expanded features list, reworked screenshots gallery, added Getting Started and Contributing sections, updated maintainer/contact info, and general formatting/whitespace cleanup.

Changes

Cohort / File(s) Summary
Documentation: README updates
README.md
Added center-aligned “Download Resonate” banner with shimmer animation and Google Play badge; expanded Features (items 4–6); minor LiveKit bullet tweak; reworked App Screenshots into 2x3 gallery with new captions/assets; introduced Getting Started elements; added Contributing and contributors section/image; refreshed maintainer and Discord/Email links; formatting and whitespace cleanup.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

I nudge the README with a gentle thump,
New banners gleam—shimmer, hop, and jump.
Features sprout like clover in spring,
Screenshots line up in a tidy ring.
“Contribute!” I twitch, ears high and bright—
Let’s ship together, by moonlit byte. 🐇✨

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (9)
README.md (9)

3-5: Correct alt text for the AOSSIE logo.

Alt should describe the actual image.

-<img src="assets/images/aossie_logo.png" alt="Resonate logo" width="150" height="auto" />
+<img src="assets/images/aossie_logo.png" alt="AOSSIE logo" width="150" height="auto" />

14-17: Use raw asset URLs to avoid “blob” pages failing to render as images.

Switch to raw.githubusercontent.com for reliability.

-<source media="(prefers-color-scheme: dark)" align="center" srcset="https://github.com/appwrite/website/blob/main/static/images/logos/appwrite.svg"      
+<source media="(prefers-color-scheme: dark)" align="center" srcset="https://raw.githubusercontent.com/appwrite/website/main/static/images/logos/appwrite.svg"      
   alt="Appwrite Logo" width="200">
-<img alt="Appwrite Logo" align="center" src="https://github.com/appwrite/website/blob/main/static/images/logos/appwrite-light.svg" alt="Appwrite Logo" 
+<img alt="Appwrite Logo" align="center" src="https://raw.githubusercontent.com/appwrite/website/main/static/images/logos/appwrite-light.svg" alt="Appwrite Logo" 
   width="200">

74-76: Fix grammar/typos in Features.

Improves clarity and professionalism.

-4. Listen to and Stories as chapters with synced lyrics, browse through entire catalog of stories following your favourate creators and waiting for their latest chapter/story releases. Post your own stories having chapters. (work in progess)
+4. Listen to Stories as chapters with synced lyrics; browse the catalog of stories, follow your favorite creators, and track their latest chapter/story releases. Post your own stories with chapters. (work in progress)
-6. Friend People/Profiles enabling your self to talk on voice calls/realtime messaging with them (coming soon)
+6. Friends/Profiles enabling voice calls and real-time messaging (coming soon)

83-83: Prefer the concise term “WebRTC.”

Minor terminology polish.

-3.  **LiveKit** - Web Real-Time Communication
+3.  **LiveKit** - WebRTC

91-95: Polish Getting Started copy and fix capitalization/link.

Also standardize “LiveKit.”

-Resonate is a wide project taking use of other software solutions like Appwrite and Livekit, starting up can be a little challenging
+Resonate is a broad project that uses other software solutions like Appwrite and LiveKit, so getting started can be a little challenging.
-
-We offer a guide for walking you through setting up the entire project, including a script that automates the set up of the backend environment for you.
-Please go through and strictly follow the [Onboarding Guide](https://github.com/Aarush-Acharya/Resonate/blob/master/ONBOARDING.md) for setting up the project for development and further contribution
+We offer a guide to walk you through setting up the entire project, including a script that automates the backend environment setup.
+Please follow the [Onboarding Guide](https://github.com/AOSSIE-Org/Resonate/blob/master/ONBOARDING.md) to set up the project for development and contributions.

Note: verify the correct ONBOARDING.md location before merging.


100-102: Add alt text to screenshot images (accessibility, MD045).

-| <img src= "https://github.com/user-attachments/assets/e76147b1-0e51-4852-8198-06bbc975b25c" width="260" height="auto" />  | <img src="https://github.com/user-attachments/assets/ad62eecb-b621-4c31-a01c-001ff5462b28" width="250" height="auto" />    | <img src="https://github.com/user-attachments/assets/31ce6e73-8dca-4e2d-8f48-c22480fa1332" width="250" height="auto" />    |
+| <img alt="Login Screen (Forest)" src="https://github.com/user-attachments/assets/e76147b1-0e51-4852-8198-06bbc975b25c" width="260" height="auto" />  | <img alt="Home Screen (Time)" src="https://github.com/user-attachments/assets/ad62eecb-b621-4c31-a01c-001ff5462b28" width="250" height="auto" />    | <img alt="Create Room Screen (Time)" src="https://github.com/user-attachments/assets/31ce6e73-8dca-4e2d-8f48-c22480fa1332" width="250" height="auto" />    |

104-106: Add alt text to screenshot images (accessibility, MD045).

-| <img src="https://github.com/user-attachments/assets/f1d6e62f-5f25-47c1-9f59-e165d7018c0c" width="250" height="auto" /> | <img src="https://github.com/user-attachments/assets/b9dfe363-79b1-4eee-8d00-28f5c14f93ee" width="250" height="auto" /> | <img src="https://github.com/user-attachments/assets/c7657be8-bce2-4c3a-aee3-dd3cc33379a2" width="250" height="auto"/> |
+| <img alt="Room Screen (Cream)" src="https://github.com/user-attachments/assets/f1d6e62f-5f25-47c1-9f59-e165d7018c0c" width="250" height="auto" /> | <img alt="Profile Screen (Amber)" src="https://github.com/user-attachments/assets/b9dfe363-79b1-4eee-8d00-28f5c14f93ee" width="250" height="auto" /> | <img alt="Explore Story (Forest)" src="https://github.com/user-attachments/assets/c7657be8-bce2-4c3a-aee3-dd3cc33379a2" width="250" height="auto"/> |

108-110: Add alt text to screenshot images (accessibility, MD045).

-| <img src="https://github.com/user-attachments/assets/ba7da784-48a6-4512-a4c8-9f12b8ad13c1" width="250" height="auto" /> | <img src="https://github.com/user-attachments/assets/ba9273f2-ceef-441d-8f94-4e0bc53b3e99" width="250" height="auto" /> | <img src="https://github.com/user-attachments/assets/a46c7da4-2df4-4c62-9e4c-9c92102339e9" width="250" height="auto"/> |
+| <img alt="Explore Story (Amber)" src="https://github.com/user-attachments/assets/ba7da784-48a6-4512-a4c8-9f12b8ad13c1" width="250" height="auto" /> | <img alt="Theme Screen (Vintage)" src="https://github.com/user-attachments/assets/ba9273f2-ceef-441d-8f94-4e0bc53b3e99" width="250" height="auto" /> | <img alt="Upcoming Room Screen (Cream)" src="https://github.com/user-attachments/assets/a46c7da4-2df4-4c62-9e4c-9c92102339e9" width="250" height="auto"/> |

12-27: Logos sourced from third-party repos may change; consider vendoring or pinning.

To avoid future breakage, copy assets into this repo or pin to a specific tag/commit.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 153a4dc and 136ffdb.

📒 Files selected for processing (1)
  • README.md (4 hunks)
🧰 Additional context used
🪛 LanguageTool
README.md

[grammar] ~86-~86: There might be a mistake here.
Context: ...pository Links 1. Resonate Flutter App 2. [Resonate Backend](https://github.com/AOS...

(QB_NEW_EN)


[grammar] ~93-~93: There might be a mistake here.
Context: ...t up of the backend environment for you. Please go through and strictly follow th...

(QB_NEW_EN)


[grammar] ~100-~100: There might be a mistake here.
Context: ...een (Time) | Create Room Screen (Time) | | :--- | :--- | ...

(QB_NEW_EN)


[grammar] ~101-~101: There might be a mistake here.
Context: ... | :--- | :--- | | <img src= "https://github.com/user-att...

(QB_NEW_EN)


[grammar] ~126-~126: There might be a mistake here.
Context: ...! ## ✌️ Maintainers - Jaideep Prasad - [Chandan S Gowda](https://github.com/chan...

(QB_NEW_EN)


[grammar] ~133-~133: There might be a mistake here.
Context: ...e following channels: - Discord Server - Email <!-...

(QB_NEW_EN)

🪛 markdownlint-cli2 (0.17.2)
README.md

102-102: Images should have alternate text (alt text)

(MD045, no-alt-text)


102-102: Images should have alternate text (alt text)

(MD045, no-alt-text)


102-102: Images should have alternate text (alt text)

(MD045, no-alt-text)


106-106: Images should have alternate text (alt text)

(MD045, no-alt-text)


106-106: Images should have alternate text (alt text)

(MD045, no-alt-text)


106-106: Images should have alternate text (alt text)

(MD045, no-alt-text)


110-110: Images should have alternate text (alt text)

(MD045, no-alt-text)


110-110: Images should have alternate text (alt text)

(MD045, no-alt-text)


110-110: Images should have alternate text (alt text)

(MD045, no-alt-text)

🔇 Additional comments (2)
README.md (2)

118-118: Contributing note vs PR target mismatch (dev vs master).

Text asks contributors to use dev, but this PR targets master. Align policy or retarget.


51-51: Verify Play Store listing/ID.

Confirm that com.resonate.resonate is published and correct for this app before merging the CTA.

@M4dhav
Copy link
Contributor

M4dhav commented Sep 1, 2025

Hey @TheGoodUser , Thank you for the contribution. A couple of points to note:

  • Please raise the PR to the dev branch instead of master
  • The style for the buttons is not applied properly (See Attached Picture)
image
  • Could we potentially experiment with a smaller sized button next to the badges below the logos?
  • I think we should not keep this as an entire separate section that takes up a lot of space, text announcing that the app is now live and can be downloaded from the Play store might be better placed as part of one of the existing paragraphs
  • As per coderabbit's suggestion, please try to simplify the code and prefer GH Flavored Markdown instead of HTML CSS as GitHub will sanitize it.

@M4dhav M4dhav self-requested a review September 1, 2025 16:55
@M4dhav M4dhav added documentation Improvements or additions to documentation good first issue Good for newcomers labels Sep 1, 2025
Copy link
Contributor

@M4dhav M4dhav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please look into the suggested changes

@TheGoodUser
Copy link
Contributor Author

Thanks for the feedback!

Changes made:

  • Added download announcement to the main description paragraph
  • Replaced HTML/CSS with simple GFM badge link
  • Removed complex styling for better compatibility

Ready for review!

@M4dhav
Copy link
Contributor

M4dhav commented Sep 1, 2025

Closing as duplicate of #520

@M4dhav M4dhav closed this Sep 1, 2025
@TheGoodUser TheGoodUser deleted the readme-updates branch September 1, 2025 20:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation good first issue Good for newcomers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DOC: Add Button for downloading Resonate from Google Play Store to the Readme

2 participants