Skip to content

Updated resources #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Updated resources #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89ce80d
added leave/create team logic in profile page and fixed few ui issues
1DeepanshuPathak1 Apr 12, 2025
044f54b
Updated resources
1DeepanshuPathak1 Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 77 additions & 66 deletions src/components/Resources.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { FaChevronDown, FaChevronUp } from "react-icons/fa";
import { FaChevronDown, FaChevronUp, FaYoutube } from "react-icons/fa";

const resourcesData = {
webDev: [
Expand All @@ -15,42 +15,42 @@ const resourcesData = {
],
task: "Create a simple portfolio website with an 'About Me' section, projects, and contact info.",
links: [
{ name: "MDN HTML Guide", url: "https://developer.mozilla.org/en-US/docs/Web/HTML" },
{ name: "CSS Flexbox Guide", url: "https://css-tricks.com/snippets/css/a-guide-to-flexbox/" },
{ name: "CSS Grid Tutorial", url: "https://css-tricks.com/snippets/css/complete-guide-grid/" },
{ name: "GitHub Pages Docs", url: "https://docs.github.com/en/pages" },
{ name: "MDN HTML Guide", url: "https://developer.mozilla.org/en-US/docs/Web/HTML", youtube: "https://youtu.be/qz0aGYrrlhU" },
{ name: "CSS Flexbox Guide", url: "https://css-tricks.com/snippets/css/a-guide-to-flexbox/", youtube: "https://www.youtube.com/watch?v=3_9znKVNe5g" },
{ name: "HTML Cheat Sheet", url: "https://www.geeksforgeeks.org/html-cheat-sheet", youtube: "https://youtu.be/HD13eq_Pmp8" },
{ name: "CSS Basics (MDN)", url: "https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics", youtube: "https://www.youtube.com/watch?v=EUtlj7xdO1o" },
],
},
{
},{
week: 2,
title: "JavaScript & DOM Manipulation",
project: "To-Do List App",
title: "Frontend Framework (React.js)",
project: "Weather App",
topics: [
"JavaScript Basics (Variables, Functions, Loops)",
"DOM Manipulation (Event Listeners, getElementById, querySelector)",
"Local Storage (Saving Data in Browser)",
"Introduction to React (Components, Props, State)",
"Fetching API Data (Using fetch() or axios)",
"JSX & Conditional Rendering",
],
task: "Build a To-Do list where users can add, delete, and mark tasks as completed.",
task: "Build a Weather App that fetches weather data based on user input (city name) using a weather API.",
links: [
{ name: "JavaScript.info", url: "https://javascript.info/" },
{ name: "DOM Manipulation Guide", url: "https://www.w3schools.com/js/js_htmldom.asp" },
{ name: "Local Storage Tutorial", url: "https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" },
{ name: "React Official Docs", url: "https://react.dev/", youtube: "https://youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&si=AM4Zg0nawQQArNCd" },
{ name: "OpenWeather API", url: "https://openweathermap.org/api", youtube: "https://www.youtube.com/watch?v=MdIfZJ08g2I" },
{ name: "Axios Guide", url: "https://axios-http.com/docs/intro", youtube: "https://www.youtube.com/watch?v=fYTTUBa-lPc" },
],
},
{
week: 3,
title: "Frontend Framework (React.js)",
project: "Weather App",
title: "JavaScript & DOM Manipulation",
project: "To-Do List App",
topics: [
"Introduction to React (Components, Props, State)",
"Fetching API Data (Using fetch() or axios)",
"JSX & Conditional Rendering",
"JavaScript Basics (Variables, Functions, Loops)",
"DOM Manipulation (Event Listeners, getElementById, querySelector)",
"Local Storage (Saving Data in Browser)",
],
task: "Build a Weather App that fetches weather data based on user input (city name) using a weather API.",
task: "Build a To-Do list where users can add, delete, and mark tasks as completed.",
links: [
{ name: "React Official Docs", url: "https://react.dev/" },
{ name: "OpenWeather API", url: "https://openweathermap.org/api" },
{ name: "Axios Guide", url: "https://axios-http.com/docs/intro" },
{ name: "JavaScript Tutorial (W3Schools)", url: "https://www.w3schools.com/js/js_intro.asp", youtube: "https://youtu.be/PkZNo7MFNFg?si=CMUH2pctHH3q8ztS" },
{ name: "DOM Manipulation Guide", url: "https://www.w3schools.com/js/js_htmldom.asp", youtube: "https://www.youtube.com/watch?v=5fb2aPlgoys" },
{ name: "Local Storage Tutorial", url: "https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage", youtube: "https://www.youtube.com/watch?v=Av6HTmH3FUc" },
{ name: "Advanced JS Concepts", url: "https://madasamy.medium.com/15-javascript-concepts-that-every-nodejs-programmer-must-to-know-6894f5157cb7"},
],
},
{
Expand All @@ -64,10 +64,10 @@ const resourcesData = {
],
task: "Create a Notes App where users can create, update, and delete notes with a simple backend.",
links: [
{ name: "Node.js Docs", url: "https://nodejs.org/en/docs/" },
{ name: "Express.js Guide", url: "https://expressjs.com/" },
{ name: "MongoDB Tutorial", url: "https://www.mongodb.com/docs/" },
{ name: "MERN Stack Tutorial", url: "https://www.mongodb.com/languages/mern-stack-tutorial" },
{ name: "Node.js Docs", url: "https://nodejs.org/en/docs/", youtube: "https://youtube.com/playlist?list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU&si=U_YO8RaMf3qHCQ6K" },
{ name: "Express.js Guide", url: "https://expressjs.com/", youtube: "https://www.youtube.com/watch?v=SccSCuHhOw0" },
{ name: "MongoDB Tutorial", url: "https://www.mongodb.com/docs/", youtube: "https://www.youtube.com/watch?v=ofme2o29ngU" },
{ name: "MERN Stack Tutorial", url: "https://www.mongodb.com/languages/mern-stack-tutorial", youtube: "https://www.youtube.com/watch?v=7CqJlxBYj-M" },
],
},
],
Expand All @@ -84,9 +84,9 @@ const resourcesData = {
],
task: "Build a basic quiz app.",
links: [
{ name: "Flutter Setup Guide", url: "https://flutter.dev/docs/get-started/install" },
{ name: "Dart Language Tour", url: "https://dart.dev/guides/language/language-tour" },
{ name: "Flutter Basics Codelab", url: "https://codelabs.developers.google.com/codelabs/flutter-codelab-first" },
{ name: "Flutter Setup Guide", url: "https://docs.flutter.dev/get-started/install", youtube: "https://www.youtube.com/watch?v=1ukSR1GRtMU" },
{ name: "Dart Language Tour", url: "https://dart.dev/guides/language/language-tour", youtube: "https://youtube.com/playlist?list=PL4cUxeGkcC9iVGY3ppchN9kIauln8IiEh&si=hntDZJaNC73px5Lq" },
{ name: "Flutter Basics Codelab", url: "https://codelabs.developers.google.com/codelabs/flutter-codelab-first", youtube: "https://www.youtube.com/watch?v=GLSG_Wh_YWc" },
],
},
{
Expand All @@ -100,9 +100,9 @@ const resourcesData = {
],
task: "Build a personal expenses app with responsive design.",
links: [
{ name: "Flutter Widgets Catalog", url: "https://flutter.dev/docs/development/ui/widgets" },
{ name: "Responsive Design in Flutter", url: "https://flutter.dev/docs/development/ui/layout/responsive" },
{ name: "Flutter Codelabs", url: "https://flutter.dev/docs/codelabs" },
{ name: "Flutter Widgets Catalog", url: "https://docs.flutter.dev/ui/widgets", youtube: "https://youtu.be/wE7khGHVkYY?si=NqJ3hANEMPdnG9xN" },
{ name: "Responsive Design in Flutter", url: "https://docs.flutter.dev/ui/layout/responsive", youtube: "https://youtu.be/MrPJBAOzKTQ?si=xPo2kHa5hqblOssr" },
{ name: "Flutter Layout Guide", url: "https://docs.flutter.dev/ui/layout", youtube: "https://youtu.be/RJEnTRBxaSg?si=HRYXNH8m1X-AUGOi" },
],
},
{
Expand All @@ -112,15 +112,14 @@ const resourcesData = {
topics: [
"Widgets & Flutter Internals (Deep Dive)",
"Navigation & Multiple Screens",
"State Management (MVP)",
"Working with User Input & Forms",
"Sending HTTP Requests",
],
task: "Develop a meals app and start a shop app with navigation and forms.",
links: [
{ name: "Flutter Navigation Guide", url: "https://flutter.dev/docs/cookbook/navigation" },
{ name: "State Management in Flutter", url: "https://flutter.dev/docs/development/data-and-backend/state-mgmt" },
{ name: "Flutter HTTP Requests", url: "https://flutter.dev/docs/cookbook/networking/fetch-data" },
{ name: "Flutter Navigation Guide", url: "https://docs.flutter.dev/ui/navigation", youtube: "https://youtu.be/DlArCl8jvlo?si=mFzJNtg9T55OkRO2" },
{ name: "State Management in Flutter", url: "https://docs.flutter.dev/data-and-backend/state-mgmt", youtube: "https://youtu.be/3tm-R7ymwhc?si=yTRnq6sIQnePeI0S" },
{ name: "Flutter HTTP Requests", url: "https://docs.flutter.dev/cookbook/networking/fetch-data", youtube: "https://youtube.com/playlist?list=PL7zgwanvi8_OvGhdNt1pwvN2luynjiH1V&si=u7BXVZ1emTvnx-q9" },
],
},
{
Expand All @@ -134,9 +133,8 @@ const resourcesData = {
],
task: "Enhance the shop app with authentication and animations.",
links: [
{ name: "Firebase Authentication", url: "https://firebase.google.com/docs/auth/flutter/start" },
{ name: "Flutter Animations Guide", url: "https://flutter.dev/docs/development/ui/animations" },
{ name: "Flutter Shop App Tutorial", url: "https://www.youtube.com/watch?v=3z1J3aAFW8g" },
{ name: "Firebase Authentication Docs", url: "https://firebase.google.com/docs/auth/flutter/start", youtube: "https://youtu.be/rWamixHIKmQ?si=C7eCuRl5qbdGx2Cc" },
{ name: "Flutter Animations Guide", url: "https://docs.flutter.dev/ui/animations", youtube: "https://youtube.com/playlist?list=PL4cUxeGkcC9gP1qg8yj-Jokef29VRCLt1&si=YBCV9v9H4oxd1C-F" },
],
},
],
Expand All @@ -152,10 +150,10 @@ const resourcesData = {
],
task: "Solve 3-4 LeetCode problems on basic C++ and STL, analyze their complexity.",
links: [
{ name: "C++ Tutorial", url: "https://www.geeksforgeeks.org/c-plus-plus/" },
{ name: "STL Guide", url: "https://www.geeksforgeeks.org/the-c-standard-template-library-stl/" },
{ name: "Complexity Analysis", url: "https://www.programiz.com/dsa/time-complexity" },
{ name: "LeetCode Problems", url: "https://leetcode.com/problemset/all/" },
{ name: "C++ Tutorial", url: "https://www.geeksforgeeks.org/c-plus-plus/", youtube: "https://www.youtube.com/watch?v=Bn6lBj0DffE" },
{ name: "C++ STL Guide", url: "https://www.geeksforgeeks.org/the-c-standard-template-library-stl/", youtube: "https://www.youtube.com/watch?v=mlseT4mj4c0" },
{ name: "Time and Space Complexity", url: "https://www.geeksforgeeks.org/time-complexity-and-space-complexity/", youtube: "https://www.youtube.com/watch?v=DEHsr4Xic9w" },
{ name: "C++ OOPS Concepts", url: "https://www.w3schools.com/cpp/cpp_oop.asp" },
],
},
{
Expand All @@ -171,10 +169,10 @@ const resourcesData = {
],
task: "Solve 3-4 LeetCode problems on strings, arrays, and stacks, implement Tower of Hanoi.",
links: [
{ name: "String Problems", url: "https://leetcode.com/tag/string/" },
{ name: "Recursion Tutorial", url: "https://www.geeksforgeeks.org/introduction-to-recursion-data-structure-and-algorithm-tutorials/" },
{ name: "Array Operations", url: "https://www.geeksforgeeks.org/array-data-structure/" },
{ name: "Stack Applications", url: "https://www.programiz.com/dsa/stack" },
{ name: "Strings in C++", url: "https://www.geeksforgeeks.org/string-data-structure/", youtube: "https://youtu.be/ijIxcB9qjaU?si=zb_ay66PfPFi2oE3" },
{ name: "Recursion Tutorial", url: "https://www.geeksforgeeks.org/what-is-recursion/", youtube: "https://youtu.be/c7VjS7ZZVWM?si=yotRIh450aagTnbT" },
{ name: "Array Operations", url: "https://www.geeksforgeeks.org/array-data-structure/", youtube: "https://www.youtube.com/watch?v=Bnjbun-hiBk" },
{ name: "Stacks and Queues", url: "https://www.geeksforgeeks.org/stack-data-structure/", youtube: "https://www.youtube.com/watch?v=PPIdmeO8E-Q" },
],
},
{
Expand All @@ -188,10 +186,10 @@ const resourcesData = {
],
task: "Solve 3-4 LeetCode problems on linked lists and sorting, implement hash maps.",
links: [
{ name: "Linked List Guide", url: "https://www.geeksforgeeks.org/data-structures/linked-list/" },
{ name: "Sorting Algorithms", url: "https://www.geeksforgeeks.org/sorting-algorithms/" },
{ name: "Hash Map Tutorial", url: "https://www.geeksforgeeks.org/hash-maps-in-cpp/" },
{ name: "LeetCode Sorting", url: "https://leetcode.com/tag/sorting/" },
{ name: "Linked List Guide", url: "https://www.geeksforgeeks.org/data-structures/linked-list/", youtube: "https://www.youtube.com/watch?v=o5wJkJJpKtM" },
{ name: "Quick Sort Algorithm", url: "https://www.geeksforgeeks.org/quick-sort/", youtube: "https://www.youtube.com/watch?v=ogjf7ORKfd8" },
{ name: "Merge Sort Algorithm", url: "https://www.geeksforgeeks.org/merge-sort/", youtube: "https://www.youtube.com/watch?v=ogjf7ORKfd8" },
{ name: "Insertion Sort Algorithm", url: "https://www.geeksforgeeks.org/insertion-sort/", youtube: "https://www.youtube.com/watch?v=C46QfTjVCNU" },
],
},
{
Expand All @@ -206,10 +204,11 @@ const resourcesData = {
],
task: "Solve 3-4 LeetCode problems on searching, two pointers, and trees.",
links: [
{ name: "Binary Search Guide", url: "https://www.geeksforgeeks.org/binary-search/" },
{ name: "Two Pointer Technique", url: "https://www.geeksforgeeks.org/two-pointer-technique/" },
{ name: "Sliding Window Tutorial", url: "https://www.geeksforgeeks.org/window-sliding-technique/" },
{ name: "Tree Problems", url: "https://leetcode.com/tag/tree/" },
{ name: "Binary Search Guide", url: "https://www.geeksforgeeks.org/binary-search/", youtube: "https://www.youtube.com/watch?v=T2sFYY-fT5o" },
{ name: "Two Pointer Technique", url: "https://www.geeksforgeeks.org/two-pointer-technique/", youtube: "https://www.youtube.com/watch?v=syTs9_w-pwA" },
{ name: "Sliding Window Tutorial", url: "https://www.geeksforgeeks.org/window-sliding-technique/", youtube: "https://www.youtube.com/watch?v=EHCGAZBbB88&feature=youtu.be" },
{ name: "Tree Data Structures", url: "https://www.geeksforgeeks.org/introduction-to-tree-data-structure-and-algorithm-tutorials/", youtube: "https://www.youtube.com/watch?v=fnmisPM6cVo" },
{ name: "Dynamic Programming", url: "https://www.geeksforgeeks.org/dynamic-programming/", youtube: "https://www.youtube.com/watch?v=nqowUJzG-iM&feature=youtu.be" },
],
},
],
Expand Down Expand Up @@ -271,14 +270,26 @@ const ResourceCard = ({ week, title, project, topics, task, links, isOpen, toggl
{links.map((link, index) => (
<li key={index} className="flex items-center group">
<span className="w-2 h-2 bg-orange-500 rounded-full mr-3 group-hover:animate-pulse"></span>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="text-orange-500 hover:text-orange-700 font-medium group-hover:underline decoration-orange-300 decoration-2 underline-offset-4 transition-all duration-300"
>
{link.name}
</a>
<div className="flex items-center space-x-2">
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="text-orange-500 hover:text-orange-700 font-medium group-hover:underline decoration-orange-300 decoration-2 underline-offset-4 transition-all duration-300"
>
{link.name}
</a>
{link.youtube && (
<a
href={link.youtube}
target="_blank"
rel="noopener noreferrer"
className="text-red-600 hover:text-red-800 transition-colors duration-300"
>
<FaYoutube className="text-lg transform hover:scale-125 transition-transform" />
</a>
)}
</div>
</li>
))}
</ul>
Expand Down
Loading