
Show HN: Flashcards for Frontend Developers - nlazaris
https://nlaz.github.io/flashcards-for-developers
======
nlazaris
Hi HN, I've been collecting flashcard decks around some of the harder topics
in frontend development and recently built a site around it. The site is built
with `create-react-app` and uses Airtable's API so the app itself is actually
pretty small. Hope you enjoy it. Let me know which topics you would like to
see in the future. Thanks!

~~~
nlazaris
I'm also happy to answer any questions you might have or answer any issues you
might have with it :)

------
Kagerjay
I'm looking at your repo as well, can you provide a high level overview of the
_src_ folder?

I'm learning react at the moment, about halfway done through a 40hr course. Am
interested in how you organized things and what each file does if you don't
mind providing an overview

And where the API airtable calls are at (which file is it?)

~~~
nlazaris
Glad you are taking a peek at the repo. The `src` folder holds the app pages,
common components, a scheduling utility and various other setup files. The API
calls come from a file called `apiActions`. You might be interested in the
`create-react-app` project to learn more about how the overall project is
structured: [https://github.com/facebook/create-react-
app/blob/master/pac...](https://github.com/facebook/create-react-
app/blob/master/packages/react-scripts/template/README.md#folder-structure)

------
Kagerjay
it loads kind of slow

by the way someone who is reviewing flashcards should both have the options of
using

\- 1. only the keyboard

\- 2. only the mouse

Keyboard input has delay but you should really consider a mouse only approach
the way anki works

This sounds really interesting though, do you have screenshots of what your
airtable table looks like. I want to see the API calls as well to it, can you
link and share the airtable view here?

how does report a card issue work?
[https://airtable.com/shrUv34My1n7HQSwd](https://airtable.com/shrUv34My1n7HQSwd)

have you also looked into sirupsen's airtable anki integrator?

[https://github.com/sirupsen/anki-airtable](https://github.com/sirupsen/anki-
airtable)

~~~
nlazaris
Sorry if you are still experiencing load times. It might be worth it to build
a cache layer for the API so that the responses are quicker. Will look into
how to improve that :/

It should already support both mouse and keyboard options for reviewing
flashcards. Is one of those methods not working for you?

The Airtable sheet is pretty simple. It is simply a Card table with Front,
Back, and Deck columns and the Deck table contains all the other information
you might see on the site. I also have a table for reporting issues through
that report form you included.

That's really cool. I hadn't seen that before. I've bookmarked it for future
ideas :D

~~~
Kagerjay
mousing over things with the way you setup your flashcard site seems
inefficient

Picking "I got it" or "No I didn't answer correctly" should be right next to
the "show answer" button

Because your constantly reviewing cards constantly it gets super tedious

Is the reporting feature just an airtable form?

~~~
nlazaris
I would love to know how to improve that experience. I don't think I'm
understanding the exact issue though. The buttons should be right next to each
other already. Are you suggesting the buttons should replace each other when
toggling the answer so the mouse has to move less distance?

Happy to work out this issue individually if you would like and address other
questions/feedback you might have. My email is niko@pensieve.space. Thanks!

You are right. The reporting feature is just an Airtable form.

~~~
Kagerjay
example, bottom of my anki app

[https://i.imgur.com/zv2lEY7.gif](https://i.imgur.com/zv2lEY7.gif)

my email btw is in my username if you click it

------
stockkid
I like that it works well on mobile. I would use this to pass time while on
public transit etc.

Can I make my own deck?

~~~
nlazaris
You cannot create your own deck at the moment. Hoping to add more features
soon :)

