From f3cad024056c6371891bc049ae9780082071925d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 10 Nov 2024 08:19:53 +0000 Subject: [PATCH 1/2] Update repo structure --- PROJECT_STRUCTURE.md | 5 +++++ repo_structure.txt | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/PROJECT_STRUCTURE.md b/PROJECT_STRUCTURE.md index e2c25e1..990cc63 100644 --- a/PROJECT_STRUCTURE.md +++ b/PROJECT_STRUCTURE.md @@ -173,6 +173,8 @@ │ │ │ │ ├── [id]/ │ │ │ │ │ └── page.jsx │ │ │ │ └── page.jsx +│ │ │ ├── ResetPassword/ +│ │ │ │ └── page.jsx │ │ │ ├── Resources/ │ │ │ │ ├── [id]/ │ │ │ │ │ └── page.jsx @@ -345,6 +347,9 @@ │ │ │ ├── Certifications/ │ │ │ │ ├── data.js │ │ │ │ └── route.js +│ │ │ ├── SendResetPassword/ +│ │ │ │ ├── image.png +│ │ │ │ └── route.js │ │ │ ├── addhackathon/ │ │ │ │ └── route.js │ │ │ ├── addstoriesapi/ diff --git a/repo_structure.txt b/repo_structure.txt index 9c3ad20..cd57cde 100644 --- a/repo_structure.txt +++ b/repo_structure.txt @@ -169,6 +169,8 @@ │ │ │ │ ├── [id]/ │ │ │ │ │ └── page.jsx │ │ │ │ └── page.jsx +│ │ │ ├── ResetPassword/ +│ │ │ │ └── page.jsx │ │ │ ├── Resources/ │ │ │ │ ├── [id]/ │ │ │ │ │ └── page.jsx @@ -341,6 +343,9 @@ │ │ │ ├── Certifications/ │ │ │ │ ├── data.js │ │ │ │ └── route.js +│ │ │ ├── SendResetPassword/ +│ │ │ │ ├── image.png +│ │ │ │ └── route.js │ │ │ ├── addhackathon/ │ │ │ │ └── route.js │ │ │ ├── addstoriesapi/ From 70dda13469d2060def9825efd7c9143e6db7afec Mon Sep 17 00:00:00 2001 From: Shariq Date: Sun, 10 Nov 2024 15:21:32 +0530 Subject: [PATCH 2/2] Revamped the tech stack explorer --- data.json | 245 +++++++++++++++++++ src/app/(pages)/tech-stack-explorer/page.jsx | 160 ++++++------ 2 files changed, 335 insertions(+), 70 deletions(-) diff --git a/data.json b/data.json index 656b89b..caeeaa0 100644 --- a/data.json +++ b/data.json @@ -48002,5 +48002,250 @@ "title": "Can I propose an event for GDSC?", "content": "Yes, if you have a great idea for an event, you can propose it to the GDSC team for consideration." } + ], + "tech-stacks":[ + { + "id": 1, + "name": "Frontend Stack", + "description": "Technologies for building user interfaces.", + "tags": ["HTML", "CSS", "JavaScript", "React", "Angular"], + "details": { + "components": [ + "HTML5", + "CSS3", + "JavaScript", + "React", + "Vue.js", + "Angular" + ], + "useCases": [ + "Web Development", + "UI/UX Design", + "Single Page Applications" + ], + "tutorials": [ + "https://reactjs.org/docs/getting-started.html", + "https://angular.io/start" + ] + } + }, + { + "id": 2, + "name": "Backend Stack", + "description": "Technologies for server-side development.", + "tags": ["Node.js", "Express", "MongoDB", "SQL"], + "details": { + "components": [ + "Node.js", + "Express", + "Django", + "MongoDB", + "PostgreSQL" + ], + "useCases": [ + "REST APIs", + "Database Management", + "Authentication" + ], + "tutorials": [ + "https://nodejs.org/en/docs/guides/getting-started-guide/", + "https://www.djangoproject.com/start/" + ] + } + }, + { + "id": 3, + "name": "DevOps Stack", + "description": "Tools and technologies for managing software deployment and infrastructure.", + "tags": ["Docker", "Kubernetes", "CI/CD", "AWS"], + "details": { + "components": [ + "Docker", + "Kubernetes", + "Jenkins", + "AWS", + "Terraform" + ], + "useCases": [ + "Containerization", + "Continuous Integration/Continuous Deployment (CI/CD)", + "Cloud Infrastructure" + ], + "tutorials": [ + "https://docs.docker.com/get-started/", + "https://kubernetes.io/docs/tutorials/kubernetes-basics/", + "https://aws.amazon.com/getting-started/" + ] + } + }, + { + "id": 4, + "name": "Mobile Development Stack", + "description": "Technologies for building mobile applications.", + "tags": ["Flutter", "React Native", "Swift", "Kotlin"], + "details": { + "components": [ + "Flutter", + "React Native", + "Swift", + "Kotlin", + "Android SDK" + ], + "useCases": [ + "Cross-platform Development", + "iOS Development", + "Android Development" + ], + "tutorials": [ + "https://flutter.dev/docs/get-started", + "https://reactnative.dev/docs/getting-started", + "https://developer.apple.com/documentation/swift" + ] + } + }, + { + "id": 5, + "name": "Data Science Stack", + "description": "Tools and libraries for data analysis and machine learning.", + "tags": ["Python", "Pandas", "TensorFlow", "scikit-learn"], + "details": { + "components": [ + "Python", + "Pandas", + "NumPy", + "TensorFlow", + "scikit-learn" + ], + "useCases": [ + "Data Analysis", + "Machine Learning", + "Deep Learning" + ], + "tutorials": [ + "https://www.tensorflow.org/tutorials", + "https://scikit-learn.org/stable/tutorial/index.html", + "https://pandas.pydata.org/pandas-docs/stable/getting_started/intro_tutorials/index.html" + ] + } + }, + { + "id": 6, + "name": "Cloud Computing Stack", + "description": "Technologies and services for building and deploying cloud-based applications.", + "tags": ["AWS", "Azure", "Google Cloud", "CloudFormation"], + "details": { + "components": [ + "AWS", + "Azure", + "Google Cloud", + "CloudFormation", + "Terraform" + ], + "useCases": [ + "Cloud Hosting", + "Serverless Architectures", + "Infrastructure as Code (IaC)" + ], + "tutorials": [ + "https://aws.amazon.com/training/", + "https://learn.microsoft.com/en-us/azure/", + "https://cloud.google.com/training" + ] + } + }, + { + "id": 7, + "name": "AI/ML Stack", + "description": "Technologies and frameworks for building AI and machine learning applications.", + "tags": ["TensorFlow", "PyTorch", "Keras", "OpenAI"], + "details": { + "components": [ + "TensorFlow", + "PyTorch", + "Keras", + "OpenAI", + "scikit-learn" + ], + "useCases": [ + "Artificial Intelligence", + "Machine Learning", + "Natural Language Processing (NLP)" + ], + "tutorials": [ + "https://www.tensorflow.org/tutorials", + "https://pytorch.org/tutorials/", + "https://keras.io/guides/" + ] + } + }, + { + "id": 8, + "name": "Game Development Stack", + "description": "Tools and frameworks for creating video games.", + "tags": ["Unity", "Unreal Engine", "C#", "C++"], + "details": { + "components": ["Unity", "Unreal Engine", "Godot", "C#", "C++"], + "useCases": [ + "Game Development", + "Virtual Reality (VR)", + "Augmented Reality (AR)" + ], + "tutorials": [ + "https://learn.unity.com/", + "https://docs.unrealengine.com/en-US/GettingStarted/index.html", + "https://godotengine.org/learn" + ] + } + }, + { + "id": 9, + "name": "Security Stack", + "description": "Technologies and frameworks focused on cybersecurity.", + "tags": ["OWASP", "SSL", "Kali Linux", "Burp Suite"], + "details": { + "components": [ + "OWASP", + "SSL/TLS", + "Kali Linux", + "Burp Suite", + "Metasploit" + ], + "useCases": [ + "Penetration Testing", + "Vulnerability Scanning", + "Encryption" + ], + "tutorials": [ + "https://owasp.org/www-project-top-ten/", + "https://www.kali.org/docs/", + "https://portswigger.net/burp/documentation" + ] + } + }, + { + "id": 10, + "name": "Blockchain Development Stack", + "description": "Technologies for building decentralized applications and blockchain networks.", + "tags": ["Ethereum", "Solidity", "Web3.js", "IPFS"], + "details": { + "components": [ + "Ethereum", + "Solidity", + "Web3.js", + "IPFS", + "Truffle" + ], + "useCases": [ + "Smart Contracts", + "Decentralized Finance (DeFi)", + "NFTs" + ], + "tutorials": [ + "https://ethereum.org/en/developers/#getting-started", + "https://soliditylang.org/docs/", + "https://docs.ipfs.io/" + ] + } + } ] } diff --git a/src/app/(pages)/tech-stack-explorer/page.jsx b/src/app/(pages)/tech-stack-explorer/page.jsx index 75749f7..586a388 100644 --- a/src/app/(pages)/tech-stack-explorer/page.jsx +++ b/src/app/(pages)/tech-stack-explorer/page.jsx @@ -1,50 +1,23 @@ "use client"; -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { motion } from 'framer-motion'; import Image from 'next/image'; -// Sample data for tech stacks -const sampleTechStacks = [ - { - id: 1, - name: "Frontend Stack", - description: "Technologies for building user interfaces.", - tags: ["HTML", "CSS", "JavaScript", "React", "Angular"], - details: { - components: ["HTML5", "CSS3", "JavaScript", "React", "Vue.js", "Angular"], - useCases: ["Web Development", "UI/UX Design", "Single Page Applications"], - tutorials: ["https://reactjs.org/docs/getting-started.html", "https://angular.io/start"] - }, - }, - { - id: 2, - name: "Backend Stack", - description: "Technologies for server-side development.", - tags: ["Node.js", "Express", "MongoDB", "SQL"], - details: { - components: ["Node.js", "Express", "Django", "MongoDB", "PostgreSQL"], - useCases: ["REST APIs", "Database Management", "Authentication"], - tutorials: ["https://nodejs.org/en/docs/guides/getting-started-guide/", "https://www.djangoproject.com/start/"] - }, - }, - // Additional stacks can be added here -]; - // Header Section const TechStackHeader = () => { return ( -
- - Tech Stack Explorer +
+ + Explore the Best Tech Stacks -

- Discover and explore popular tech stacks, learn about their components, and find tutorials to get started! +

+ Discover and explore the top technologies for frontend, backend, and full-stack development. Learn about their components, use cases, and tutorials to get started!

@@ -55,23 +28,23 @@ const TechStackHeader = () => { const TechStackCards = ({ stacks, onExpand }) => { return ( -
+
{stacks.map((stack) => (
onExpand(stack)} > -

{stack.name}

-

{stack.description}

-
+

{stack.name}

+

{stack.description}

+
{stack.tags.map((tag, index) => ( - + {tag} ))} @@ -88,47 +61,94 @@ const TechStackModal = ({ stack, onClose }) => { return (
- -

{stack.name}

-

{stack.description}

-
-

Components:

-
    - {stack.details.components.map((component, index) => ( -
  • {component}
    • - ))} -
-
-
-

Use Cases:

-
    - {stack.details.useCases.map((useCase, index) => ( -
  • {useCase}
    • - ))} -
+ + +
+

{stack.name}

+

{stack.description}

-
-

Tutorials:

-
    - {stack.details.tutorials.map((tutorial, index) => ( -
  • {tutorial}
    • - ))} -
+ +
+ {/* Components Section */} +
+

Components:

+
    + {stack.details.components.map((component, index) => ( +
  • + + {component} +
    • + ))} +
+
+ + {/* Use Cases Section */} +
+

Use Cases:

+
    + {stack.details.useCases.map((useCase, index) => ( +
  • + + {useCase} +
    • + ))} +
+
+ + {/* Tutorials Section */} +
+

Tutorials:

+
    + {stack.details.tutorials.map((tutorial, index) => ( +
  • + + {tutorial} + +
    • + ))} +
+
); }; -// Main Tech Stack Explorer Page Component + const TechStackExplorerPage = () => { + const [techStacks, setTechStacks] = useState([]); const [selectedStack, setSelectedStack] = useState(null); + useEffect(() => { + // Fetch tech stacks from JSON server + const fetchTechStacks = async () => { + try { + const response = await fetch('http://localhost:5000/tech-stacks'); + const data = await response.json(); + setTechStacks(data); + } catch (error) { + console.error("Error fetching tech stacks:", error); + } + }; + + fetchTechStacks(); + }, []); + const handleExpandStack = (stack) => { setSelectedStack(stack); }; @@ -140,10 +160,10 @@ const TechStackExplorerPage = () => { return (
- + {selectedStack && }
); }; -export default TechStackExplorerPage; +export default TechStackExplorerPage; \ No newline at end of file