Catalogue a user's books

[TejasQ]

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]

Something like the following?

[TejasQ]

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]

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]

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

[TejasQ]

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

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]

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]

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]

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

[pawel-cebula]

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

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

[pawel-cebula]

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.

[iamstiil]

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

[TejasQ]

Looks amazing!

[TejasQ]

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