uriklar / professor Goto Github PK

we should have an /edit/ID path that fetched the board and renders it in the create form.
This requires to extract create.tsx into a component. We can pass it an onSubmit prop that either creates a board or updates a board

See loom:
https://www.loom.com/share/7c54a2be8066454faf91d5ccc068c2ca

https://www.loom.com/share/5bbee38c278c42bf892f102a06fac0a4

This the way board ids are currently generated:
username (which the user enters) + random 4 digit number

This was a very bad design choice 🤦‍♂️ as what can happen now is that the a user can randomly get the same 4 digit number and accidentally overwrite a previous board of his without knowing.

What I think we should do:
In the [id].tsx and index.tsx getServerSideProps we already have a query that fetches all board ids.

1. call that same query in the create page.
   2.I want to change the ids to be serial instead of random, so we should find the first id of this user and get the next id (need to make sure it's not taken already)

I added mock ids to the create page so you don't have to connect to firebase to work on this feature. So you can run npm test to see if it passes.
You can also add your own tests if you need..

It's on this branch:
https://github.com/uriklar/professor/compare/issue-15-fix-ids

When selecting the 4th word, the selection get cleared really quickly. We need to add a small timeout so the user sees they selected the 4th word

Open questions:
Do we need a downvote button?
Should like appear from the start? Or maybe after solving some part of the board?

Content:

1. Add the like button on the screen
2. Add likes to data model (number field)
3. Save in local storage which boards I liked
4. Create api endpoint that creates the actual like
5. Show user if he liked a board of not

Should clear that specific board from local storage

Add option for boards to have tags (some boards may have a specific topic: Sport, Emoji, numbers etc...)

• Basic design

• Add ability to enter answer for a category

• Create board form

• Persist progression data in local storage

• Screen for creating a board (will be detailed in a separate issue)

• Fetch board from DB by id in url

• Create DB and integrate with it (firebase?)

• Open graph tags and other meta tags

• Favicon

• Deploy somewhere (probably vercel)

• Handle long words

• Add husky and lint-prepush (to execute TS/Eslint/Prettier checks before push)

• Contribution guide - what you need to setup to get going

• Create a script to seed a test database

• User login - Show all boards by user, show all boards solved by user, show profile info on the user's boards

• Write copy for rules of creating a category

• Tests - jest unit tests for game logic, Maybe some Cypress tests if someone feels like it (I can guide you how to integrate it with Github actions)

1. Save the user details (name, id) in the local storage and in the db as one of the board fields.
2. Try local sign-in from store.tsx --> HydrateBoard

In Square.tsx you have the Container component which has tabIndex: 0;
This makes squares accessible by tabbing. But, once the itemState is either AnswerState.Matched or AnswerState.Answered
there's no reason for them to be tab-able since the user can't interact with them.

You can make Containers attrs dynamic by having it accept props. Something like:

.attrs( props => ({ role: "button", tabIndex: props.isTabbable ? 0 : 1}))

Now, when a category is found or answered, pressing tab should skip it.

Should be sticky when scrolling down

Sort (asc/desc) by how many categories where matched/answered.
Sort example:
3 answered > 2 answered + 1 matched
3 matched > 2 answered