Giter Site home page Giter Site logo

himanshunarware / devlabs Goto Github PK

View Code? Open in Web Editor NEW
163.0 2.0 258.0 24.39 MB

DevLabs is a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community

Home Page: https://www.devlabsstore.tech/

HTML 1.32% JavaScript 66.89% CSS 31.51% Dockerfile 0.29%
css html javascript reactjs open-source tools dwoc bootstrap expressjs hacktoberfest2023

devlabs's Introduction

Laptop DevLabs

Welcome to DevLabs, a website where you can search for free tools that are useful for your daily needs. This application is created by the incredible open-source community. On DevLaps, you can discover a collection of free tools that can assist you in various aspects of your life. Moreover, you have the opportunity to contribute to this project by adding more tools to the database.

Check out the live project at DevLabs

DevLaps

๐ŸŒŸ Our Mission

Our website provides a platform for contributors from all over the world to share their ideas in the form of helpful websites that are free to use. It helps us save a ton of time by allowing us to access a list of all the websites in one location. Whether it be a tool or an educational platform, we may discover any type of website here. This makes it a platform for sharing knowledge!


๐Ÿ’ป Tech Stack

JavaScript logo

HTML5 logo

CSS3 logo

React.js logo


๐Ÿš€ Quick Start

Contributions are welcome! If you have any ideas, suggestions, or bug fixes, please open an issue or submit a pull request. Make sure to follow the project's code of conduct.


๐Ÿ“ฆ Installation

You can clone the project directly from this repo to your local system.

1. Clone the Repo

git clone https://github.com/username/Devlabs.git

2. Install Dependencies

npm install

3. Start Development Server

npm start
#or
npm run dev

4. Create Backend Environment

MONGODB_URI=<mongodb connection uri for the database>
PORT=<port number on which backend is running>
FRONTEND_URL=<url of the frontend>
MAIL=<email from which to send mail to self>
PASSWORD=<passkey corresponding to above mail>

5. Create Frontend Environment

All the environment variables for react must be prefixed with REACT_APP_.

REACT_APP_BACKEND=<url of the backend>

6. Create a New Branch

git checkout -b YourBranchName

7. Make Your Changes to the Source Code

To add a new tool:

Go to src > DB > product.json & add your code

{
    productName: "< App_Name >",
    category: "remote | resume | tweet | ai | ethical | movies | extensions | tools",
    image: "< Image-Url >",
    link: "< Link_to_the_website >",
    description: "< Description of product >"
},
  • Ensure that your URLs are short. It is recommended to use bitly for URL shortening.
  • Descriptions should not exceed 10-12 words.

8. Stage Your Changes

โš ๏ธ Make sure not to commit package.json or package-lock.json file

โš ๏ธ Make sure not to run the commands git add . or git add *


Instead, stage your changes for each file/folder specifically.

git add "<files_you_have_changed>"

9. Commit Your Changes

git commit -m "<your_commit_message>"

10. Push Your Local Commits to the Remote Repository

git push origin YourBranchName

11. Create a Pull Request

Create a Pull Request!

Let's Collaborate and Make DevLabs Even Better! ๐Ÿ’ป๐ŸŒŸ

devlabs's People

Contributors

akhilasunesh avatar alaynashaheen avatar amanr-dev avatar ashutoshdash1999 avatar ayush-848 avatar ayushmaanagarwal1211 avatar chandu6702 avatar codedrinks270 avatar coder-pink avatar davidkrupa avatar dhruv8433 avatar himanshunarware avatar kiran-pande-30 avatar kushalkumar1362 avatar lymah123 avatar maradadivyasree020 avatar mayank77maruti avatar mukilan2815 avatar ogadavid avatar panwar8279 avatar prashantanand03 avatar rakshit-gen avatar root-0101 avatar sailaja-adapa avatar sarthaksharma27 avatar suhainafathimam avatar utsavladia avatar vaishnavimankala19 avatar vanicoding27 avatar vihar-s1 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

devlabs's Issues

Enhancing User Experience with Hover Effects on Cards

Is your feature request related to a problem? Please describe.
The problem is that without hover effects, cards on a web page may appear static and less engaging to users. This can lead to a less immersive and interactive user experience.

Describe the solution you'd like
The solution is to add hover effects to cards. When a user hovers their mouse pointer over a card, various visual changes can occur, such as:

1- Highlighting: The card can change color, making it clear that it's interactive.
2- Scaling: The card can slightly enlarge to provide a subtle 3D effect.
3-Shadow: Adding a shadow beneath the card can create the illusion of depth.
4- Information Display: Additional information or actions can be displayed when hovering, like showing a button for more details.

These hover effects not only make the cards more visually appealing but also convey interactivity, encouraging users to engage
with the content.

** Add screenshot
Screenshot (40)

Checklist
Example Fill x { [x] } into bracket

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • I have starred the repository *

Improve the UI of the header section

Is your feature request related to a problem? Please describe.
Improve the header section of the website. make it responsive and its UI better.

Improve the UI of the backtotop button

Describe the solution you'd like
Improve the UI of the backtotop button

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • Working under Slop 3.0 *

We can Design Logo and Website Color

The current logo and color theme of our website are not visually appealing and do not align with the quality we want to represent for our event. It's crucial to update these elements to provide a more captivating and professional user experience.

Improve the UI of the about section

Describe the solution you'd like
Improve the UI of the About section

** Add screenshot

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • Working under Slop 3.0 *

Issue: Website does't have a 404 page

Issue:
The project currently lacks a user-friendly 404 error page, and the link to return to the home page. I propose the addition of a custom 404 page with improved styling and a button link to enhance user experience.

Details:

  1. Custom 404 Page: A custom 404 error page will be created to provide a more visually appealing and informative experience for users when they encounter a non-existent page.

Proposed Changes:

  • Create a custom 404 page component.
  • Add an image to the 404 page to make it more visually appealing.
  • Style the 404 page for a professional look.
  • A back to home page button.

Expected Benefits:

  • Improved user experience for users encountering 404 errors.
  • Better aesthetics and professionalism.

Additional Information:
This issue aims to improve the overall user experience of the project by addressing the 404 error page's appearance and functionality. These changes will make the project more user-friendly and visually appealing.

Issue Type: Enhancement

Issue: "Need to Add Bookmark Deletion Feature"

Problem Description:
When users bookmark a product, there is currently no option available to delete or remove it from their list of bookmarked items. This leads to a lack of control and may result in a cluttered and unmanageable bookmarked item list.

Is your feature request related to a problem? Please describe.
Users are frustrated when they cannot remove or delete items from their list of bookmarked products, leading to a cluttered and unorganized bookmarked items list.

Solution Description:
To address this issue, we should implement a solution that allows users to easily manage their bookmarked items by providing a way to delete or remove items from their list.

** Add screenshot
Screenshot (34)

Checklist
Example Fill x { [x] } into bracket

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • I have starred the repository *

Display Issue: Link and Bookmark Button Overlap

Describe the bug
This bug report highlights an issue where the link and bookmark buttons on the page are slightly overlapping, causing a visual display problem. We need to address this to ensure a seamless user experience.Description: The issue involves a display anomaly where the link and bookmark button exhibit a slight overlap, potentially impacting the user interface. Screenshots and additional details will be provided to facilitate a comprehensive understanding and resolution of the problem.

Expected behavior
The link and bookmark buttons should be properly spaced and not overlap, ensuring a clean and user-friendly interface.

Screenshots
Screenshot 2023-10-07 222733

Example Fill x { [x] } into bracket

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • I have starred the repository *

Console errors in the deployed version

Bug Description
A bunch of unresolved errors and log statements in the console in development server and in the deployed version as well.

Expected behavior
A clear console helps for better debugging, user error tracking, and provide improved security by protecting sensitive data.

Screenshots
image

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • I have starred the repository *
  • Working under Hacktomberfest/Hacksquad*
  • Working under Slop 3.0 *

Improve responsiveness of the homepage

Homepage doesn't have proper responsiveness between 425px - 650px

issue
  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • I have starred the repository *
  • Working under Hacktomberfest*

Want to enhance the Design of Default Scroll Bar provided

As you know browser provides you with a default scroll bar in the right side of the screen. This Scroll bar doesn't matches with the Design of the website do I intend to give it a matching design i.e color same as that of nav-bar and modifying the its thickness.

I really wish to work on this task, so can you assign me this one too. Its a easy task so I can complete it within no time.

Improvement of the Twitter Logo Icon to X

Describe the bug
Improvement of the Twitter Logo Icon to X

Screenshots
Devlads contacts

Desktop (please complete the following information):

  • OS: [Windows]
  • Browser [Brave]
  • Version [1.58]

Please Assign me the issue under hacktoberfest

Sidebar Navigation Auto-Close and Search Bar missing

Describe the bug
Sidebar Navigation Auto-Close: When navigating through the sidebar navigation items, the sidebar does not close automatically after selecting an item. Users expect the sidebar to collapse after clicking on a navigation link for a better user experience.

Bookmark Page Responsiveness: The responsiveness of the bookmark page is not correct. It does not adapt properly to various screen sizes, leading to layout issues and a less-than-optimal user experience.
Missing Search bar in smaller screens: : Due to missing responsiveness Search bar icon is missing

Expected behavior

  1. After clicking on a sidebar navigation item, the sidebar should automatically collapse to provide more screen space for the main content.

  2. The bookmark page should be responsive, adjusting its layout and elements gracefully to fit different screen sizes and orientations.

Screenshots
Screenshot 2023-10-21 092900

Example Fill x { [x] } into bracket

  • [x ] I have checked the existing issues *
  • [ x] I have read the Contributing Guidelines *
  • [ x] I have starred the repository *
  • [ x] Working under Hacktoberfest/Hacksquad*

Username may go outside of the container if it's too long

Describe the bug
If the username is too long, it may go beyond borders of the container on some screen sizes (I'm on 13" laptop, viewportsizer shows screen size: 1263 ร— 571)

Expected behavior
Hide some part of username that i overflowing the container

Screenshots
3

Example Fill x { [x] } into bracket

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • Working under Hacktomberfest*

Improving UI of the card

Problem
The current design for cards, does not work well with the background and the site because most of the logos get hidden away due to the transparency, and in others the card size is affecting how the logo is displayed. For eg: in the image below cuvette logo cannot be seen and internshala logo isn't clear either.
image

Solution
A better card design would be having a solid background colour with an increased width so that each row contains max of 4 cards, but everything is clear and concise. Kindly refer to the below image for better understanding. This also solves the problem of overflow of text and brings uniformity to the website. We can discuss the colours as per your requirement.

Screenshot 2023-10-18 at 1 28 55 AM

Checklist

  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • I have starred the repository *
  • Working under Hacktoberfest/Hacksquad*
  • Working under Slop 3.0 *
    Looking forward to collaborating!

"Add CSS Styling to Center Navbar Items"

Is your feature request related to a problem? Please describe.
The Navbar items in the current implementation are not centered, causing a visual misalignment.

Describe the solution you'd like
I would like to add CSS styling to center the Navbar items, creating a more visually appealing and centered layout.

Add Screenshot

Checklist:

I have checked the existing issues.
I have read the Contributing Guidelines.
I have starred the repository.

Responsiveness of tabs on the home page

Describe the bug
Hovering over links in cards changes the position of the links (I'm on a 13" laptop; viewportsizer shows screen size: 1263 ร— 571)

Expected behavior
It works just like on other screen sizes

Screenshots

  1. Standard view:
1 2. While hover over: 2
  • I have checked the existing issues *
  • I have read the Contributing Guidelines *
  • Working under Hacktomberfest*

Scroll To Top Button

At the present state the website really looks very well but it can be enhanced even more by adding a "Scroll To Top" button in the bottom right of the website.
This enhancement of feature will really come in handy for many users.

I would like to work on this feature, so can you please assign me this task

Home button issue in sidebar

Describe the bug
The 'Home' button on the sidebar is taking a different route ("/home") than the "Home" hyperlink on the navbar ("/"). It leads to a blank page with no navbar present

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Sidebar'
  2. Click on 'Home'
  3. See error

Expected behavior
The route should be the same for both links.

Screenshots
image

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.