bookoid icon indicating copy to clipboard operation
bookoid copied to clipboard

Catalogue a user's books

Open TejasQ opened this issue 5 years ago • 18 comments

We need a list view of a user's book catalog

  • It needs to support full CRUD.
    • Creating or adding a book can be done manually via a form, or using a Camera API to capture a barcode
  • It needs to work on all screen sizes.
  • It needs to support dark mode.
  • It needs to be searchable.
  • It needs to be sortable: by character (alphabetically), by status (lent vs. in stock), etc.
  • It needs to be pretty.
  • It needs to keep track of WHO a book was lent to.

Let's discuss design/appearance with mockups.

TejasQ avatar Sep 17 '20 13:09 TejasQ

Something like the following?

Screenshot 2020-09-17 at 22 39 55

iamstiil avatar Sep 17 '20 20:09 iamstiil

Looks awesome! Perhaps we can have a switch between this and a list/table view?

Also:

  • What would it look like when it's loading?
  • What would it look like if there's a network (or other!) error?
  • What would it look like with filters?
  • Do we need pagination or infinite scroll?

TejasQ avatar Sep 18 '20 11:09 TejasQ

A pagination with load more is nice. Infinite scroll is okay too but load more gives more control. Also maybe I think virtualization would be needed as well.!!

pavanmehta91 avatar Sep 18 '20 15:09 pavanmehta91

Hi Tejas, I can help designing wireframe for the app and high fidelity design

hemanshum avatar Sep 18 '20 15:09 hemanshum

@hemanshum, @pavanmehta91 and @iamstiil — it’s really great to have y’all here coworking together.

I suggest we take @iamstiil’s initial prototype and build on it, especially the things I mentioned in my earlier comment: loading, errors, etc.

Let’s build off of each other’s ideas to flesh out something.

TejasQ avatar Sep 18 '20 16:09 TejasQ

I'll make a PR with the prototype so that you people can take a look at it ✌️

EDIT: You can find the PR here: #6

iamstiil avatar Sep 18 '20 16:09 iamstiil

I've only now seen your post @TejasQ to stick with @iamstiil's version as a starting point.

Therefore, I took a stab earlier today at the list view for desktop (made with Figma - link to source).

I'd suggest pagination (it might work better on poor connections and on mobile) and implementing sorting and filters in a straightforward list/table view with popular/intuitive icons.

image

pawel-cebula avatar Sep 18 '20 16:09 pawel-cebula

Awesome, @pawel-123! That’s a great list view! Can we somehow merge it with @iamstiil’s? I suggested a list/grid toggle. He’s got a great grid, you have a nice list! Let’s do both!

TejasQ avatar Sep 18 '20 20:09 TejasQ

@pawel-123 This looks great! I think there should be a sharable Figma design where other designers can add their suggestion

Tundeh avatar Sep 19 '20 20:09 Tundeh

@Tundeh I've just given you edit rights. It appears that Figma only allows creating a public link that allows viewing. For editing rights, I need to explicitly add someone - in case anyone wants edit rights, let me know here and I'll add you. I'll try to implement @iamstiil's grid view into the Figma designs later today.

pawel-cebula avatar Sep 20 '20 10:09 pawel-cebula

That's nice @pawel-123, I will check it out when you are done

Tundeh avatar Sep 20 '20 11:09 Tundeh

I've implemented the first version of the grid view and added a list/grid view toggle to the list view (screenshot below and link to Figma here).

@Tundeh I've given you edit rights to the entire project on Figma.

If anyone else would like edit rights, please share your email address, though I think we might run into Figma's collaborator limit on a free account.

image

pawel-cebula avatar Sep 20 '20 13:09 pawel-cebula

Updated the PR to include a toggle for changing the view. I used the Heroicons for this.

Screenshot 2020-09-20 at 17 16 06

iamstiil avatar Sep 20 '20 15:09 iamstiil

Looks amazing!

TejasQ avatar Sep 22 '20 09:09 TejasQ

I just added a couple of notes to the PR. Great work overall!

TejasQ avatar Sep 22 '20 10:09 TejasQ

Relevant: we now have a backend if you want to plug this in at some point -> https://github.com/TejasQ/bookoid/issues/7#issuecomment-696660210

TejasQ avatar Sep 22 '20 11:09 TejasQ

How do you guys like this design?

FHD SCREEN

evgeny-rov avatar Nov 03 '20 06:11 evgeny-rov

I LOVE IT

TejasQ avatar Nov 04 '20 23:11 TejasQ