feat: added track preview & fixed small bugs

[Rishabh-Singh-Codes]

PR Feature:

• Added tracks preview feature
  • View the complete description.
  • Check all the contents of that particular track on the home page instead of going to track's page.
  • Navigate directly to a particular track chapter or start from the beginning.
• Fixed few minor bugs
  • Fixed the description length in the track card to make the card size uniform.
  • In the case of multiple categories for a track, the categories would be on top of one another. Fixed it with cleaner by | separating it (e.g. Web Development | Projects).

Screen.Recording.2024-05-18.at.11.28.51.PM.1.mov

Checklist before requesting a review

• I have performed a self-review of my code
• I assure there is no similar/duplicate pull request regarding same issue

[nimit9]

Hey, I think it would be nice if you could add an info button which opens the modal instead of opening the modal by clicking on the card.

[Rishabh-Singh-Codes]

Hi Nimit, thanks for the suggestion. Let me explain my thought process behind opening the modal by clicking on card other than the main start button in the card.

• The card already has a CTA button which the user can click to navigate to the first page of the track.
• If the user is new to the platform and just clicks on the card, they'll redirected directly to the track page, even if they just want to check details regarding the track and by showing these details on the home page itself we are saving them these re-navigation and network call situation.
• User Experience
  • Buttons are standard UI elements that users relate with navigation than a card element
  • Navigating by clicking on a card can happen because of unintentional clicks
  • Accessibility wise buttons are generally well-supported by assistive technologies and easier to navigate using a keyboard
• Web Analytics
  • It might be harder to discern user intent and engagement & can lead to lower data accuracy
  • Implementing analytics can be more complex because you may need to track clicks on various parts of the card. Differentiating between clicks on the card body and the CTA button can provide more detailed insights.

Why not give a info button?
By adding a button, we are wasting are digital real estate and making the UI more cluttered. The navigation to a new page should be more intentional from the user. They have the option to navigate from the cards using the CTA button and from the preview modal as well.

All in all this is why, I chose to go ahead with these changes.

Anyways, let @hkirat also see this once and decide which makes more sense and then I can make changes if needed.

[nimit9]

🙏🙏

[hkirat]

/bounty $35