Feat: CTA Button to Star Github Repo

[Kamlesh72]

Linked Issue(s)

Fixes #454

Acceptance Criteria fulfillment

• Github Star Button

Proposed changes

[Kamlesh72]

@jayantbh @e-for-eshaan We have 2 good options to show this, either in sidebar or in header of a page.

Is there any plan to add something on right side of header?

[e-for-eshaan]

We want it to be frictionless to be able to star the repo. Putting it in the side bar is basically 'hiding it'

[e-for-eshaan]

margins and paddings seem a little off

[e-for-eshaan]

It's difficult to infer from this that these are stars, there needs to be some sort of star icon or something similiar for people to know that they can star the repo by clicking this

[e-for-eshaan]

that's why i included this image on the issue itself

[Kamlesh72]

@e-for-eshaan Unauthorized Github API calls are limited to 60 per hour. We can use fetch() in GithubButton component directly to utilize browser caching which has 60 seconds of cache invalidation time. This will almost never exceed rate limit.

Any suggestions on this approach?

[jayantbh]

Why is rate limits a concern? 😄
This isn't the kind of thing that needs to update so frequently that rate limits comes into the discussion.

It can just be loaded once on app load and that's it.

[Kamlesh72]

@jayantbh So currently I used NextJs api to fetch stars. For every user, the client will call the Github API from BFF.

So you mean we call Github API from client side and store count in redux?

[jayantbh]

Yeah that's probably best. While traffic is expected to be low on individual instances of Middleware, in case someone hosts it internally widely enough it'll totally break.

But the browser making the request is just super unlikely to break unless they are trying to break it.

[e-for-eshaan]

@Kamlesh72 how's this turning out? Let us know if you need any help, suggestions and/or reviews.

[Kamlesh72]

@e-for-eshaan I was busy in some urgent work past 10 days, now free 😃.

Made the required changes.

which extension? Comment Ref

[e-for-eshaan]

which extension?

not really an extension, drew it myself

[e-for-eshaan]

Hey @Kamlesh72 can we have some updated images and videos on the PR description

[Kamlesh72]

@e-for-eshaan done

[e-for-eshaan]

Wrap in a FlexBox components. Use alignCenter prop to fix the jagged alignment.

[Kamlesh72]

[jayantbh]

I hate to request a change as tiny as this, but this is the last mile. This PR is almost done!

[Kamlesh72]

@jayantbh @e-for-eshaan Any update on this PR? Am I missing something?

[jayantbh]

Approved!

Changes were addressed.

[jayantbh]

Congrats on the contribution sire, took a while but good work!