andresz74 / react-photogram Goto Github PK

howdy 🤠

finally got around to taking a look and I must say, the code structure looks vaguely familiar 😆 looks good though! only a few things I wanted to point out. I'm not totally sure what you intend on doing with this or how far you're planning on going, but off the top of my head, here are a few things (feel free to ignore, of course!):

1. I'm seeing most everything is hardcoded styles (which makes total sense, most of my side stuff is the same). just noting that moving some of the shared styles and things (like font sizes, colors, margin sizes, etc.) to a common styles folder/file sooner than later will help adding to it in the future. I know this from experience 🤪
2. related: I see most everything is set up for desktop view (which also makes sense). but similar to the above, establishing some of those mobile view styles sooner than later will save you some headache later on - unless you don't intend on doing mobile, which is totally fine too!
3. I noticed uploading an image isn't tied to a user? (at least that I could find). that might be good - if you have users, you might as well track who uploaded it and then you could display the person who added the image (or at least the email for now) and then have the ability to do things like see all images from a user, or prevent deletes from a different user.
4. I see you're using <i> tags for the icons - I know bootstrap and some libraries use that to stand for icon but <i> is generally for italicized text (or otherwise text that should standout). I recommend moving these to be either divs or spans to be a bit more semantically correct - you could also move those common icon buttons to a separate component and pass in an inline prop 😄 something like:

// CloseIcon.tsx
const CloseIcon = ({ inline, ...props }) => (
   inline 
      ? <span className='icofont-bin' />
      : <div className='icofont-bin' />
)

or you could take it further and make an Icon.tsx with a name prop that'll map to either ...-bin or ...-close, etc.

but, that's getting a little nitpicky 🙃

it looks good and works well from my playing around with it 🎉