Show HN: Flashcards for Frontend Developers

https://nlaz.github.io/flashcards-for-developers

by nlazaris • 8 years ago

20 11 8 years ago

nlaz.github.io

nlazaris6• 8 years ago

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!

nlazaris6• 8 years ago

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

swaggyBoatswain4• 8 years ago

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

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

https://github.com/sirupsen/anki-airtable

nlazaris6• 8 years ago

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

swaggyBoatswain4• 8 years ago

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?

swaggyBoatswain4• 8 years ago

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?)

nlazaris6• 8 years ago

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...

stockkid• 8 years ago

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?

nlazaris6• 8 years ago

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

Show HN: Flashcards for Frontend Developers

Related Stories