Added mockup-image #406

Richajaishwal0 · 2025-08-20T18:34:04Z

Description

UI was enhanced using mockup inplace of screenshot

Fixes #324

Type of Change

New feature (e.g., new page, component, or functionality)
Bug fix (non-breaking change that fixes an issue)
UI/UX improvement (design, layout, or styling updates)
Performance optimization (e.g., code splitting, caching)
Documentation update (README, contribution guidelines, etc.)
Other (please specify):

Changes Made

Added mockup image

Dependencies

Same as prev

Checklist

My code follows the style guidelines of this project.
I have tested my changes across major browsers/devices
My changes do not generate new console warnings or errors , I ran npm run build and attached scrrenshot in this PR.
This is already assigned Issue to me, not an unassigned issue.

Screenshot
Before:

After:

vercel · 2025-08-20T18:34:09Z

@Richajaishwal0 is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2025-08-20T18:34:13Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

iitzIrFan

Please remove unnecessary file changes & keep it only as per the required feature @Richajaishwal0
@sanjay-kv

Richajaishwal0 · 2025-08-21T12:52:41Z

@iitzIrFan can u check it again.

Copilot

Pull Request Overview

This PR enhances the UI by replacing screenshots with interactive mockups and makes structural improvements to navigation and content organization. It removes the separate leaderboard tab and consolidates contributor information into a single "Contributors" page.

Key changes include:

Removal of standalone leaderboard functionality and integration into contributors section
Addition of interactive mockup components for better project visualization
Enhanced giveaway page with live leaderboard display
Blog content cleanup and author attribution updates

Reviewed Changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/pages/dashboard/leaderboard-page.css	Adds comprehensive CSS for removed leaderboard page styling
src/pages/dashboard/index.tsx	Removes leaderboard tab, updates navigation, and adds demo data initialization
src/pages/dashboard/giveaway/index.tsx	Enhances giveaway page with interactive leaderboard and improved styling
src/database/blogs/index.tsx	Updates blog entries with author information and removes one entry
src/components/ourProjects.tsx	Replaces static screenshots with interactive mockups and live website previews
src/components/mockup/DeveloperMockup.tsx	Creates new interactive mockup component for project showcases
blog/spark-architecture/index.md	Removes duplicate blog content
blog/Spark-Architecture/index.md	Removes duplicate blog content with different casing

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-21T17:36:18Z

src/pages/dashboard/leaderboard-page.css

@@ -0,0 +1,581 @@
+/* ===== MODERN LEADERBOARD PAGE STYLING ===== */


This CSS file contains 581 lines of styles for a leaderboard page that appears to be unused since the leaderboard functionality was removed from the main dashboard. Consider removing this file or documenting if it's intended for future use.

Copilot · 2025-08-21T17:36:19Z

src/pages/dashboard/index.tsx

  const history = useHistory();
  const [activeTab, setActiveTab] = useState<
-    "home" | "discuss" | "leaderboard" | "giveaway" | "contributors"
+    "home" | "discuss" | "giveaway" | "contributors"


The type definition removes 'leaderboard' but the comment on line 179 still references 'leaderboard or contributors tab'. Update the comment to reflect that only contributors tab triggers leaderboard data fetching.

Copilot · 2025-08-21T17:36:19Z

src/pages/dashboard/giveaway/index.tsx

+`;
+
+// Inject styles
+if (typeof document !== 'undefined') {


Injecting styles directly into the document head at runtime is not a recommended practice. Consider moving these styles to a separate CSS file or using CSS-in-JS solutions that are better integrated with the build process.

Copilot · 2025-08-21T17:36:19Z

src/components/ourProjects.tsx

+const getWebsiteUrl = (title: string) => {
+  return PROJECT_URLS[title] || "https://github.com/recodehive";
+};
+


The PROJECT_URLS configuration only contains 2 entries but is used to determine whether to show live iframe previews vs static screenshots. Consider adding a more explicit configuration or documentation about which projects support live previews.

Suggested change

// Each project item now includes a `url` and `livePreview` property.

// Use `item.livePreview` to determine whether to show a live iframe preview or a static screenshot.

// Example:

// {

// title: "Awesome GitHub Profile",

// image: "...",

// url: "https://recodehive.github.io/awesome-github-profiles/",

// livePreview: true

// }

Copilot · 2025-08-21T17:36:20Z

src/components/ourProjects.tsx

+                  >
+                    <motion.iframe
+                      key={activeItem}
+                      src={PROJECT_URLS[items[activeItem].title] || "about:blank"}


Loading external URLs in iframes without proper sandboxing restrictions could pose security risks. While sandbox="allow-scripts allow-popups allow-forms" is specified, consider if all these permissions are necessary or if additional restrictions should be applied.

Copilot · 2025-08-21T17:36:20Z

src/database/blogs/index.tsx

    image: "/img/blogs/01-seo-image.png",
    description:
-      "An SEO backlink is created when one website links to another, and they’re extremely important for SEO. ",
+      "An SEO backlink is created when one website links to another, and they're extremely important for SEO. ",


There appears to be an extra space at the end of this description string. Consider removing the trailing space for consistency.

Suggested change

"An SEO backlink is created when one website links to another, and they're extremely important for SEO. ",

"An SEO backlink is created when one website links to another, and they're extremely important for SEO.",

vercel · 2025-08-22T16:28:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Aug 22, 2025 4:29pm

Richajaishwal0 added 3 commits August 19, 2025 21:21

updated leaderboard in giveaway page

ec0495f

updated

b14f356

used mockup for project section

0e41b8a

iitzIrFan requested changes Aug 20, 2025

View reviewed changes

updated

fd25346

iitzIrFan requested a review from Copilot August 21, 2025 16:48

This comment was marked as outdated.

Sign in to view

optimised

7238ab2

iitzIrFan requested a review from Copilot August 21, 2025 17:34

Copilot AI reviewed Aug 21, 2025

View reviewed changes

removed leaderboard.css

d010c03

iitzIrFan added this to @recode-web Aug 21, 2025

iitzIrFan moved this to In Progress in @recode-web Aug 21, 2025

iitzIrFan requested a review from sanjay-kv August 21, 2025 19:43

sanjay-kv assigned Richajaishwal0 Aug 22, 2025

sanjay-kv added gssoc25 level 3 50 points labels Aug 22, 2025

sanjay-kv added this to the recode:launch 3.0 milestone Aug 22, 2025

vercel bot deployed to Preview August 22, 2025 16:29 View deployment

sanjay-kv merged commit 91a158e into recodehive:main Aug 22, 2025
3 checks passed

github-project-automation bot moved this from In Progress to Done in @recode-web Aug 22, 2025

		@@ -0,0 +1,581 @@
		/* ===== MODERN LEADERBOARD PAGE STYLING ===== */

+// Each project item now includes a `url` and `livePreview` property.
+// Use `item.livePreview` to determine whether to show a live iframe preview or a static screenshot.
+// Example:
+// {
+//   title: "Awesome GitHub Profile",
+//   image: "...",
+//   url: "https://recodehive.github.io/awesome-github-profiles/",
+//   livePreview: true
+// }

	"An SEO backlink is created when one website links to another, and they're extremely important for SEO. ",
	"An SEO backlink is created when one website links to another, and they're extremely important for SEO.",

Added mockup-image #406

Added mockup-image #406

Uh oh!

Conversation

Richajaishwal0 commented Aug 20, 2025

Description

Type of Change

Changes Made

Dependencies

Checklist

Uh oh!

vercel bot commented Aug 20, 2025

Uh oh!

github-actions bot commented Aug 20, 2025

Uh oh!

iitzIrFan left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Richajaishwal0 commented Aug 21, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

iitzIrFan left a comment •

edited

Loading

vercel bot commented Aug 22, 2025 •

edited

Loading