🟢 Good First Issue: Build Resource Hub Data Center Functionality

[shamilahmdt]

🟢 Good First Issue: Build Resource Hub Data Center Functionality

Time: ~30–45 minutes

Difficulty: Beginner / Intermediate

Skill Level: First-time contributors welcome

⭐ Before getting started, please consider starring the repository to support the project.

No advanced setup required! This issue focuses on implementing the Resource Hub Data Center page, including resource analytics, backup export, and restore functionality.

---

🏷 Labels

good first issue · help wanted · enhancement · json · localstorage · react

Tech Stack: React, Tailwind CSS

Good For: Beginners learning data management, file handling, JSON validation, and local storage workflows

---

📌 Description

The current Resource Hub Data Center page is a placeholder and does not provide any functionality.

This issue focuses on creating a central management workspace where users can view resource statistics, export backups, and restore resource databases from JSON files.

---

🎯 Your Tasks

1️⃣ Build Resource Statistics Dashboard

Load resources from:

dev_resources

Display summary statistics including:

• Total Resources

• GENERAL Resources

• LOCALHOST Resources

• STAGING Resources

• FIGMA Resources

• DOCUMENTATION Resources

✅ Expected Result

• Statistics update automatically

• Counts accurately reflect stored resources

---

2️⃣ Create Export Backup Functionality

Add a button that exports the current resource database.

The exported file should contain:

{

  exportedAt,

  resources

}

File naming format:

resources-backup-<timestamp>.json

✅ Expected Result

• Users can download a complete backup

• Exported JSON is properly formatted

---

3️⃣ Create Import Backup Functionality

Allow users to upload a backup file.

Use:

FileReader

to read uploaded JSON files.

Validation Requirements

Each resource should contain:

id

title

url

category

createdAt

Reject invalid files and display an error toast.

✅ Expected Result

• Valid backups restore successfully

• Invalid files show meaningful errors

---

4️⃣ Update Local Storage on Restore

When a valid backup is imported:

Replace:

dev_resources

with the imported data.

Refresh all statistics immediately.

✅ Expected Result

• Imported data becomes available instantly

• Dashboard statistics update automatically

---

5️⃣ Add Success & Error Notifications

Use:

sonner

for:

• Successful exports

• Successful imports

• Invalid JSON files

• Validation failures

✅ Expected Result

• Users always receive clear feedback

---

6️⃣ Build Responsive Backup & Restore Cards

Create separate sections for:

Backup Center

• Export Button

• Export Information

Restore Center

• File Upload

• Restore Information

Suggested responsive layout:

grid grid-cols-1 lg:grid-cols-2

✅ Expected Result

• Clean separation of functionality

• Mobile-friendly layout

• Consistent spacing

---

7️⃣ Theme Support

Ensure proper support for:

• Light Mode

• Dark Mode

✅ Expected Result

• Consistent appearance across themes

• No readability issues

---

8️⃣ Add Page Metadata

Add:

<title>Resource Hub Data Center | DevTasks</title>

<meta name="description" content="Manage resource backups, restores, and analytics." />

---

🎨 Design Requirements

• Follow the existing Data Center design patterns

• Maintain the project's glassmorphism aesthetic

• Keep layouts responsive

• Preserve desktop appearance

• Ensure a clean and professional presentation

---

📁 File Location

src/pages/ResourceHub/resourcehub/DataCenter.jsx

---

✅ Submission Requirements

1. ⭐ Star the repository

2. 🍴 Fork the repository

3. 🌿 Create a branch:

feature/resource-datacenter-functionality

4. Implement the required functionality

5. 📸 Include screenshots or a short recording

6. Commit your changes

7. Create a Pull Request with title:

feat: implement resource hub data center functionality

8. Link the issue in your PR description:

Closes #<issue_number>

---

🚀 Quick Info

| Category | Details |

| ---------- | --------------------------------------- |

| Difficulty | Beginner / Intermediate |

| Time | ~30–45 mins |

| Focus | JSON Handling, Import/Export, Analytics |

| Tech | React, Tailwind CSS |

| Good For | First-time contributors |

---

💡 Why This Is a Great First Issue

This issue gives contributors practical experience with:

• Local Storage Management

• JSON Import & Export

• FileReader API

• Data Validation

• Responsive UI Design

• User Feedback & Notifications

It also completes a core feature set of the Resource Hub workspace by enabling backup, restore, and resource analytics functionality.

---

🙌 Need Help?

Feel free to comment on the issue if you get stuck — maintainers will gladly help you out!

[parker-cassar]

Hi, I'm a first-time contributor and I would like to work on this issue. Could you please assign it to me?

[github-actions]

Hi @parker-cassar,

Thank you for your interest in this issue and for contributing to the project!

You have been successfully assigned. You may begin working on it immediately.

Please note: To keep the repository active and ensure issues are addressed in a timely manner, assignments will automatically expire after 48 hours if the issue remains open. If you need an extension or have any questions, please leave a comment here to notify the maintainers.

Happy coding!

[github-actions]

Hi @parker-cassar,

As this issue has been inactive and the 48-hour assignment period has expired, you have been unassigned to keep the issue available for other contributors.

Thank you for your interest, and feel free to request reassignment if you are ready to work on it again!