algolisted-org / algolisted Goto Github PK

Remove the contests from the table which has expired.

Compay interview stats.

I want the website to be listed on google, and be accessible on google search with an exact match of the website name at least.

I have already added the requested google scripts, and meta tags, but still unable to figure out why the site doesn't show up even after 10 days.

On the page https://algolisted.com/coding-sheets/striver-sde-sheet, I have coding sheets. I have a lot of coding sheets in my mind that I want to add. I don't know what would be the best way to integrate those. https://takeuforward.org/interviews/strivers-sde-sheet-top-coding-interview-problems/ is an example of a coding sheet.

I think scrapping the data and converting it to JSON format is the best way to go.

Suggestions are welcome.

Below 1100 we are not showing any screen on the device. You can check out https://algorithmist-dev.web.app/ by reducing the page size.

The task is to make the landing page tablet and mobile friendly, the page is already responsive for 1100 and above.

Happy coding 🚀

I can fix this issue please assign me this issue

I would like to enhance the user interface for the LeetCode contest analysis feature in the project. The technical aspects of data retrieval and display are already functional; however, the current user interface does not meet the desired standards. Our primary objective is to align the UI with the design provided in the Figma link below:

Click here to go to Figma Page

The primary focus will be on improving the appearance and functionality of the charts in the user interface. Other UI enhancements may be addressed in separate issues to streamline the development process. Your feedback and collaboration on achieving the desired UI improvements are highly appreciated.

Here are some key points to address :

1. The primary file that requires modifications is located in the path client > Screen > ContestAnalysis.js.
2. The line chart component is situated in client > Components > LineChart.js.
3. You have the flexibility to customize the colors in the user interface as per your preference; it's not mandatory to strictly adhere to the Figma color scheme. Just try to keep the structure the same as Figma.

Notification to: @YakovlevCoded @mika-alaoutinen @Yeranosyan @coditech0926 @Njengah @redonwhite @Ktn-mariam @surajthecreator003 @jhonnold @Arantiryo @julianna-ciq @BK2004 @deborasous @SSYernar @oprstchn @bhogan-mitre @dmt0

Create an animation for the progress bar.

It would be great if you could add a feature that allows for smooth progress, where the progress bar width increases gradually (over a period of about 250 ms) as questions are completed, rather than instantly. This would improve the user experience.

Originally posted by @Nayaker in #57 (comment)

SEO work on the site

I am working on it

The problem we are trying to address is the poor mobile responsiveness of the table on https://algolisted.com/coding-competitions. The table appears as intended when viewed on a laptop or display with a width of 1100 pixels or more. However, when the display width is smaller, the table becomes distorted and difficult to use. Our goal is to improve the appearance and usability of the table for users on mobile devices.

Laptop screenshot:

Phone Screenshot :

Design I want on mobile responsiveness : Sorry for the bad drawing, coz I don't know how to use figma :)

https://algorithmist-dev.web.app/blogs/all-shortest-path-algorithms check this page out. You can see a couple of codes written on black background, which are images.
Some people might want to copy the code so I want the code to be written in text, like in other coding websites.

The rule is that only authorized users should be able to use the API, and we want to restrict calls to it from any unauthorized sources. To access the API, you'll need an authentication key stored in your environment settings. Also, try to do some encryption which will convert the values into other characters, and on the frontend side it can be extracted.

Although CORS can help with this, it has some limitations. So, if you have a clever solution, please help us solve this problem in a better way!

Hey there! This issue is tailor-made for newcomers who are just getting started with their contributions and have some development skills under their belt. We're here to welcome and support you on your journey! 🚀

We're kicking off this issue to enhance our user experience by adding some exciting friend management features. With this update, users will be able to effortlessly see their friends' performance in a contest.

Tasks :

0. The file you need to work upon is client > src > Screen > ContestAnalysis.js
1. Create a form with fields for the friend's username and picture URL.
2. Trigger this form when the user clicks the "add friend" button.
3. Store the entered data in local storage.
4. Utilize the country-rank-data retrieved to determine the friends's rank.
5. Since the API does not provide the number of problems solved, use a dummy value for it or just write N/A.
6. Make the cross button functional to allow users to remove a friend from local storage.

How to run the repo locally :

Check #104

Important :

1. Please don't change any file other than what is mentioned - if you want please mention it below.

How to get your PR accepted :

1. Consider giving our project a star as it helps enhance the project's credibility.
2. Write the PR title as - # 107 Issue Resolved | {something you want to mention}
3. Write a good PR comment with a screen-shot of the work
4. Make sure to generate the PR to the main branch of this repository.

I want to create an ATS System where candidates can see how effective their resume is, based on some predefined features like -
If he has experience in a big company or has added stuff quantifying them then it's a plus point. Whereas having an unorganized resume content would be considered a negative point.

This is my basic idea for this feature, to take inspiration one can visit https://resumeworded.com/score.php

The navigation goes from the top:

To the left:

The inconsistencies might confuse new users. I think we should maintain primary navigation at the top, but have secondary navigation on the side, similar to how TailwindCSS does it:

Personal task : Just a reminder that I will have to fix this issue.

I want people to get to see the blogs of the topic they search if available on our database on the all blogs page but categorized.
If required I can give a screen shot here for more clarity on what I am talking about.

The issue is not being entertained as of now since the data is static. Once the backend is connected, we will look for this issue.

Hey there! This issue is tailor-made for newcomers who are just getting started with their contributions and have some development skills under their belt. We're here to welcome and support you on your journey!

Issue :

The screenshot above displays an incomplete page. As our website serves various purposes and has a significant user base, we aim to maintain a record of contributors' activities. On this page, our intention is to showcase data such as their usernames, a log of all the pull requests (PRs) they've initiated, and the objectives behind each of these PRs.

Objectives :

1. Create a JSON file : Be creative in finding what kind of data would be good to show for each user. Eg. username, profile pic, pull-request dates and reason etc. If you want to get some real data you can check the previous Algolisted accepted pull requests. Create the JSON file named contributorsData.json in client > src > Components
   Note : Create at least data for 5 users.

2. Call the JSON in ContributorWork.js : Call the JSON file in ContributorWork.js which is already present in client > src > Screens > ContributorWork.js - now be creative in the UI how you want to show the data of contributors.
   Note : Write the CSS in the same file using Material UI

Important :

1. Please don't change any file other than what is mentioned - if you want please mention it below.

How to run the repo in local environment :

1. Go inside client in terminal
2. Run command npm install
3. Run command npm start or yarn start

How to get your PR accepted :

1. Consider giving our project a star as it helps enhance the project's credibility.
2. Write the PR title as - # 101 Issue Resolved | {something you want to mention}
3. Write a good PR comment with a screen-shot of the work
4. Make sure to generate the PR to the main branch of this repository.

Currently, the data being pulled from the API has a date and we are calculating the time left from it only once. The new code should update that time left portion every minute.

• Suppose we have a competition that has been added to the backend but is still to open its registration. We want to show the position of registration status as not started and the time left for it to start.

• I have recently added two more fields in the API, the registration starting date and the registration starting time of that day.
  

• Basically, you need to implement the logic for the below.
  

Hey there! This issue is tailor-made for newcomers who are just getting started with their contributions and have some development skills under their belt. We're here to welcome and support you on your journey! 🚀

Since we didn't plan from the start that we would go for the dark mode, it's hard now to get the whole project in dark mode. Hence we are going one by one, one page after another. This would be the first!

Tasks :

0. Your task involves working on the file located at client > src > Screen > CodingSheets.js.
1. Generate a global CSS file named "dark mode colors."
2. In the above global CSS file, establish color variables that can be adjusted later, such as --dark-color-1: rgba(0,0,0,.5).
3. Create a button, as described, within the "cc-header" file.
4. Implement a function where toggling the button results in a switch to dark mode on the page.
5. Additionally, save this preference in local storage so that if a user previously used dark mode, it will be retained for their next visit.

How to run the repo locally :

Check #104

Important :

1. Please don't change any file other than what is mentioned - if you want please mention it below.

How to get your PR accepted :

1. Consider giving our project a star as it helps enhance the project's credibility.
2. Write the PR title as - # 109 Issue Resolved | {something you want to mention}
3. Write a good PR comment with a screen-shot of the work
4. Make sure to generate the PR to the main branch of this repository.

Hi folks 🤠,

OVERVIEW:

I'd like to suggest the addition of a new function to the Interview Topic Summarizer, an innovative application developed to help people prepare for technical interviews. The proposed feature aims to provide users with company-specific statistics on the number of questions asked and their difficulty level in specific topics such as Data Structures and Algorithms (DSA), Computer Networks (CN), Operating Systems (OS), Database Management Systems (DBMS), and Object-Oriented Programming (OOPS).

PROBLEM STATEMENT:

Preparing for technical interviews is an important step in getting a job in the computer business. However, candidates frequently lack a vision of the exact themes on which they should focus during interviews with various companies. Each employer may stress different areas of knowledge, making it difficult for candidates to appropriately prioritize their preparation.

PROPOSAL:

The proposed feature for the Interview Topic Summarizer seeks to address this challenge by offering users company-wise statistics for their selected topics. Here are the key functionalities:

Key Features

1. Topic Selection: Users can choose from a list of technical topics, such as DSA, CN, OS, DBMS, and OOPS.

2. Company-wise Statistics: After selecting a topic, users can view a graph or chart that displays company-wise statistics for that specific topic. This graph will include information on the number of questions asked by each company for the chosen topic.

3. Difficulty Level: The statistics can also categorize questions by difficulty level (e.g., easy, medium, hard) to help users gauge the complexity of questions asked by different companies.

CALL TO ACTION:

I respectfully request that the creators of the Interview Topic Summarizer take this suggestion for the addition of the company-specific statistics function into consideration. This addition has the potential to greatly improve the tool's functionality and offer users useful insights for more targeted interview preparation.

Thank you for your time and consideration, and I look forward to hearing your thoughts on the implementation of this feature.

ADDITIONAL INFORMATION:

I have attached a Figma file for reference : Figma

Create a good detailed video of how to run the repo and also create a page on the website in client > src > Screens by the name runInLocalEnvironment.js and show your video!

Write your skills in the comments, can be anything from React JS to if you are good at note-making. We will love to work with you.

I am trying to get my website listed on Google and to appear in search results when the exact website name is searched. I have already added the necessary Google scripts and meta tags, but the site has not shown up in search results after 10 days. I am unsure of what else may be causing this issue.

Everything relevant is on the index.html file

Brief about Coding Sheets page :

The coding sheets page https://algorithmist-dev.web.app/coding-sheets contains a list of questions that a person will solve and then he can mark when the question is done.

Task :

• When a person clicks on the done button, the color of the icon and the background color of the whole row change. A CSS class is already named done-row, which can be added with the default link-row class.

  

• When done is clicked the top progress would change as well—both the ceil number and the progress bar. The width of the filled progress bar needs to be properly calculated by the total number of questions and the questions completed.

  

Want to contribute :

• Write in the comment that you want to be assigned this task along with the predicted time required to complete it.
• Please change only the CodingSheets.js file, or if you would like to change any other page keep me informed.
• Happy Coding :) 🚀

I.e., 0 seconds should look like 00

Basic login signup, with rest API and session storage.

The website is primarily currently for the tablet landscape, laptops, and personal computers. We have displayed a dummy text for devices below 1100px.

• Work on responsiveness
• Only CSS changes
• 320px to 1100px (same mobile structure)
• You can do one page at a time and generate a PR

Can you check the privacy policy that I have generated below so that I can add it to the website?
PRIVACY POLICY.pdf

Experiencing increased traffic on the Algolisted website, and in order to improve its performance and ensure scalability, we need to implement load balancing. Load balancing will help distribute incoming traffic across multiple servers, ensuring better responsiveness and reliability for our users.

Enhancement Details:

• Load Balancer Implementation: We will need to select and implement a suitable load balancing solution that can efficiently distribute incoming traffic across multiple servers.
• Server Configuration: Ensure that all servers are properly configured to work seamlessly with the load balancer and that they can handle incoming requests effectively.
• Scaling: Set up an auto-scaling mechanism to dynamically adjust the number of servers based on traffic demands. This will help us handle traffic spikes effectively.
• Monitoring and Alerting: Implement monitoring tools to keep a close eye on server health and traffic patterns. Set up alerts to notify us of any anomalies or issues.
• Failover Mechanism: Implement a failover mechanism to ensure uninterrupted service in case one of the servers fails. This will enhance the website's reliability.
• Testing: Rigorous testing is essential to ensure that the load balancing setup works as expected. Test various scenarios, including high traffic loads, to verify the system's performance and stability.
• Documentation: Create documentation for the load balancing setup, including configurations, procedures for scaling, and troubleshooting guidelines.
• Deployment Plan: Develop a deployment plan that outlines how the changes will be rolled out to minimize any potential downtime.
• Rollback Plan: In case any issues arise during deployment, have a rollback plan in place to quickly revert to the previous configuration.
• Performance Optimization: Continuously monitor and optimize the load balancing setup to ensure the best possible performance for our users.

Please consider this enhancement issue to ensure that Algolisted can continue to provide a smooth and reliable experience for our users as our traffic grows. Feel free to provide any additional details or requirements for this enhancement.

When you click on that sort button a drop-down will occur with some specific types of sortings. Please read about the whole task here in this google doc : https://docs.google.com/document/d/1zO3lE-YQSInsA9sFoFC8O7ImOHdjVceL2pqHPnYat-8/edit?usp=sharing

Maintainer Only Issue

@sailikpandey22 update the coding resources section links, zip-file of the resource PDFs has been mailed!

Write the readme file for the project by whatever you understand about the project (https://algorithmist-dev.web.app/) in case of anything that you don't understand you can ask it here. Don't worry about the correctness of whatever you write, if will be reviewed and changed.

I want the structure to be something similar to this :

Change the state of react app every second
I am currently working on this issues

• Make an icon on the top right for toggling the dark mode.

• The colors in the dark mode should be non-reflection colors basically a bit lighter black in the background. Below is a sample image for reference of colors.

  

There are tags on the page that are dummies, now our task is to show those competitions whose tags are selected. By default the all tag is selected and we show all competitions.

• Sheet from where we are pulling the data : https://docs.google.com/spreadsheets/d/1-cTddH1wJRtyKazJuAWHdzK8Wjp1hwf36l3kONy6tE0/edit#gid=0

• Google sheets API (data already fetched on page): https://script.google.com/macros/s/AKfycbzXyVH1o6CzzJUfLN0qC-EscTKQeKouAUlU3oBs_S85WvB13wPHuawZLK43QJrqBua3Ng/exec

• I found a spelling mistake in the coding competitions page
• Incorrect: "teir" | Correct: "tier"

Write now the API which is fetching the data has the content in Indian time. And when it is being called by the user we are comparing it with the local time of that country.

The task is to show the data/time respective to the user's country taking the Indian time as standard (Since API is giving the data in Indian time).

Or you can suggest me, to convert the API timings to International time if it is easier for you to convert.

Currently, the links are unfunctional, find the correct links and enter them.

If you face difficulty in finding any link, you can ask it here.

The project is using simple folder structure, but since we are growing it is becoming more and more difficult to maintain without redux. Implement redux folder structure on the client side of the project.

To optimize the search engine ranking of the website for coding-related keywords, it is recommended that you perform the following tasks:

1. Identify the index.html file and any other relevant files that could impact the website's SEO.
2. Write code that includes relevant keywords and optimizes the website's structure and navigation.
3. Ensure that the website is properly indexed by search engines.

By completing these tasks, we want to improve the visibility and ranking of the website in search results for coding-related keywords, and increase the likelihood that users will find and visit the website. This will help to achieve the main goal of getting the website on Google search results for words related to coding.

If you check the https://algorithmist-dev.web.app/coding-sheets page you can see a lot of questions of a particular sheet coming from the backend.

If you click the tick button on the right side of each question, it is marked as completed and the color changes.

However, since the data from the backend has all the questions marked completed as false, hence when we refresh the page color of previously marked questions become the same as before.

I want to implement local storage for the questions completed, i.e., store the questions which are completed in the user's local storage so that it stays after refresh and also after reopening the site.

There is an exciting task that may require some thought to complete.

If you visit the https://algolisted.com/coding-sheets/two-pointers-lc page, you will see that we have tags on each question. One of these tags is the main tag - (they have a slightly darker border). The task is that we want all the questions to be listed under this main tag.

In the above, example 2 Sum problem similar and Tapping rain water similar are the two main tags.

The main tag can be something like "Day 1", "Day 2" or "2 Sum problem similar," as seen above, etc.

Here is a picture that may provide further insight.

Hey - when I was tackling the filtering issue, I noticed a few typos within the tag filters for the coding competitions. These are the ones I've noticed so far:

• Competiions should be --> Competitions
• Hackethrons should be --> Hackathons
• Competative should be --> Competitive

I would fix these immediately but I'm pretty sure they're coming from the backend? Not entirely sure. Let me know how that's setup and I can take care of it, if you want.

Attaching img for reference.

Opened some links in Coding Resource

And they turned out to be corrupted (both of them), there might also be other resources like these.

When I try to access the "Coding Competitions" tab I get an infinitely loading screen alongside these error messages:

I tried it on a few different branches and IDEs but I still get the same result.

Looks like a CORS issue.

According to Google, to fix this error, you can try the following steps:

1. Check if the server is configured to allow CORS requests: Make sure that the server at the URL https://script.google.com/macros/s/AKfycbzXyVH1o6CzzJUfLN0qC-EscTKQeKouAUlU3oBs_S85WvB13wPHuawZLK43QJrqBua3Ng/exec is configured to allow cross-origin requests. If the server is not configured to allow CORS requests, you will need to contact the server administrator and ask them to enable CORS.
2. Use a CORS proxy: If the server is not configured to allow CORS requests, you can try using a CORS proxy to make the request. A CORS proxy is a server that acts as an intermediary between your client and the server, adding the necessary CORS headers to the response.
3. Use the no-cors mode: If you are making a request using the fetch() function, you can try using the no-cors mode by setting the mode option to 'no-cors'. This will prevent the browser from blocking the request, but it will also prevent you from reading the response from the server.

Okay I disabled Privacy Badger and it fixed the issue.
We might want to look into addressing this, though. Privacy Badger is an extremely commonly used extension.

Originally posted by @JordanAdair in #61 (comment)

The goal is to ensure the colors in the donut chart are cohesive and consistent, rather than appearing vastly different from adjacent sections.

https://algolisted.com/coding-sheets/striver-sde-sheet

Since the website UI is pretty good and new, the scroll bar looks outdated on windows. On a mac, this problem doesn't exist.