Replace Camper Leaderboard project with functionally similar project based on forum

[doubleUTF]

Describe your problem and - if possible - how to reproduce it

Camper leaderboard APIs are broken as provided below:

Add a Link to the page with the problem

https://fcctop100.herokuapp.com/api/fccusers/top/recent
https://fcctop100.herokuapp.com/api/fccusers/top/alltime

Tell us about your browser and operating system

• Browser Name: Chrome
• Browser Version: 67
• Operating System: Windows 7

If possible, add a screenshot here

[raisedadead]

@tchaffee @tbushman @Em-Ant can we check and have an alternative to this on Glitch?

[tchaffee]

@raisedadead I don't know who developed those APIs and if there is an alternative. Before my time. Maybe this is something you would want to host on FCC domains going forward so it is always available and not under the control of a third party? Let me know if there is anything else I can help with here.

[Em-Ant]

Do we have the source code of that app? I remember that it works periodically scraping gitter, or the fcc profile pages. I don't know if it would be possibile on glitch. Why doesn't freecodecamp expose an api endpoint with the brownies ranking ?

[raisedadead]

Do we have the source code of that app?

https://github.com/roelver/fcctop100

If someone can get me some basic analysis, if the code is good enough and needs a little tinkering, I will get this into our org and we could put it up on Glitch?

Why doesn't freecodecamp expose an api endpoint with the brownies ranking ?

It will only stress the current 800+ concurrents that we get at peak times.

I would love to replace the challenge. @QuincyLarson do you have something in mind?

[QuincyLarson]

@raisedadead The leaderboard project is no longer a required project - we've moved it to the Interview Prep. Still, it would be nice if someone could figure out how to fix this. I don't think the strain from the leaderboard apps would be that great - we had thousands of these leaderboards in the past and they didn't seem to have too big of an impact.

We should wait until our new open API is live before attempting to fix this, though.

[Em-Ant]

I had a look at the code and I know how it works. It used to scrape a gitter room to get the camper's usernames, and then it got the information about each camper accessing his/her freecodecamp profile page. At the moment it doesn't work because that gitter room closed, and the author's gitter api key (hardcoded in the source...) is expired/blocked.

If there was a way to periodically (once per day or week ?) access some information about the ranking directly from freecodecamp, it would be much easier to build a replacement for it in glitch.

[raisedadead]

Hi @QuincyLarson I think its still on the legacy cert list:

[QuincyLarson]

@raisedadead Good point - I forgot this was on that list. We definitely need to get this project working again.

@Em-Ant Thanks for describing the issue. Here's what I propose we do - we switch this project to focus instead on the forum.

Without an API key, one think people could do is show recently active threads using our forum's API:

https://forum.freecodecamp.org/latest.json

We would need to build an entirely new demo for this and come up with new user stories, but it would functionally be similar to the old leaderboard project.

Would anyone be interested in tackling this?

[jgibson02]

@QuincyLarson I have started working on a possible replacement demo that I could then write up some user stories off of, although it seems like the CORS header might not be enabled to be able to fetch that API feed?

[QuincyLarson]

@jgibson02 Have you made any progress on your possible replacement demo?

I'm still in favor of changing the subject of this project to something with an open API, like forum.freecodecamp.org. But if you've made progress on this I'd be interested in seeing it :)

[jgibson02]

I was having issues retrieving data from the https://forum.freecodecamp.org/latest.json API when making a request from CodePen. It seems like CORS would need to enabled on that API for campers to be able to use it there. For now I'll continue working on a demo by downloading a copy of the JSON.

[QuincyLarson]

@Bouncey @raisedadead what would be the security considerations for enabling CORS on our forum's API?

It looks like this is a relatively simple fix on Discourse if we decide we want to go forward with it: https://meta.discourse.org/t/correct-cors-enabling-steps/55697

[Bouncey]

And long as you are able to scope it to GET requests and are selective about endpoints exposed.

[jgibson02]

Here's a demo that I made up using an offline downloaded copy of the JSON. Do you think that fits the bill as far as what you'd like to see for an overall user story?
If so, I can begin writing up some broken down user stories and instructions.

[jgibson02]

Here are some possible instructions and user stories:

Take Home Projects - Build a FreeCodeCamp Forum Homepage

• Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/jgibson02/full/BVvbRX/.
• Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
• User Story: I can see a list of the most recent posts on the freeCodeCamp forums.
• User Story: For each topic, I can see the title and a list of links to users who have recently posted in it.
• User Story: I can see the number of replies and views that each topic has had, and a timestamp of when the topic was last active.
• Hint: To get the 30 most recent forum posts: https://forum.freecodecamp.org/latest.json.
• Remember to use Read-Search-Ask if you get stuck.
• When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.
• You can get feedback on your project by sharing it with your friends on Facebook.

[QuincyLarson]

@jgibson02 Awesome! Thanks for helping create these excellent user stories. I will work with @Bouncey on the CORS issue.

[jgibson02]

@QuincyLarson has there been any development on the CORS issue?

[KoniKodes]

Hi,
I have already created a LeaderBoard which is now broken due to the api issue.
I liked the original User Stories:
User Story: I can see a table of the freeCodeCamp campers who've earned the most brownie points in the past 30 days.
User Story: I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.
User Story: I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total.

There are no longer brownie points, but there are likes. And it isn't really broken down into monthly anymore. It looks like the most days are 288.

Instead of linking to the latest post, can we stay focused on the name of the Camper, and how many Likes that person received (instead of brownie points) over a 30-day period and all-time?

https://www.freecodecamp.org/forum/directory_items.json?period=all&order=likes_received.json

[CandiW]

Is anyone working on fixing this api for the Camper Leaderboard?

[Em-Ant]

If there is no better solution we can bypass the cors issue building a proxy on glitch (I am quite expert on this...) I can scope the request to only allowed me and methods and enpoints if necessary. It should be quite easy to build. Let me know if you want me to do it.

[nuhman]

Since @Em-Ant have made this new api endpoint for the forum data, I guess it's time to change the user stories as suggested here by @jgibson02 ?

[KoniKodes]

There is an error on the test project at line 67: Uncaught ReferenceError: styled is not defined
at /Em-Ant/pen/pen.js:67

I do agree with @nuhman about using the suggested user stories.

[jgibson02]

Fixed the ReferenceError (on my original pen), although what do you think we should change in the user stories?

[KoniKodes]

Hi, thank you.
It looks like we are not sorting, it comes up by most recent topic....
It works very well for the Forum Page.

I just worked so hard on the Leader Board and it's a shame not to be able to show it off. Even without the Brownies, I would love to see who posted most recently - and who has posted the most times - with links to those posts - and perhaps the user profile..

I like seeing how many times the topic was viewed.

[ColorizeMySky]

I have an error with Cross-Origin Read Blocking (CORB) when try to fetch a data also when use https://www.freecodecamp.org/forum/latest.json link. {mode: 'no-cors'} doesn't effectivly.
Does it exist any alternative solution to fetch the data for Leaderboard (not to hardcode it)?

[KoniKodes]

I didn't have a problem with it. Which browser are you using?

[ColorizeMySky]

I didn't have a problem with it. Which browser are you using?

Google Chrome
Version 73.0.3683.86 (Official Build) (64-bit)

[KoniKodes]

This is new to me. But I did find this suggestion as a possible fix...

https://stackoverflow.com/questions/54701399/how-to-fix-cross-origin-read-blocking-corb-blocked-cross-origin-response-with

[ColorizeMySky]

Thank you. But if I just disable security policy in my browser, it doesn't solved the problem for others browsers/users. I saw the solutions with seting up headers, but I don't able to implement it at Codepen (where is my Leaderboard), because there is the client-side only.

[KoniKodes]

I'm sorry. I haven't seen it enough to understand it. I understood CodePen solved possible CORS issues, but CORB is new to me.

Are you able to go to the actual API end-point at all? Or is it only coming from the LeaderBoard?

[ColorizeMySky]

By direct link I see the json-data. The trouble rises when I try to fetch json from freecodecamp.org at codepen.

I checked my others pens at codepen, which fetch the data from others sites (there are rawgit.com, glitch.com, wikipedia.org, ipinfo.io and github.com), and they works correctly. So, the problem is exactly with freecodecamp-json. It possibly depends from codepen settings, but I don't find the common ground with their support yet.

[KoniKodes]

Ouch. @jgibson02 Have you seen this happen before?
If so, do you know the work-around?

[KoniKodes]

@ColorizeMySky Have you tried the end point from @Em-Ant earlier?
https://buttercup-island.glitch.me/latest

Maybe this will work?

[ColorizeMySky]

https://buttercup-island.glitch.me/latest

Maybe this will work?

Yes, thanks a lot. It fetches the json with forum-data from glitch.

[jgibson02]

I have updated my CodePen to use the @Em-Ant's API at https://buttercup-island.glitch.me/latest to avoid the CORS issue.
@QuincyLarson are you ok with using glitch.me as a way of redirecting to freecodecamp's domain? If so, perhaps this would be ready to be reintegrated to the curriculum.

[raisedadead]

Hey @scissorsneedfoodtoo can you take this up? All we need is to create a glitch project like the one above mentioned as a workaround and update the challenge seed to use it in instructions?

[scissorsneedfoodtoo]

@raisedadead, sure, I'll get right on it

[Em-Ant]

You.don't need to make another glitch project if you don't want to. That one has already shared ownership between me and camperbot, so you can edit it. Il gio 4 apr 2019, 12:13 Kristofer Koishigawa <notifications@github.com> ha scritto:

…

@raisedadead <https://github.com/raisedadead>, sure, I'll get right on it — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17450 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMWwVve4x2DPL4_ApR55oakeZHbBGlGGks5vddAxgaJpZM4UbaVj> .

[scissorsneedfoodtoo]

@Em-Ant, thanks for the quick response! Your Glitch API endpoint is working perfectly, so I'll just update the project's description with the user stories above and your links.

[ColorizeMySky]

@Em-Ant , at your glitch API a don't see how to get the link to the appropriate topic. Is it possible?

[Em-Ant]

@ColorizeMySky my glitch api proxies the request to https://www.freecodecamp.org/forum/latest.json so you'll get the exact same response. It only adds the necessary CORS headers to the original response.

I had a quick look at the response structure and I see 2 sections: one is "users", the other is "topics". You can get the url of the post adding the base url of the forum, and the property "slug" of a topic entry.

[ColorizeMySky]

Thanks everyone for help. I've managed to finish this project with new API, and new API is nice for replace the old task. I can fetch. sort, add additional info and images, link etc. https://codepen.io/Colorize_my_sky/full/aMxRRq

[KoniKodes]

Congratulations @ColorizeMySky ! This looks great and is very responsive.