feat: implement structured learning system with project difficulty and learning tags

[vivekCS007]

Description

This PR introduces a Structured Learning System to the repository to make it significantly more beginner-friendly and educational. It addresses the lack of a structured roadmap by categorizing projects with difficulty levels, skill tags, recommended learning paths, and prerequisites.

**Closes #66 *

Key Changes

• Data Schema Extension: Expanded the ProjectItems interface in config/projects.tsx to include skills, learningPath, estimatedTime, and prerequisites.
• UI Integration: Updated the ProjectGrid component to gracefully display the new learning fields as sleek, readable badges with icons directly below the tech stack on the project cards.
• Enhanced Searchability: Modified the global search logic so that users can instantly filter projects by these new tags (e.g., searching for "React Basics" or "Authentication" will now properly filter projects).
• Initial Data Population: Added template data for the new structured learning fields to existing projects (Sendly, ShowTime, Pomodoro Timer) in config/project-Item.tsx.
• Linter Housekeeping: Safely suppressed strict React Hook warnings (react-hooks/set-state-in-effect) that were triggering false positives across various UI components during state synchronization.

Visual Impact

The new learning indicators (Time, Skills, Path, Prerequisites) seamlessly blend into the sleek UI using subdued badges with corresponding icons (FaClock, FaTags, FaRoute, FaBook), completely matching the premium aesthetic of the existing project card layout.

###Screenshot

[vercel]

@vivekCS007 is attempting to deploy a commit to the vaibhav's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Vaibhav-kesarwani]

Remove the package-lock.json we are using the pnpm package manager and please go through the contribution.md file and get the proper understanding of the project and than make changes and also why do you disable the
// eslint-disable-next-line react-hooks/set-state-in-effect
it was working fine without it also. Remove that also

[Vaibhav-kesarwani]

And also make the concern changes in the contribution.md file for the other contributors to know about the fields which are present.

[vivekCS007]

Sir, did all the required changes, i was previously using npm in which while running lint it was showing 5 errors so i disabled at those places, but while using pnpm it was still showing 1 error which is

so in this particular file i had disabled the lint, other than this all disable commands are removed

[Vaibhav-kesarwani]

In the conig/project-item.tsx file there are more project which needs the tags so add the tags on them also. I think you didn't pull the current changes pull the current changes into your codebase using the git pull origin command.

[vivekCS007]

@Vaibhav-kesarwani updated the rest projects too

[Vaibhav-kesarwani]

Can you improve the design it is not looking that good and clean.

[vivekCS007]

sir what can be the improvement that can be done,since i dont have much knowledge in frontend. I majorly work on only backend.

[Vaibhav-kesarwani]

@vivekCS007 Try making the compact version or may be the click to open dialog box something like that. Which look clean in the website and also professional.

[Vaibhav-kesarwani]

And also resolve the merge conflict.

[vivekCS007]

Here is how the details are visible

[Vaibhav-kesarwani]

@vivekCS007 It is actually looking good and can add more deatils when it is pop up and also resole the merge conflicts

[vivekCS007]

Sir I had resolved the conflict, what more details can be added ?

[Vaibhav-kesarwani]

@vivekCS007 while pop up you can also show the links and the image of website and the description which look good

[vivekCS007]

Sir now its looking like this

[Vaibhav-kesarwani]

@vivekCS007 One fix you have make this in the card to remove the view project detail button. Instead of that make it happen when i click on the card. But also test it when i click on the link which are given below can work speraltely into that card and also for the model increase the max width of the model

[vivekCS007]

ok sir

[ARPANPATRA111]

@vivekCS007 One fix you have make this in the card to remove the view project detail button. Instead of that make it happen when i click on the card. But also test it when i click on the link which are given below can work speraltely into that card and also for the model increase the max width of the model

This can cause a classical UX issue in mobile screen aspect ration.
People viewing through mobile might misclick while scrolling.
I would not recommend the whole card to be clickable. Insted, clicking on the project image should open the dialog.

[Vaibhav-kesarwani]

@vivekCS007 you can consider the @ARPANPATRA111 approach also he had a valid point.

[vivekCS007]

Sir, I think for the screen smaller than some particular width should get the option of clicking only image while for larger it is suitable as it is right now

[Vaibhav-kesarwani]

@ARPANPATRA111 Review the PR?

[ARPANPATRA111]

@ARPANPATRA111 Review the PR?

11 commits for a dialog box.
Should we ask for a new pr ?

[Vaibhav-kesarwani]

Yes @ARPANPATRA111 you can.

[ARPANPATRA111]

@vivekCS007 Hey, we saw you working patiently on this issue and we totally respect your time and effort.
But you had to do 11 commits to fix this issue.
Generally, we prefer 2-3 commits, because tracking and reviewing them is easy for us.

i would like to request a new PR from your side.
before doing the new PR follow the SOP:

• update your forks's main
• sync your local main branch
• checkout from the main into a feature branch.
• Stage only required changes
• Commit and push them.
• create a new PR.

in the new PR i want you to add a video proof of your working changes (show how dialog opens in dark and light mode also in mobile screen aspect ratio) (verify that links are workking)

[vivekCS007]

Sure, will do it asap.

[ARPANPATRA111]

@Vaibhav-kesarwani Close this PR.
Contributor has created a new PR, which is ready to be merged.