Code Monkey home page Code Monkey logo

shyamtawli / devfind Goto Github PK

View Code? Open in Web Editor NEW
536.0 6.0 578.0 1.22 MB

devFind is an open source project that aims to create a platform for developers to showcase their skills and connect with potential collaborators, all in a user-friendly and searchable format.

Home Page: https://dev-find.vercel.app/

License: MIT License

HTML 9.03% JavaScript 83.37% CSS 7.28% Shell 0.32%
add-data good-first-issue open-source react javascript css tailwindcss beginner gssoc24 vscode

devfind's Introduction

πŸ‘©β€πŸ’» devFind - Discover and Connect with Skilled Developers!

License Forks Star Click Vote Issue Click Vote Open Pull Request

Table of Contents

About πŸš€

  • devFind - Website
  • devFind is an open source project that aims to create a platform for developers to showcase their skills and connect with potential collaborators, all in a user-friendly and searchable format.
  • With devFind, developers can create their profiles in JSON format, which are then displayed on the web for others to discover.

Features πŸ’ͺ

  • One of the key features of devFind is its powerful search functionality.
  • Users can search for developers based on specific skills, locations or name, making it easy to find developers with expertise in a particular technology or programming language.
  • This makes devFind a valuable resource for project managers, recruiters, and anyone looking to connect with skilled developers for collaboration or employment opportunities.

How to add your profile Data πŸ€”

Thank you for your interest in contributing to our open-source project!

Prerequisites

  • A GitHub account
  • Git installed on your local development environment
  • Node Package Manager (npm) installed on your local development environment

How to Install Git

Git is a version control system that is used to manage the source code of your project.

To install Git, follow these steps:

  1. Download and install Git from the Official Website

  2. Open the terminal or command prompt on your local development environment

  3. Verify the installation of Git by running the following command:

    git --version

How to Install Node.js and npm

Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. npm (Node Package Manager) is a package manager for JavaScript, essential for managing dependencies in Node.js projects. Here's how to install Node.js and npm:

  1. Download Node.js:

    • Visit the official Node.js website and download the appropriate installer for your operating system (Windows, macOS, or Linux).
    • Choose the LTS (Long Term Support) version for stable releases or the latest version for cutting-edge features.
    • Follow the installation instructions provided by the installer.
  2. Verify Node.js Installation:

    • After the installation is complete, open your terminal or command prompt.

    • To verify that Node.js has been installed successfully, type the following command and press Enter:

      node -v
      
    • This command should display the version of Node.js installed on your system. If it does, Node.js installation was successful.

  3. Verify npm Installation:

    • npm comes bundled with Node.js, so once Node.js is installed, npm is automatically installed as well.

    • To confirm that npm is installed, in your terminal or command prompt, type:

      npm -v
      
    • Press Enter. This command should display the version of npm installed on your system. If it does, npm installation was successful.

  4. Optional: Update npm (recommended):

    • It's recommended to keep npm up to date to access the latest features and bug fixes.

    • To update npm to the latest version, type the following command and press Enter:

      npm install -g npm@latest
      
    • This command will update npm to the latest stable version globally (-g flag).

By following these steps, you have successfully installed Node.js and npm on your system. You are now ready to start building JavaScript applications and managing dependencies with npm.

Steps to Add Your Profile Data

  1. Fork the repository: To create a copy of the repository in your GitHub account, click on the "Fork" button in the top right corner of the project repository page.

  2. Clone the forked repository: To clone the repository to your local development environment, open the terminal or command prompt and run the following command:

    git clone https://github.com/<your-github-username>/devFind.git
  3. Install dependencies: To install the necessary dependencies for the project, navigate to the project directory and run the following command:

    npm install
  4. Navigate to the public/data folder in your project directory.

  5. Create a new JSON file named your_github_username.json (replace your_github_username with your actual GitHub username). Open the file you just created.

  6. Add the following JSON object, replacing the placeholder values with your own details:

    {
      "name": "Your Name",
      "location": "Your Location",
      "bio": "Your Bio should be 20-30 words not more then that",
      "avatar": "https://github.com/<your-github-username>.png",
      "portfolio": "Your Portfolio URL or Github URL",
      "skills": ["Your Skill 1", "Your Skill 2", "..."],
      "social": {
        "GitHub": "https://github.com/<github-username>",
        "Twitter": "https://twitter.com/<twitter-username>",
        "LinkedIn": "https://www.linkedin.com/in/<linkedin-username>"
      }
    }
  7. Save the your_github_username.json file.

  8. Navigate to the src folder in your project directory. Open the ProfilesList.json file.

  9. Add your JSON filename (your_github_username.json) to the array of filenames in the ProfileList.json file, like this:

    ["filename1.json", "filename2.json", "your_github_username.json"]
  10. Save the ProfileLists.json file.

  11. Create a new branch: To create a new branch for your profile, run the following command:

    git checkout -b add-profile
  12. Add your changed files: Add changed files to the stage by running the following command:

    git add .
  13. Commit your changes: To save your changes to the branch,, run the following command:

    git commit -m "add: <your-name>"
  14. Push to the branch: To push the changes to the remote repository, run the following command:

    git push origin add-profile
  15. Create a pull request: To submit your changes to the main repository, create a pull request by clicking on the "Compare & pull request" button on your forked repository page.

  16. Wait for review and merge: Wait for the project maintainers to review and merge your changes.

Once your changes are merged, your profile data will be added to the project's Profile.json file and your profile will be displayed on the project's website.

Contributing πŸ‘¨β€πŸ’»

Contributions make the open source community such an amazing place to learn, inspire, and create.
Any contributions you make are truly appreciated!

Contributors 🀝

License


This project is licensed under MIT.

Support πŸ™

Thank you for contributing to our open-source project! We appreciate your support πŸš€
Don't forget to leave a star ⭐

devfind's People

Contributors

07prajwal2000 avatar abhipatel10 avatar akib-vijapura avatar ansisme avatar bharathkalyans avatar cameronsquires avatar cybermanmatt avatar dcryptoniun avatar dependabot[bot] avatar devansh-baghel avatar developer-assets avatar devhabib429 avatar emon1432 avatar harshalhonde21 avatar ibilalkayy avatar ivanov1201 avatar mrswastik-robot avatar muhammadnoorani avatar munish-on-git avatar poorvijn avatar priyankarpal avatar raunakgiri21 avatar ravi2048 avatar sahilatahar avatar sakshi29g avatar shiva-sai-ssb avatar shricodev avatar shubhxg avatar shyamtawli avatar trp02 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

devfind's Issues

ci: add dependabot gh action

We need to add dependabot gh action to update dependencies & gh actions to the latest version automatically.

If there are any updates needed dependabot will automatically create a PR & you need to review it & merge it.

I want to work on this issue.

add profile

Hey there! Exciting news! I've created an open source project called "devFind" where you can add your profile and others can search by skills. Join in and contribute to make it better!

You can start with adding your profile. Check the Readme file if you are a beginner.

Overflow of Links

Describe the bug
If the description of a Developer is big (more than 2 lines) the developer's social links flows out of the box.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
All social links should be inside the box.

Screenshots
Screenshot_1

Additional context
Add any other context about the problem here.

add profile

Hey there! Exciting news! I've created an open source project called "devFind" where you can add your profile and others can search by skills. Join in and contribute to make it better!

feat: <feature-name>

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Fix: Improve Search Filter

Real Time search filter

Current behavior :

Currently ,the filteration of developer is happening after the user press the enter key only.

Expected behavior :

It would be good if we filter the developers on key down itself (real time) , with out need of enter key use.
.

fix: improve scroll on skills container

Currently, the scrolling is not smooth, and when the user scrolls and the cursor points to a skill, the scroll stops.

Steps to Produce:

  1. Search for a user that have skills that overflow. like search for Yash.
  2. Hover to skills section and scroll on mouse.
  3. Scroll is not working smoothly and when the cursor points to a skill scroll is not working.

Add profile

Hey there! Exciting news! I've created an open source project called "devFind" where you can add your profile and others can search by skills. Join in and contribute to make it better!

You can start with adding your profile. Check the Readme file if you are a beginner.

feat: add some issue templates

Here in this project, there are only two Isuue templates. We have to add some Issue templates such as docs.yml, style.yml etc.

I want to work on this issue.

[Feat]: greeting message for PR and issues

What feature?

I have an idea to add a small greeting message whenever someone makes a Pull request or an Issue.

Message should be like:
Hello, {username}, Thanks you for opening an issue.

Soon the maintainers/owers will review it and provide you with feedback/suggestions.
If you think its something urgent, feel free to reach on social handles.

Add screenshots

Add screenshots

Code of Conduct

  • I agree to follow this project's Code of Conduct

feat: Add a profile page ui in client to add developer profile directly

Here is the main problem
A clear and concise description of what the problem is when i was reading the README.md file in which describe how to add your profile to devFind which is very long process .

  1. first fork repository and then clone it local machine
  2. setup the project
  3. go to profile.json file and enter the your profile data in json format.

Now, we have less developer who add their profile, After some time more developer connect and this will burden for reading and writing in profile.json .

Here is the solution i would like
I want to add profile page where users can directly add their profile data without going to all above processes. We also have to add backend for this , and store the developer profile data in database for further use. This way we can improve the web site scalability and help more developers to connect .

add your profile - devFind

Hey there! Exciting news! I've created an open source project called "devFind" where you can add your profile and others can search by skills. Join in and contribute to make it better!

suggest: migrate to vite

We are using CRA for this project. We have to use Vite for better performance.

Why Vite?

Create React App (CRA) has long been the go-to tool for most developers to scaffold React projects and set up a dev server. It offers a modern build setup with no configuration.

But, we see increased development and build time when the project size increases. This slow feedback loop affects developers’ productivity and happiness.

To address these issues, there is a new front-end tooling in the ecosystem: Vite!

I want to work on this issue

[Docs]: add how to install `pnpm` on main readme file

what's wrong in the documentation?

We have migrated our project from npm to pnpm. So We also have to update instruction of installing dependencies. We have added pnpm install but some users don't have pnpm installed on their machine. So update the Readme file according.

Add screenshots

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[Feat]: migrate to `pnpm`

What feature?

We can migrate to pnpm it will be great for us.

Why to pnpm?

  • it's faster
  • disk efficient
  • etc.

I want to work on it.

Add screenshots

Add screenshots

Code of Conduct

  • I agree to follow this project's Code of Conduct

[Feat]: migrate to vite

What feature?

we are using CRA by default & it's taking too much time we can use vite instead of CRA

I Want to work on this issue

Add screenshots

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Project Modification :

Project modification :

Problem :
As the project grows we will have different pages , large code base.

Solution :
Add Routings and remove unneccesary code.

[style]: style of skills tags needs to be improved

What's the style idea?

The style of language tags needs to be improved, and the scroll bar has to go. Nobody understands that it is a scrollable language when they first use it, thus in order to design a user-friendly interface, it should be obvious, as shown in the screen captures below.

Add screenshots

Add screenshots

before :
Screenshot 2023-05-18 at 6 54 18 PM

after :
Change in language tag style

Code of Conduct

  • I agree to follow this project's Code of Conduct

enhancement: Implementation of Responsive Design

The website does not have a responsive design, which can lead to a poor user experience for those accessing it on mobile devices or smaller screens.

It is recommended that responsive design be implemented to ensure that the website/application is accessible and user-friendly for all users, regardless of the device they are using. This could involve updating the layout, font sizes, and images to ensure they are optimized for different screen sizes.

By implementing responsive design, the website would be more inclusive and user-friendly, making it a more accessible platform for all users.

(https://user-images.githubusercontent.com/103263909/234729372-6f7a51c6-7471-4132-a2eb-892e85120699.png)

[Feat]: Search profile based on queries passed from URL

What feature?

I have an idea where it would be easy to find the users with sharing the URLs with others.

for example, https://{domain}?search-query={query}

Attached PR: #219

Please take a look @shyamtawli .

Add screenshots

Add screenshots

image

Code of Conduct

  • I agree to follow this project's Code of Conduct

[style]: Space between the skills and the scrollbar

What's the style idea?

We need to improve the space between the skills and the scrollbar.

Current πŸ‘‡πŸ»

snapvideo.mov

Snapshot of the same πŸ‘‡πŸ» without any padding
Screenshot 2023-05-25 at 9 24 28 PM

Add screenshots

Suggested fix πŸ‘‡πŸ»

fixed.mov

Snapshot of the same

fixed

Code of Conduct

  • I agree to follow this project's Code of Conduct

feat: Responsive design for mobile devices

Description

Feature request to make devfind responsive for mobile devices.

Screenshots

2023-05-06 01_13_35-devFind - Open Source - Brave

Currently website looks like this.

Improvements

Overall making the website mobile friendly and responsive.

convert the profile into cards

Instead of having the profiles occupy the entire horizontal block,we can make them into cards with either 2 or three in one row.
As a user,that looks less monotonic and better.
Screenshot 2023-05-07 at 5 18 48 PM

I can work on this if approved!!
Thank you

feat: Integrate Prettier

Is your feature request related to a problem? Please describe.

  • Currently no code formatting is enforced.
  • This is an issue since every PR will have a different formatting which won't be good to the health of the code base in the long run.

Describe the solution you'd like

  • Integrate Prettier and add some formatting rules for this project.
  • Set up a pre-commit hook to run prettier in CI.

docs: add contributing.md

We need to add a contributing.md file for this project. Where we need to mention everything about how a user can contribute to this project

I want to work on this issue.

Lack of Information and Guidance in devFind UI

The devFind UI only has a search bar with no information about the app's purpose or guidance on what to search for. This can make it difficult for new users to understand how to use the app and find relevant content.

To improve the app's usability and accessibility, we should add a brief description of the app's purpose and functionality, as well as some suggestions for search terms. This information can be displayed prominently on the main page or included in a tutorial/onboarding process.

[Feat]: Update profiles list on character change

What feature?

  • Instead of clicking enter to get the result, we will update the profiles list for every character change.
  • This will make the search experience more better.

Add screenshots

See the below demo,

Feature.mov

Code of Conduct

  • I agree to follow this project's Code of Conduct

suggest: use pnpm insead of npm

We are using npm in this project but if we use pnpm it will be good.

Why pnpm?

pnpm supports faster installation, disk efficient etc.

I want to work on this issue

Make Logo Clickable to Redirect to Home Page

Issue Description:

  • Currently, in the project, the logo is displayed in paragraph format, with the name "devFind" where "dev" and "Find" are written differently. However, the logo is not clickable and does not redirect users to the home page when clicked. This issue aims to enhance the user experience by making the logo clickable and linking it to the home page.

Expected Behavior:

  • When the logo is clicked, it should redirect the user to the home page of the project.

Steps to Reproduce:

  1. Open the project.
  2. Locate the logo displayed in paragraph format, specifically the "devFind" section.
  3. Attempt to click on the logo.

Current Behavior:

  • The logo is not clickable and does not redirect the user to the home page.

Proposed Solution:

  • To resolve this issue, the following steps can be taken:
  1. Identify the HTML element or container that contains the "devFind" logo.
  2. Add an appropriate hyperlink tag () or event listener to make the logo clickable.
  3. Set the destination of the hyperlink or the action of the event listener to redirect the user to the home page.
  4. Verify that the logo now redirects the user to the home page when clicked.

Additional Considerations:

  • Ensure that the hyperlink or event listener is implemented in a way that maintains the overall design and styling of the logo.
  • Test the solution across different browsers and devices to ensure compatibility.
  • Consider adding a hover effect or other visual cues to indicate that the logo is clickable.

Note: It's important to have a good understanding of the project's codebase and structure in order to implement this solution effectively.

Add screenshots

This is the sidebar logo, which is to made clickable
feature add

Code of Conduct

  • I agree to follow this project's Code of Conduct

[Bug]: improve scroll (horizontal) on skills section

What happened?

I found a BUG 🐞
Currently, the scrolling is not smooth, and when the user scrolls and the cursor points to a skill, the scroll stops.

Steps to Produce:

Search for a user that have skills that overflow. like search for Yash.
Hover to skills section and scroll on mouse.
Scroll is not working smoothly and when the cursor points to a skill scroll is not working.

Add screenshots

No response

What browsers are you seeing the problem on?

Chrome

Code of Conduct

  • I agree to follow this project's Code of Conduct

feat: Add Routes

Lets Add Different routes in App.js file
As the time goes the project will have multiple pages like Home,profile,Detailed developer profile etc...

Solution :
Lets Add the different routes in App.js file and make the code look good , simple

add profile

Hey there! Exciting news! I've created an open source project called "devFind" where you can add your profile and others can search by skills. Join in and contribute to make it better!

You can start with adding your profile. Check the Readme file.

feat: migrate to `pnpm`

Here we are using npm for this project. We can use pnpm instead of npm

Why pnpm?

  • it's faster than npm
  • disk efficient
  • etc

I want to work on this issue

[style]: Make the Social media icons hover

What's the style idea?

The social media icons are static.:
image

Add screenshots

I can add hovering effect to it:
image
After hovering:
image
Please Assign this issue to me.

Code of Conduct

  • I agree to follow this project's Code of Conduct

feat: Add autocomplete search

It would be much better if there is a autocomplete feature in the search box
it helps to find relevant information and it helps users find what they’re looking for faster it helps them narrow down their search results without wasting time.

add profile

Hey there! Exciting news! I've created an open source project called "devFind" where you can add your profile and others can search by skills. Join in and contribute to make it better!

You can start with adding your profile. Check the Readme file if you are a beginner.

Updated the README.md

Hey !
I made some structural changes to the README and added a few sections to make it more visually appealing

Do let me know if there any changes to be made
(linking a PR)

feat: Add Toggle Theme Functionality

As a user, I want to be able to switch between light and dark themes on the website/app, so that I can choose the one that is easier on my eyes or fits my preferences.

To implement this feature, we will need to add a button or switch somewhere on the page that the user can click or tap to toggle the theme. When the user switches the theme, we will need to update the CSS styles accordingly to apply the appropriate colors, fonts, and other design elements.

In addition, we should consider storing the user's preference for the theme in a cookie or local storage, so that it persists across page reloads and sessions.

By adding this functionality, we can improve the user experience and make the website/app more accessible and customizable for our users.

I think there should we add this
(https://user-images.githubusercontent.com/103263909/234728386-edf90ea0-18b5-40be-bc0b-a0bc6c8fee2a.png)

I want to work on it.

More Search Filters to Improve Collaboration Opportunities in devFind

I noticed that you're only filtering the devs based on their skills but there are several other way that could be added to devFind to help users find the right collaborators for their projects. Some of these ways include:

  • Location: Allow users to filter collaborators based on their geographic location, which can be useful for finding collaborators in a specific region or time zone.

  • Availability: Allow users to filter collaborators based on their availability, including their preferred working hours or the amount of time they can commit to a project.

  • Experience level: Allow users to filter collaborators based on their level of experience, including junior developers, mid-level developers, and senior developers.

  • Project type: Allow users to filter collaborators based on the type of project they are working on, such as web development, mobile development, or data science.

  • Communication preference: Allow users to filter collaborators based on their preferred modes of communication, such as email, chat, or video conferencing.

By adding these filters, devFind can provide a more comprehensive and tailored search experience to its users, allowing them to find the right collaborators for their specific project needs

add profile

Hey there! Exciting news! I've created an open source project called "devFind" where you can add your profile and others can search by skills. Join in and contribute to make it better!

You can start with adding your profile. Check the Readme file if you are a beginner.

ci: add JSON checker gh action

We are collecting data from users in a JSON format. So sometimes we can unfortunately add the wrong JSON code. so to validate we can add a JSON checker gh action so that if there is any wrong with JSON code this gh action will show you

I want to work on this issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.