Skip to content

Commit

Permalink
Merge pull request #278 from Shariq2003/GoogleCertifications
Browse files Browse the repository at this point in the history
Google's Free Certifications Page Added | To Upsikill By Google's Free Certifications & Courses | UI for Issue #188 | Issue #189
  • Loading branch information
rishicds authored Oct 28, 2024
2 parents 8032eef + dca2fb9 commit d2361df
Show file tree
Hide file tree
Showing 9 changed files with 203 additions and 238 deletions.
41 changes: 40 additions & 1 deletion PROJECT_STRUCTURE.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@
│ ├── dev5.jpeg
│ ├── dev6.jpeg
│ ├── dev7.jpeg
│ ├── devprod1.jpeg
│ ├── devprod2.png
│ ├── devprod3.jpeg
│ ├── devprod4.png
│ ├── devprod5.jpeg
│ ├── devprod6.jpeg
│ ├── exp1.png
│ ├── exp2.jpeg
│ ├── exp3.jpeg
Expand Down Expand Up @@ -58,6 +64,10 @@
│ │ ├── (pages)/
│ │ │ ├── About/
│ │ │ │ └── page.jsx
│ │ │ ├── AddHackathon/
│ │ │ │ └── page.jsx
│ │ │ ├── Chapters/
│ │ │ │ └── page.jsx
│ │ │ ├── Events/
│ │ │ │ ├── EventItem.js
│ │ │ │ ├── Events.css
Expand Down Expand Up @@ -108,25 +118,53 @@
│ │ │ ├── TermsAndConditions/
│ │ │ │ └── page.jsx
│ │ │ ├── api/
│ │ │ │ └── generate/
│ │ │ │ ├── Certifications/
│ │ │ │ │ ├── data.js
│ │ │ │ │ └── route.js
│ │ │ │ ├── chapters/
│ │ │ │ │ ├── data.js
│ │ │ │ │ └── route.js
│ │ │ │ ├── generate-content/
│ │ │ │ │ └── route.js
│ │ │ │ └── subscribe/
│ │ │ │ └── route.js
│ │ │ ├── careers/
│ │ │ │ ├── [id]/
│ │ │ │ │ └── page.jsx
│ │ │ │ ├── opportunities.js
│ │ │ │ └── page.jsx
│ │ │ ├── certifications/
│ │ │ │ └── page.jsx
│ │ │ ├── devStudent/
│ │ │ │ └── page.jsx
│ │ │ ├── devprod/
│ │ │ │ └── page.jsx
│ │ │ ├── expertdev/
│ │ │ │ └── page.jsx
│ │ │ ├── explore/
│ │ │ │ └── page.jsx
│ │ │ ├── gitContributors/
│ │ │ │ └── page.jsx
│ │ │ ├── helpCenter/
│ │ │ │ └── page.jsx
│ │ │ ├── how-apply/
│ │ │ │ └── page.jsx
│ │ │ ├── localdev/
│ │ │ │ └── page.jsx
│ │ │ ├── orginizer/
│ │ │ │ └── page.jsx
│ │ │ ├── participation-terms/
│ │ │ │ └── page.jsx
│ │ │ ├── participationterms/
│ │ │ │ └── page.jsx
│ │ │ ├── stories/
│ │ │ │ └── page.jsx
│ │ │ ├── student-challenge/
│ │ │ │ └── page.jsx
│ │ │ ├── sustainable/
│ │ │ │ └── page.jsx
│ │ │ ├── timeline/
│ │ │ │ └── page.jsx
│ │ │ ├── who-apply/
│ │ │ │ └── page.jsx
│ │ │ └── womentechmakers/
Expand All @@ -149,6 +187,7 @@
│ │ ├── Chatbot.jsx
│ │ ├── GTranslateLoader.js
│ │ ├── Global/
│ │ │ ├── AddHackathonForm.jsx
│ │ │ ├── Footer.jsx
│ │ │ ├── Header.jsx
│ │ │ └── Hero.jsx
Expand Down
1 change: 1 addition & 0 deletions public/certi 1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/certi 2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/certi 3.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/certi 4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/certi 5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 40 additions & 1 deletion repo_structure.txt
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
│ ├── dev5.jpeg
│ ├── dev6.jpeg
│ ├── dev7.jpeg
│ ├── devprod1.jpeg
│ ├── devprod2.png
│ ├── devprod3.jpeg
│ ├── devprod4.png
│ ├── devprod5.jpeg
│ ├── devprod6.jpeg
│ ├── exp1.png
│ ├── exp2.jpeg
│ ├── exp3.jpeg
Expand Down Expand Up @@ -54,6 +60,10 @@
│ │ ├── (pages)/
│ │ │ ├── About/
│ │ │ │ └── page.jsx
│ │ │ ├── AddHackathon/
│ │ │ │ └── page.jsx
│ │ │ ├── Chapters/
│ │ │ │ └── page.jsx
│ │ │ ├── Events/
│ │ │ │ ├── EventItem.js
│ │ │ │ ├── Events.css
Expand Down Expand Up @@ -104,25 +114,53 @@
│ │ │ ├── TermsAndConditions/
│ │ │ │ └── page.jsx
│ │ │ ├── api/
│ │ │ │ └── generate/
│ │ │ │ ├── Certifications/
│ │ │ │ │ ├── data.js
│ │ │ │ │ └── route.js
│ │ │ │ ├── chapters/
│ │ │ │ │ ├── data.js
│ │ │ │ │ └── route.js
│ │ │ │ ├── generate-content/
│ │ │ │ │ └── route.js
│ │ │ │ └── subscribe/
│ │ │ │ └── route.js
│ │ │ ├── careers/
│ │ │ │ ├── [id]/
│ │ │ │ │ └── page.jsx
│ │ │ │ ├── opportunities.js
│ │ │ │ └── page.jsx
│ │ │ ├── certifications/
│ │ │ │ └── page.jsx
│ │ │ ├── devStudent/
│ │ │ │ └── page.jsx
│ │ │ ├── devprod/
│ │ │ │ └── page.jsx
│ │ │ ├── expertdev/
│ │ │ │ └── page.jsx
│ │ │ ├── explore/
│ │ │ │ └── page.jsx
│ │ │ ├── gitContributors/
│ │ │ │ └── page.jsx
│ │ │ ├── helpCenter/
│ │ │ │ └── page.jsx
│ │ │ ├── how-apply/
│ │ │ │ └── page.jsx
│ │ │ ├── localdev/
│ │ │ │ └── page.jsx
│ │ │ ├── orginizer/
│ │ │ │ └── page.jsx
│ │ │ ├── participation-terms/
│ │ │ │ └── page.jsx
│ │ │ ├── participationterms/
│ │ │ │ └── page.jsx
│ │ │ ├── stories/
│ │ │ │ └── page.jsx
│ │ │ ├── student-challenge/
│ │ │ │ └── page.jsx
│ │ │ ├── sustainable/
│ │ │ │ └── page.jsx
│ │ │ ├── timeline/
│ │ │ │ └── page.jsx
│ │ │ ├── who-apply/
│ │ │ │ └── page.jsx
│ │ │ └── womentechmakers/
Expand All @@ -145,6 +183,7 @@
│ │ ├── Chatbot.jsx
│ │ ├── GTranslateLoader.js
│ │ ├── Global/
│ │ │ ├── AddHackathonForm.jsx
│ │ │ ├── Footer.jsx
│ │ │ ├── Header.jsx
│ │ │ └── Hero.jsx
Expand Down
120 changes: 120 additions & 0 deletions src/app/(pages)/Certifications/page.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
"use client";
import { useEffect, useState } from "react";

const GoogleCertificationPage = () => {
const [certifications, setCertifications] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [filteredCertifications, setFilteredCertifications] = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch("/api/certifications");
const data = await response.json();
setCertifications(data);
setFilteredCertifications(data); // Initialize with all certifications
} catch (error) {
console.error("Error fetching certifications:", error);
}
};

fetchData();
}, []);

const handleSearch = () => {
const filtered = certifications.filter(cert =>
cert.title.toLowerCase().includes(searchTerm.toLowerCase())
);
setFilteredCertifications(filtered);
};

const truncateDescription = (description, maxLength) => {
if (description.length > maxLength) {
return description.substring(0, maxLength) + "...";
}
return description;
};

return (
<div className="p-6">
<header className="mb-8 text-center">
<h1 className="m-2 text-5xl text-center font-extrabold bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text">
Google Certifications
</h1>
<p className="text-gray-600 max-w-2xl mx-auto text-lg">
Explore Google’s free certifications and learning pathways to enhance your skills in various technologies.
From AI to Android development, these certifications will guide you through hands-on learning experiences
and practical projects.
</p>
</header>

<div className="mb-8 flex justify-center">
<input
type="text"
placeholder="Search certifications..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full md:w-1/2 p-4 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
onClick={handleSearch}
className="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition duration-200"
>
Search
</button>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredCertifications.map((cert, index) => (
<div
key={index}
className="bg-white shadow-lg rounded-lg p-6 flex flex-col transition-transform duration-300 hover:transform hover:-translate-y-1 hover:shadow-xl"
>
<img
src={`/certi ${((index % 3) + 1)}.svg`}
alt={cert.title}
className="w-full h-32 object-cover rounded-md mb-4"
/>
<a href={cert.url} target="_blank" rel="noopener noreferrer">
<h2 className="text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 transition duration-200">{cert.title}</h2>
</a>
<p className="text-gray-600 mb-4">{truncateDescription(cert.description, 100)}</p>

<div className="flex-grow">
{cert.playlist.learningActivities.slice(0, 10).map((activity, idx) => (
<div key={idx} className="mb-3">
<a href={activity.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline hover:text-blue-800 transition duration-200">
<h3 className="font-medium">{activity.title}</h3>
</a>
</div>
))}

{cert.playlist.learningActivities.length > 10 && (
<button
onClick={() => {
const activityContainer = document.getElementById(`activities-${index}`);
activityContainer.classList.toggle("hidden");
}}
className="mt-2 bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition duration-200"
>
Read More
</button>
)}
<div id={`activities-${index}`} className="hidden">
{cert.playlist.learningActivities.slice(10).map((activity, idx) => (
<div key={idx} className="mb-3">
<a href={activity.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline hover:text-blue-800 transition duration-200">
<h3 className="font-medium">{activity.title}</h3>
</a>
</div>
))}
</div>
</div>
</div>
))}
</div>
</div>
);
};

export default GoogleCertificationPage;
Loading

0 comments on commit d2361df

Please sign in to comment.