Catalogue a user's books

TejasQ commented 3 years ago

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.

iamstiil commented 3 years ago

Something like the following?

TejasQ commented 3 years ago

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?

pavanmehta91 commented 3 years ago

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

hemanshum commented 3 years ago

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

TejasQ commented 3 years ago

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

iamstiil commented 3 years ago

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

pawel-cebula commented 3 years ago

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.

TejasQ commented 3 years ago

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!

Tundeh commented 3 years ago

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

pawel-cebula commented 3 years ago

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

Tundeh commented 3 years ago

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

pawel-cebula commented 3 years ago

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.