search

csdojo-defaang / defaang

A website that will curate recently-asked interview questions from FAANG+. Currently inactive. Check out: https://github.com/ykdojo/OpenStream
MIT License
509 stars 120 forks source link

feat: question approval progress bar on homepage #270

Open jengkhaw95 opened 1 year ago

jengkhaw95 commented 1 year ago

🛠️ Fixes Issue

Closes #262

➕ Changes Introduced

  1. Added a component QuestionApprovalProgressBarSection and placed it on the homepage.

  2. Count of the approved questions is fetched in a useEffect (on mount) using supabase client in the QuestionApprovalProgressBarSection component.

📄 Note To Reviewers

  1. Inline style (width) is used on the progress bar element as a dynamic class name like: w-[{currentPercentage}] does not work in tailwindcss JIT mode. Reference image

  2. Implementation of a multi-step progress bar could be introduced in the future, as soon as the steps are defined. (Might require further discussion)

📷 Screenshots

Mobile View mobile

Desktop View desktop

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
defaang ✅ Ready (Inspect) Visit Preview Oct 7, 2022 at 4:53PM (UTC)
ykdojo commented 1 year ago

Thank you @jengkhaw95.

This is a good start: image

A few issues though:

  1. Since we're at 3%, it doesn't look quite good.

What do you think of setting the initial goal to 10 questions?

Then we can describe what will happen when we have 10 approved questions. Maybe something like - "All users with at least one approved question get access to all other questions"?

  1. The top portion of the landing page and the progress bar section look too blended together. Is there a good way to separate them?
jengkhaw95 commented 1 year ago

Yes, it makes sense that we start with 10 approved questions. Let me work on a sample describing the goal. (Will upload it here when it's ready)

Currently, I don't have any idea about separating the landing page and the progress bar section. I'm open to suggestions for both.

ykdojo commented 1 year ago

@jengkhaw95 any updates?

ykdojo commented 1 year ago

One idea: what if we pulled the progress bar all the way to the bottom?

That way, we can have a white background there, and show the progress bar in its own distinct section - just an idea though.

ykdojo commented 1 year ago

Like this: https://github.com/ykdojo/defaang/pull/303