shelf-nu / shelf.nu Goto Github PK
View Code? Open in Web Editor NEWshelf is open source Asset Management Infrastructure for absolutely everyone.
Home Page: https://shelf.nu
License: GNU Affero General Public License v3.0
shelf is open source Asset Management Infrastructure for absolutely everyone.
Home Page: https://shelf.nu
License: GNU Affero General Public License v3.0
We need to implement the functionality to make the sidebar foldable.
@jurrejansen @carlosvirreira
We are missing some designs related to this, or at least I cannot find them
We sent a passowrd reset link to EMAIL.
it should be "password"
Items will be organized by category. To be able to add this feature to items we first need to create the categories model with all of its features.
DB model needs the following fields:
Some tests that were postponed for after mvp
Functionality for creating an item.
Tasklist:
Create a model for storing notes related to the item as well as build the ui for submitting new notes to an item.
Amount is unknown but it would be cool to look already at making a plan of approach for this.
Hi @carlosvirreira you added this task to task list sheet. Could you give a general indication on what should be improved? Thanks
The main-navigation sidebar is already developed for desktop. Needs to be responsive for all screens.
Design to be implemented: https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=5534-343707&t=BbNGgKv7oDqD9Cpt-4
This is one of the most complex parts we have of MVP and the last thing we need to complete in terms of features before preparing the app for production.
We created a flowchart to visualize the whole flow of the process:
@hunar1312, I would like you to help me with some of the views we have to design.
Views that need front-end dev:
@hunar They are all very simple views, mobile first. What I will do is create a branch where I will create all the files for each view and I will update this description so you know in which file to work.
Is there a way to make an 'enter' on the editor? I really miss it and it makes my notes ugly.
Need to update the readme to include what buckets are required for storing files on supabase storage
We should implement prefetch in the <Button/>
component so all our links are pre-feteching data.
https://remix.run/docs/en/1.14.3/components/link#prefetch
Related to #79 we need to also do the ui for Download QR tag
.
Works with a sidebar that opens when you click the "Download QR tag" button.
Needs to be animated with framer-motion.
Here is just a quick and dirty example of how it would work via chat gpt:
import React, { useState } from "react";
import { motion } from "framer-motion";
const Sidebar = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleSidebar = () => {
setIsOpen(!isOpen);
};
return (
<div>
<button onClick={toggleSidebar}>Toggle Sidebar</button>
<motion.div
initial={{ x: "-100%" }}
animate={{ x: isOpen ? 0 : "-100%" }}
transition={{ duration: 0.5 }}
style={{
width: "300px",
height: "100%",
backgroundColor: "#333",
position: "fixed",
top: 0,
left: 0,
zIndex: 999,
padding: "20px",
boxSizing: "border-box",
}}
>
<h2 style={{ color: "#fff" }}>Sidebar Content</h2>
<p style={{ color: "#fff" }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor
felis at mauris vehicula eleifend. Sed vitae dapibus arcu. Praesent
ut ipsum et velit faucibus dapibus a at risus. Nulla facilisi.
</p>
</motion.div>
</div>
);
};
export default Sidebar;
Needs to of course be improved to use atom's and to also render the overlay that shows on the side of the QR code thingy.
Let me know if you have any questions. Should be a pretty easy and straightforward thing to build.
Once #83 is finished, please create a new branch as copy of 79-view-item
and work on it there.
UI development of new functionality Checklist to be completed. All the screens of control flow in checklist feature are given in design.
Edit UI for items.
Item page is already developed for desktop, needs to be all screens responsive.
Design to be implemented: https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=5499-339309&t=vDHoTduTkb8IZHDn-4
From doing social listening and talking with potential customers. It seems like serial numbers are important for assets. This is not a required field at all, but an optional field which is very beneficial for asset database export and insurance purposes.
@jurrejansen can you please add it to our create page and let me know. Then I can add it to the MVP checklist.
At the moment, let us make it into a simple text field. Later we can consider making it even more easy/powerful.
Approach | Explanation | UX Considerations | External Libraries |
---|---|---|---|
OCR Scanner | OCR (Optical Character Recognition) scanner reads text from an image and converts it into machine-readable text. An OCR scanner can be used to capture the serial number from an image of the asset. | The UX should allow the user to upload an image of the asset and highlight the area where the serial number is located. The OCR scanner should be able to detect the serial number automatically and populate the serial number field in the app. | Google Cloud Vision API, Tesseract.js, OCR.Space |
Automatic Serial Number Detection | Automatic serial number detection uses computer vision algorithms to detect and extract the serial number from an image of the asset. The algorithm can use techniques such as edge detection, feature extraction, and pattern recognition to locate and extract the serial number from the image. | The UX should allow the user to upload an image of the asset and preview the extracted serial number. The user should have the option to confirm or edit the extracted serial number before it is saved in the database. | OpenCV, TensorFlow, PyTorch |
@carlosvirreira how do you imagine this? Will a lil chat open up in bottom right corner like on marketing site, or will a new tab open in Crisp environment. Got a few options:
OPTION I
OPTION II
OPTION III
We could also just go with the Crisp icon in bottom right corner. Instead of the designs above.
or is just not clickable (safari)
See recording / Safari
As we used supa-fly-stack as a staring point, the license is still not updated. @carlosvirreira could you please look into it so we can make sure its up to date. Here is the file: https://github.com/Shelf-nu/shelf.nu/blob/main/LICENCE
Some pending stuff:
To launch v1 we need to get the app production ready. Here is a list we need to go through.
Adding the category filtering to the index. Its basically working but we still have quite some things to handle:
Can we find a way to support HEIC? Perhaps we can change its file type to JPG or something pre-upload?
small improvement, nice for power users
This issue covers the "show" view for the items.
File location: https://github.com/Shelf-nu/shelf.nu/blob/dev/app/routes/_layout%2B/items.%24itemId.tsx
Figma link to this view: https://www.figma.com/file/2XkiKJ4II7Mux6JJL9hYTm/Shelf-App-%7C-Production-Ready?node-id=5340%3A287414&t=rINYxi14vcHB3vyF-1
Most of the content/data you need is already returned by the loader.
The idea is to create the general layout and mostly focus on the information we already have.
Things to skip for now:
For the notes part you can just hardcode some content to make the ui look as in the design and I will do the backend part after.
Also what will need to be taken care of is the mobile view. Lets start with desktop first as we need to still figure out some details related to mobile.
hey @carlosvirreira & @jurrejansen .
I have made a v1 of the forgot & reset pwd functionality. Its quite basic but it will do the job for now.
We also have the existing standard auth views.
Would be great to design some kind of layout for the logged out views(only auth for now).
We have the following views:
Of course this should also include error states.
Hi,
I have cloned and run a local instance of Shelf.nu. Congratulations on the effort you have put into it so far.
While testing, I noticed that there are some features described on your website that are not available in the open-source version. Am I missing something?
Missing features:
Furthermore, I would like to make the following feature requests in order of importance:
Thank you for your attention to these matters.
There is currently an issue with remix local server crashing on any syntax error. More details here: remix-run/remix#5631
To go around this I have locked the versions of remix packages to 1.13. We need to keep an eye on the issue so once its resolved we update our remix versions.
To ensure a consistent style around the website, we need to implement a out tailwind theming based on the figma designs.
We will start with some basic elements that are required for building the UI and build on top of that.
To buy stickers (concierge service) and to either buy subscription or credits.
I had issue with the @apply from tailwind when updating. Apparently the config needs to be changed from manual to automatic.
Markdalgleish from the remix team made a post on how to do it.
https://github.com/remix-run/remix/releases/tag/remix%401.16.0
We need to add a user picture upload functionality to the profile. For now we will be using the storage service of Supabase.
This has multiple aspects related to it that we need to consider:
@jurrejansen based on our discussion on discord, when the user drops the file it uploads immediately but there are a few more things that need to be clarified:
Positioning - currently the profile picture is positioned within the user details form, however technically they are different and considering that it needs to be uploaded immediately and not when clicking save, it could be confusing for the user. I see 2 soltutions now, please feel free to give suggestions
Success message - where and how do we show the success messages
Error messages - where and how we show the error messages
Preview - in the design there is a preview of the current user image. Do we just replace it at the moment that the drop has completed? What if the upload fails, we can revert it quite easily i think using the Optimistic UI strategy
We need to implement it Error and Catch boundaries for the whole app.
https://remix.run/docs/en/1.14.3/route/error-boundary
https://remix.run/docs/en/1.14.3/route/catch-boundary
Took me just a few hours of using Jotai to fall in love with it. So many advantages from using just default useState and useContext.
Now that the app is small, we can use the opportunity to refactor to use jotai instead of native react state.
We are currently hosting on fly.io with the stack based on supa-fly.
As I quite used to vercel and I love their per-branch links and deployment, I am considering hosting the live app on vercel.
Found this repo: https://github.com/vercel-labs/remix-on-the-edge
Could be an interesting this to consider.
As suggested by @DonKoko I'm moving this discussion to a separate issue. Would be nice to update the production ready designs to the definitive branding.
ORIGINALS
Based on our discussion last week I think we compromised on a few things.
UPDATED ORIGINALS
To be discussed:
We have a component called Toast that shows notifications.
On mobile it is not placed in the correct place. @hunar1312 could you please solve it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.