Giter VIP home page Giter VIP logo

vatsalsinghkv / easy-fix Goto Github PK

View Code? Open in Web Editor NEW
40.0 40.0 22.0 593 KB

Discover the ideal platform to find easily manageable issues, designed to inspire and encourage individuals to initiate their contributions to the open source community.

Home Page: https://easy-fix.vercel.app

HTML 4.33% JavaScript 17.89% CSS 2.01% Shell 0.09% TypeScript 75.68%
github-api github-issues hacktoberfest hacktoberfest2023 neon open-source react tailwindcss

easy-fix's Introduction

My Portfolio

About Me

  • πŸ‘©πŸ»β€πŸ’» I am a first year Computer Science Postgraduate (MCA) at Banaras Hindu University
  • β˜€οΈ Contributing to open-source projects (Open Source is always fun)
  • πŸƒ In absolute love with ReactJs & NextJs with TypeScript & TailwindCSS and building web applications with it
  • πŸ“– I’m currently learning Mobile Development with React Native & Data Structures and Algorithms

Domain of interests

  • πŸ’» Full-stack Web Develppment
  • πŸ“± Mobile Development
  • πŸ‘½ Cyber Security
  • 🦾 Artificial Intelligence

Languages & Tools

programming languages

frameworks

tools

My Holopin Profile

An image of @vatsalsinghkv's Holopin badges, which is a link to view their full Holopin profile

Vatsal's github-readme-stats Vatsal's github-readme-streak-stats

Vatsal's wakatime stats vatsalsinghkv

activity graph

vatsalsinghkv profile-details vatsalsinghkv github stats

vataslsinghkv

easy-fix's People

Contributors

akartis-dev avatar azr-arch avatar dhairyamajmudar avatar fekete965 avatar iib3nceii avatar josediego avatar prakash-ravichandran avatar premsaivarmachekuri avatar premtw avatar rishuxd avatar s4jn avatar vatsalsinghkv avatar zakhaev26 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

Watchers

 avatar  avatar

easy-fix's Issues

can you deploy this website

What would you like to share?

can you host this project live on netlify or github so anyone on can see its live perview

✨ Browser

Mozilla Firefox

Checklist πŸš€

[FEATURE] Add scroll to top button

Description

Adding Scroll to top button will give these benefits:-
Enhanced User Experience: Users don't need to manually scroll upwards, which can be tedious on very long pages.
Improved Navigation: Provides an easy and quick way to access the top menu or any other content located at the top.
Adaptive Design: Can be designed to appear only after the user has scrolled down a specific amount, ensuring that it doesn't interfere with the initial page view.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Introduce storybook

Description

Adding storybook to the project would let us build, manage and easily test our UI components.
The changes can also be deployed to a preview to observe them.
That would also allow people to create separate components first where people can review and play with the components before an integrating it into the website.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Introduce more Specific Language Supports in the Application

Description

This Feature will allow to list repos with different languages like Go, Rust ,Ruby etc. instead of the All option. This provides more fine streamlining of people connecting with a repo with a language they know.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Improve use-fetch hook

Description

The following hook is not very versatile.
I would improve the API to the following:

  1. It would take in a function that returns a promise () => Promise
  2. A reducer would be used to avoid state unnecessary batching
  3. The return value would be the following: data: T | null, error: RequestError (will be defined as a model), status: RequestStatus (will be defined as a model), isLoading: boolean, hasError: boolean, `run: () => Promise

The API might change, I will keep this issue updated.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Adopting a Weight-based ranking of issues when they are rendered

Description

Currently the Application lists the Issues according to :

  • Best-Match
  • Comments
  • Reactions
  • Updated

However, there are many issues that have already been assigned by maintainers to someone. To enhance the usability of the app, it would be more helpful to prioritize issues that don't have an assigned label. We can achieve this by implementing some sort of weighting mechanism that will ensure these unlabeled issues receive greater visibility on the screen.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Show number of conversations in the issue

Description

Show the no. of conversations or activity in the issue, so user can get the idea of the activity of the issue.

Resource:

Screenshots

UI can be something like

just before stars, feel free to improve the UI
Screenshot 2023-09-30 at 12 48 21β€―AM

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] multiple language selection

Description

Ability to select multiple languages in the filter section. I'd love to work on this.

Screenshots

image

✨ Browser

Microsoft Edge

Checklist πŸš€

[BUG] Pagination doesn't work for more than 1 sibling buttons

Description

Issue

Pagination works when we have set 0 or 1 TOTAL_SIBLING_BUTTONS.

Like for 0 it shows pagination as 1... 5 (selected)... last btn
Like for 1 it shows pagination as 1... 4, 5 (selected), 6... last btn
But for 2 it shoes pagination as 1... 3, 5 (selcted), 7... last btn. (it missed 4 and 6 page button).

Steps to Solve it

  • Change the TOTAL_SIBLING_BUTTONS buttons by editing src/utils/config.js to generate the error.
  • You need to check the logic and refine it in src/components/PaginationButton.jsx.
  • You can test it out by running yarn test:watch and changing TOTAL_SIBLING_BUTTONS value

Screenshots

  • ❌ TOTAL_SIBLING_BUTTONS = 2

Screenshot 2023-09-27 at 12 13 03 PM Buttons Missing 4 & 6
  • βœ… TOTAL_SIBLING_BUTTONS = 1

Screenshot 2023-09-27 at 12 14 42 PM

✨ Browser

Google Chrome

Checklist πŸš€

[BUG] API throwing 401 error

Description

APIs used to get the issues are throwing the 401 Bad Credentials error.

Screenshots

image

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Improve file structure

Description

Introduce src/lib/ dir, and put all the api/ hooks/ & utils/ files init

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Add more filtering options

Description

The current website provides a very clean to use interface to find GitHub issues.

However, it has very less filtering options. By filtering options, I mean the following

  1. Ability to filter more languages
  2. Filter by User
  3. Custom Filters

I believe that I can add and create the filters. Here is how I would do so:

  • Use the GitHub API to get the repos based on issues, then hold all the languages used by them in a hook and display it on the filter bar
  • Same as above, I would also add filter by user
  • GitHub also allows us to filter by writing a query in this syntax is:issue is:open sort:updated-desc label:hacktoberfest. I can create a textbox that filters the content as so

I have a lot of experience working with React and TailwindCSS frontends, here are a few examples (1, [2])(https://github.com/newtoallofthis123/ReactSite), 3)

I got the repo working locally and have gone through the codebase and understood it. I believe I can get this done.
I will not change any of the existing codebase and everything would be done using well documented commits and comments. Everything will also be well tested before committing.

Please assign this issue to me for Hacktober Fest.

Screenshots

No response

✨ Browser

Brave

Checklist πŸš€

[FEATURE] Make Footer more attractive by adding Social Media Handles

Description

Adding Social Media Handles will allow other users to know more about you and about project;
benefits of adding social media handles to a project:

Engagement: Connect with users and foster community discussions around your project.
Visibility: Enhance project visibility as content gets shared or discussed on social platforms.
Feedback: Get direct user feedback and insights to iterate and improve the project.
Drive Traffic: Direct interested users from social platforms to your project page.
Trust: Show that the project is active and updated, building user trust.
Updates: Share project updates, milestones, and news effortlessly.
Networking: Connect with potential collaborators, contributors, or stakeholders.
Linking social media handles in your project helps in bridging the communication gap, expanding reach, and fostering an active community around your project.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Increase GitHub API Limit

Description

This project heavily relies on the GitHub API for its functionality. However, the current API rate limit might not be sufficient for larger scale usage or during peak times.

To address this, I propose that we increase the API limit by using a personal access token. This would involve generating a new token with the appropriate scopes and adding it to the project configuration.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Option to Sort the issues

Description

Just like the filter category, a sorting category is also needed which would have the functionality to sort the issue by time (last created or last updated) and by stars can also add [].

Can also add the functionality of sorting by ascending and descending. By default sorting should be done by time.

Resources:

Screenshots

Something like this:

Screenshot 2023-09-30 at 12 32 42β€―AM

Design Inspiration

Screenshot 2023-09-30 at 12 27 20β€―AM

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] GitHub Button and Dark Mode Toggle in Navbar

Description

In the current project, we lack two essential features that can significantly enhance the user experience and accessibility. This proposal suggests the addition of a GitHub button and a Dark Mode toggle button.

GitHub Button

The absence of a GitHub button in the project's navigation bar hinders users' ability to easily navigate to the GitHub repository associated with the project. This button should be prominently placed, allowing users to seamlessly access the GitHub page where they can contribute, start the project, or explore the codebase.

Dark Mode Toggle

Furthermore, introducing a Dark Mode toggle button would cater to users who prefer a darker interface for various reasons, including reducing eye strain during nighttime use. This feature can improve accessibility and make the project more user-friendly.

By implementing these two features, we can enhance the overall user experience and engagement with the project. Users will find it easier to engage with the community, contribute to the project, and customize their viewing experience.

Screenshots

image

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Improve context provider

Description

I would like to propose improving the UseUrlProvider.
I would make the following changes:

  1. Rename UseUrlProvider to UrlProvider as this is not a hook but a context provider hence no need to add use at the beginning
  2. Move this file to a context folder
  3. Migrate the provider to TS
  4. Make the related hook(s) safer

Screenshots

No response

✨ Browser

Brave

Checklist πŸš€

[FEATURE] Migration to TypeScript

Description

Tasks to perform

  • Install TypeScript
  • Add path variables in tsconfig such that: @ for '/src/' and ~ for '/public/'
  • Migrate src/containers/*.jsx to *.tsx,
  • Change import path to include @ & ~. Example@/components/*.jsx

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

[FEATURE] Enhancement: Reflect application state in URL for better shareability

Description

Currently, the application uses React state to manage the selected language and other filters. This works well for a single user session, but it makes it difficult to share a specific state of the application with others. For example, if I filter the issues by a specific language and want to share this view with a colleague, there's no easy way to do that.

My suggestion is to reflect the application state in the URL using query parameters. This way, when a user selects a language or applies other filters, the URL will update to include these selections. Then, this URL can be shared with others who will see the exact same state when they open the link.

For instance, if a user has selected β€˜JavaScript’ as the language and is on page 2, the URL would look something like this: https://easy-fix.vercel.app/?language=javascript&page=2. This makes it easy to share a specific view of the site, as all the selected values are included in the URL.

This can be achieved using React Router or without react router (by using window.history but this will not be clean as router approach).

This approach is often used in web applications to make them more user-friendly and shareable. I believe it would be a valuable here.

Screenshots

No response

✨ Browser

Google Chrome

Checklist πŸš€

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.