From 47b830e4ba20fc19a404c0dfe5f3c670fae6be15 Mon Sep 17 00:00:00 2001 From: Siddhant Date: Wed, 23 Oct 2024 02:11:02 +0530 Subject: [PATCH] Add Voice Search and Skills Dropdown Functionality --- public/data/sidgureja7803.json | 39 +++++++++ src/Homepage.jsx | 7 +- src/ProfilesList.json | 3 +- src/components/Search/Search.jsx | 139 ++++++++++++++++++++++++++++--- 4 files changed, 172 insertions(+), 16 deletions(-) create mode 100644 public/data/sidgureja7803.json diff --git a/public/data/sidgureja7803.json b/public/data/sidgureja7803.json new file mode 100644 index 00000000..315d8a61 --- /dev/null +++ b/public/data/sidgureja7803.json @@ -0,0 +1,39 @@ +{ + "name": "Siddhant Gureja", + "location": "Rishikesh, Uttarakhand, India", + "bio": "Hi! I am Siddhant currently pursuing B.E. in Computer and Electronics. I am a Mern Stack Developer and want to collaborate with fellow developers.", + "avatar": "https://github.com/sidgureja7803.png", + "portfolio": "https://github.com/sidgureja7803", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Node.js", + "MongoDB", + "Express.js", + "Redux", + "MERN Stack", + "Database Management Systems (DBMS)", + "Cloud Computing", + "AWS", + "Docker", + "Kubernetes", + "NoSQL Databases (MongoDB, Cassandra, Redis)", + "Data Structure and Algorithms", + "Operating Systems", + "System Programming", + "Networking", + "Software Engineering", + "Project Management", + "Agile Methodologies", + "Version Control Systems (Git, SVN)", + "Sc" + ], + "social": { + "GitHub": "https://github.com/sidgureja7803", + "Twitter": "https://twitter.com/sidgureja", + "LinkedIn": "www.linkedin.com/in/sidgureja" + } + } + \ No newline at end of file diff --git a/src/Homepage.jsx b/src/Homepage.jsx index 0f13dfc5..1c9d0aef 100644 --- a/src/Homepage.jsx +++ b/src/Homepage.jsx @@ -9,7 +9,7 @@ import Pagination from './components/Pagination/Pagination'; import './App.css'; import filenames from './ProfilesList.json'; -function App() { +function Homepage() { const profilesRef = useRef(); const [profiles, setProfiles] = useState([]); const [searching, setSearching] = useState(false); @@ -75,13 +75,14 @@ function App() { } else if (criteria === 'location') { return normalizeString(user.location).includes(normalizedValue); } else if (criteria === 'skill') { - return user.skills.some((skill) => normalizeString(skill).includes(normalizedValue)); + return user.skills.some((skill) => normalizeString(skill) === normalizedValue); } return false; }); setProfiles(filteredResults); setSearching(true); + setCurrentPage(1); // Reset to first page when searching }; const handleNextPage = () => { @@ -148,4 +149,4 @@ function App() { ); } -export default App; +export default Homepage; diff --git a/src/ProfilesList.json b/src/ProfilesList.json index 144d3b2c..03815ff4 100644 --- a/src/ProfilesList.json +++ b/src/ProfilesList.json @@ -320,5 +320,6 @@ "Pushpa472.json", "HarshS16.json", "jaya005.json", - "divanshiii09.json" + "divanshiii09.json", + "sidgureja7803.json" ] diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index a43132cf..e75ae4c3 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -1,13 +1,74 @@ import React, { useState, useRef, useEffect } from 'react'; import useDebounce from '../../hooks/useDebouncer'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faMagnifyingGlass, faXmark } from '@fortawesome/free-solid-svg-icons'; +import { faMagnifyingGlass, faXmark, faMicrophone } from '@fortawesome/free-solid-svg-icons'; function Search({ onSearch }) { const [searchValue, setSearchValue] = useState(''); const [prevSearchValue, setPrevSearchValue] = useState(''); const [searchCriteria, setSearchCriteria] = useState('name'); const searchInput = useRef(null); + const [isListening, setIsListening] = useState(false); + const [skills, setSkills] = useState([ + 'React', + 'Redux', + 'HTML', + 'CSS', + 'Tailwind', + 'Django', + 'TypeScript', + 'Figma', + 'UI', + 'UX', + 'C', + 'C++', + 'JavaScript', + 'Python', + 'Java', + 'Web Development', + 'DBMS', + 'Operating Systems', + 'Computer Networks', + 'Machine Learning', + 'Deep Learning', + 'Flutter', + 'Hugging Face', + 'NLP', + 'REST APIs', + 'GraphQL', + 'Docker', + 'Kubernetes', + 'Firebase', + 'PostgreSQL', + 'MongoDB', + 'MySQL', + 'Node.js', + 'Express.js', + 'Git', + 'GitHub', + 'TensorFlow', + 'PyTorch', + 'Azure', + 'AWS', + 'Google Cloud', + 'Linux', + 'Cybersecurity', + 'Microservices', + 'Blockchain', + 'Jenkins', + 'CI/CD', + 'TDD', + 'Agile Methodologies', + 'Data Structures', + 'Algorithms', + 'Computer Vision', + 'Natural Language Processing', + 'UI Design', + 'UX Design', + 'Cloud Computing', + 'Socket Programming', + 'Data Mining', + ]); const handleInputChange = (event) => { setSearchValue(event.target.value); @@ -15,6 +76,7 @@ function Search({ onSearch }) { const handleCriteriaChange = (event) => { setSearchCriteria(event.target.value); + setSearchValue(''); }; const debouncedValue = useDebounce(searchValue, 500); @@ -57,6 +119,37 @@ function Search({ onSearch }) { searchInput.current.focus(); }, []); + const handleVoiceSearch = () => { + if ('webkitSpeechRecognition' in window) { + const recognition = new window.webkitSpeechRecognition(); + recognition.continuous = false; + recognition.interimResults = false; + + recognition.onstart = () => { + setIsListening(true); + }; + + recognition.onresult = (event) => { + const transcript = event.results[0][0].transcript; + setSearchValue(transcript); + handleSearch(); + }; + + recognition.onerror = (event) => { + console.error('Speech recognition error', event.error); + setIsListening(false); + }; + + recognition.onend = () => { + setIsListening(false); + }; + + recognition.start(); + } else { + alert('Speech recognition is not supported in your browser.'); + } + }; + return (
- + {searchCriteria === 'skill' ? ( + + ) : ( + + )} {searchValue ? ( ) : ( )} +
);