todo.md

List of things you are supposed to fix

1. how to remove HYDRATION_ERROR. ✅

List of things you are supposed to do - learning perspective

1. How does Clerk JS works.

2. How to use dark and light theme designs -

   dark:text-gray-400 dark:hover:text-white

   Similarly use dark and light theme in CSS.

3. By Default - Dark theme...

4. FontStyle of FitnessHub -- change.

5. Select a TitleBg color background.

6. Navigation Menu - shadcn/ui ❗IMPORTANT ✅ --> Add Copyright issues in this after the links --> flex end

7. Sidebar using sheet component ✅ --> Bug,when sidebar is open and you close the responsive tab, it shows different view --> check that out.

8. Make a heading and description component so that we use the same model everywhere. ✅

9. Collect Images for Trainers List - 258 x 415 sizes only ✅

10. Gym authenticities -- support. ✅``

11. Gallery tile/Grid view. ✅

12. Close the Sheet Component - Upon clicking the link inside. ✅

22.10.23 -

1. Fix Navbar issue - refer codebox. ✅
2. Design Basic Other routes - Banner image ✅
3. 6 Card Design - Stages of healthy workout cycle. ✅
4. Classes cards design ✅
5. Footer Design ✅
6. After 8 secs - right sheet popup. - Exclusive offer 🎟️🎫 Join today.. something like that. ✅
7. Primary Button color in light mode - design. ❗
8. dumbbell, key - consistency, drumstick, wavypoints, tortoise/piggy-bank ✅
9. convert all constant from AllClasses to ALL_CLASSES ✅
10. Calculate your BMI --> Background Image solution ... ✅
11. route - achievements - Hall of Fame - card design and text image etc.
12. Pricing page ✅
13. Home page Banner.
14. About page design ✅ - Update few more details
15. Contact page - research for design ✅
16. Google Map location ✅
17. Set of exercises for different muscle groups --> Button toggler. --> onClick --> display those categories. ✅
18. ExerciseCard --> onClick --> Open up refernce video on how to perform with proper posture and technique. ✅
19. design a json file for Exercises.Think properly all the things you are going to need for a single exercise --> then you can replicate for different. ✅
20. Highlight the currently active route. ✅
21. BMI weight - decimal allow - fix "step='any'" ✅
22. Classes card - overflow hidden ✅
23. Classes show more feature.
24. BMI Button margin inc ✅
25. Contact form Loading state... - shadcnui component
26. Bug - why isnt marker showing up ? ✅
27. Loading state refractor
28. Achievements page design
29. Change courses page to exercises --> point 17 features. ✅
30. On Subscribe sheet - if loggedin dont show login/register buttons - else show view Plan ❗❗Edit to navigate to Stripe page ❗
31. Bug - SidebarSheet coming up twice - both for mobile and desktop. (Check if contextAPI will resolve or not.)
32. Trainer card in mobile bug
33. Design a color picker js util class and which will help you to extract vibrant color from the image and then that color should be in the back og the glass morphism effect. ✅
34. Custom_error page ✅
35. On scroll_up display Navbar, on scroll_down hide the Navbar

EXERCISES ROUTE :

1. First Design the basic layout of how it should be displayed. Card structure - take up one exercise and design it. ✅
2. Make a different Muscle group and try to apply the filtering property there.
3. After clicking on card --> make another route for detail page [slug] ✅
4. Make an API and then pull and fetch the data from there. ✅

back-squats - #45a7c8 bench-press - #a2b57f

• Show a Skeleton while loading images - check if a image can be added in the skeleton then choose a gym image and addd that in the skeleton part. ✅

• Add a progressbar - for every route hitting completion. ❗

• Make a custom Error page for handling 404, 500 and 403 error. ❗

• Stripe Integration. ❗

{
      "id": 6,
      "difficulty": "",
      "category": [""],
      "name": "",
      "desc": "",
      "muscle_group": "",
      "equipment_req": [""],
      "mechanics": "",
      "force_type": "",
      "secondary_muscle_group": [""],
      "ImageUrl": "",
      "overview": "",
      "safety_check": [
        {
          "icon": "safety-bench.png",
          "safety": "Tighten core & brace."
        }
      ],
      "instructions": [
        {
          "step": 1,
          "instr": "Technique and posture first, Weights second - Don't EGO Lift."
        }
      ],
      "relevant_exercise": [
        {
          "force_type": "push",
          "name": "pushups",
          "shortDesc": "the evergreen pushups",
          "rel_imgUrl": "push-up.jpg"
        }
      ],
      "video_resources": [] 

}

• Add a by default active flag for pricing... ✅

Achievement card styling idea... Hover to Flip - Competition details

• Secured __ position
• Organised at __________.
• Stats -

After all basics are done - improvisation. - create a new branch for this and make adjustments on that.

After you grasp the basic of redux and state management - Add a route

• Stories : Where logged-in people can add a story and people can like, comment and share.

Contact page

• Add a checkbox - Send response to self.
• Send a response from the official website - Thankyou for your feedback, rest assured we will reach back to you as soon as possible.
• If a user subscribes - Send a response - Thankyou for subscribing to fitness hub. Welcome to a brand new journey.

---

Plan to Proceed :

1. Add a Custom Error page. ✅
2. Add stripe integration.
3. Incorporate redux toolkit into it.