carolinaknoll/awesome-gamified

:eyeglasses: Awesome Gamified - See your progress and save awesome links you've already seen!

👋 Hi, I'm Kimi!

👩‍🌾 I'm a young Software & Mobile Engineer who believes in kindness, heroes and human super powers. ✨
💻 I usually work with React, React Native, Context, Redux, Gatsby, CSS Modules, TypeScript, Bitrise and Netlify.
📖 I’m also enthusiastic about helping connect technology and education to promote meaningful and better-informed learning opportunities.

🎨 I'm deeply interested in:

• Exercise and martial arts (I practice Kung Fu), and the challenges that come with it.
• Having fun and doing lively things (I play Stardew Valley, board games, and watch anime).
• Doing something that connects us to the present (like nurturing faith and growing vegetables).

🎨 On learning, I also notice:

• Different forms of apprehension, and how the human mind can learn.
• Learning as a continuous, lifelong process - that is, not one that ends after a diploma.
• How different people learn at different rhythms and ways. We all have strengths and weaknesses.
• Education for independence and freedom, not only just locked up to schools. Learning can happen anyhow and anywhere.
• Learning to be prepared for life’s challenges and adventures - not for passing standardized tests and getting good grades.

---

🎗️ My motto

We humans are so used to science fiction and big, loud movie explosions that we forget that there are many amazing, rich, fantastic powers, mostly hidden right inside ourselves 🌟:

• the power of choosing kindness,
• of showing support to a person in need on a challenging time,
• of lending a much needed hug or, quite simply,
• of being able to go through a hard day. 🌼

Day after day, I try to apply these thoughts into my actions. That's where the super powers come from. 📝

awesome-gamified's Issues

[BUG] 404 error

Describe the bug
Browsing to "Books > Free Progamming Books > English" (same behavior with French, haven't tried others) gives a 404 error page

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Books > Free Progamming Books'
2. Click on 'English' (or 'French / français')
3. See error 404

Expected behavior
Reach this content :

• https://github.com/EbookFoundation/free-programming-books/blob/master/books/free-programming-books.md
• https://github.com/EbookFoundation/free-programming-books/blob/master/books/free-programming-books-fr.md

[Loading] Show a loading transition when requesting a new README list

Currently, when the user clicks a README list to read it, it takes a while for it to finally load and be displayed to the user.

It would be great to have a loading element that can visually explain to the user: 'Hey, I know you just clicked a README list, but it will take a moment to load so just wait a bit".

Ideally, it can be a simple round spinner element that is shown when a state prop isLoading is true, and is hidden then with prop is false. But if you have some more experience with loading animations/elements, feel free to create something different if you'd like.

As an example, you can create a method and use the axios request/response to handle the state prop changes.

Aditionally, maybe this link will help! 😄

Thank you, you rock! 🚀

[SubjectsTree] Add Search input to search for Awesome Lists

It would be great to have a way to search for Awesome Lists in the sidebar on the left.

The idea is to mimic the behaviour and visuals from the search input available in Locky's Awesome project. You can check it here.

If you can't view the link for some reason, the idea is basically to have an input that, when you write inside it, it displays a div below it with the search results. If you click one of the search results, this div will close and the website will load the README list that you clicked for you to read.

I think that the best place to put it might be below where it says: "Open/Close all subject topics".

If you would like to tackle this issue, feel free to change anything that might be too hard for you.

Thank you for contributing! 🚀 😄

[SavedItems] Nest topics inside the subject and awesome-list name

Nest topics inside the subject and awesome-list name, so they don't need to be repeated for every topic that came from the same list or subject.

As an example, what currently is shown as:

• Front-end Development > HTML
• Front-end Development > CSS

Would be changed to show:

• Front-end Development
  • HTML
  • CSS

Modify Rename.md to include a 'how to' run the project

The Readme.md file doesn't have any information about which frameworks and how to run the project. It could be useful these informations on Readme.

[READMEs/Axios requests] Refactor and allow requests for differently cased README files

Currently, the project only supports README files which are named like this README.md or like this readme.md. You are able to confirm this by reading this piece of code.

However, there are two main problems with the way the code is currently written.

1. There are many cases when this request isn't being made correctly. For example, when I choose Front-end Development, and then CSS Frameworks inside it, it tries to get https://raw.githubusercontent.com/troxler/awesome-css-frameworks/master/README.md. It can't, so it throws an error. The expected should be for it to retry with a request for https://raw.githubusercontent.com/troxler/awesome-css-frameworks/master/readme.md, which should finally show the README content, but it doesn't.
2. We cannot know the way every user will name their readme file. Naming it with uppercased README and lowercased extension (README.md) is the most common, but there are other ways (like readme.MD, readme.md, README.MD, etc). Is there a way to be able to try searching from the most common naming (README.md), to maybe the second common (readme.md), and then the other cases, without making the code too ugly? It would be awesome if we could not care for naming conventions at all, but I don't know if it is possible.

This issue can be used to create multiple pull requests. For example, one for the first point, and one for the second.

If you would like to work on it, please comment if you would like to explore only one of the points, or both. You can create two pull requests if you decide to work on both points.

Thank you!

[SavedItems] Show amount of saved bookmarked and saved seen items on panel

The SavedItems panel should show the current number of saved bookmarks and saved seen items.

This information can be shown in a <p> element for each.

As an example:

<p>Bookmarked items: 10</p>
<p>Seen items: 15</p>

As an optional, feel free to add a font-awesome icon to each of them, if you would like. But if you see that there is no need for them, this is okay too! 😄

Thank you! 🎉 ✨

[SavedItems] Add import/export saved items functionality

As saved items are only saved on localStorage, it would be great to have a way to export/import saved items.

This functionality can be divided into multiple pull requests. As an example:

• one for exporting items,
• one for importing items,
• and possibly, one for importing items that adds a popup with three buttons, asking: 'Discard existing saved items on localStorage?', 'Import new items and keep existing items?', and 'Cancel'.

[Links] Target original README creator repository for links

If you open a README list that has relative images or links, they will generate a 404 not found error, and will not load.

It would be awesome to have a way that is not too massive to search for those paths and retarget them to the correct repositories.

[Favicon] Replace project Favicon

The current project favicon doesn't represent the real intent of the project.

It would be great if you could replace it with another icon image that you think might look really cool on the project.

You can find the current icon at awesome-gamified/public/favicon.ico.

It would be best that your new icon has the name favicon.

If the icon that you found is a .png file (and not an .ico file), it will be required to change the icon reference on the index file, so that it can be correctly found and open.

To do that, you should open awesome-gamified/public/index.html with your code editor and change the line saying:

<link rel="shortcut icon" href="./favicon.ico">
to
<link rel="shortcut icon" href="./favicon.png">

If in doubt about anything, please read the Contributing Guide. If you are still unsure after reading it, just comment below and I will do my best to help you. 😄

Thank you!