Solution for a challenge from Devchallenges.io.
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository & the backend repo (need to add env variables to backend)
$ git clone https://jdegand.github.io/my-unsplash-backend
$ git clone https://jdegand.github.io/my-unsplash-frontend
# Install dependencies in both repos
$ npm install
# Run the both apps (in frontend - enable cookies)
$ npm start- JWT Cookie needs to use 'secure:true' or chrome will block the cookie.
- Windbnb, Cat Wiki, Mongo Async Crud, React Register Tut used to create this.
- Images are not capped by height. So they can be larger and smaller. Used columns to approximate the masonry look.
- Using grid - grid-auto-flow: dense - really doesn't help create a masonry like look. Experimental 'masonry auto flow' has no support and may not be adopted at all.
- Using columns seems to be a good way of achieving a similar look without using external libraries.
- Testing is difficult using random images because they will change after a few minutes of time. I could use cloudinary and add different sized pictures and then have a url to get the images.
- On hover, the delete button is positioned right 10% so if picture is not wide enough the button may not overlap the image.
- Used a url regex to valid the input - this could probably be improved or looked into more.
- The search filter has an useless submit function - I could remove the button and just add the magnify svg as a background image.
- I prefer the search filter to automatically filter results versus waiting to the submit button to be clicked.
- Could have added the authentication header to axiosPrivate instance
- Used a chained ternary in the Images component render
- Could have used a state object for the username and password and one onChange handler vs separate state and onChange handlers
- Added all styles to index.css versus multiple style sheets for various components.
- Add a package to disable react dev tools - to prevent accessToken tampering.
- Used
response.data['accessToken']- response.data.accessToken didn't work - Used state to prevent a ton of requests to the backend - adding images to the first useEffect in Images - caused a ton of requests to the backend - probably could refactor that useEffect and maybe not even need my workaround.
- Need to look more into Axios. Axios has advanced features that I have not used frequently.
- Removed JWT-decode - not really necessary
- All pictures are linked to a user
- Could create a page where all user pictures are displayed and you can only delete when logged in etc
- Adding authentication made sense over using a password delete system - which I have done similarly in odin-project-members-only
- Lazy loading - problem might be not knowing the dimensions of random image
- Medium - jwt authentication and private routes / redirects
- Awik - generate random images from unsplash without api key
- Stack Overflow - sort an object array by date
- Stack Overflow - regex to match a url
- Medium - pinterest layout in react
- Blog - react image gallery react masonry
- Medium - prevent unnecessary api calls
- Stack Overflow - props & useEffect
- Stack Overflow - prevent filter cascade
- Mastering JS - axios delete
- Stack Overflow - axios delete request
- MDN Docs - masonry auto flow
- FreeCodeCamp - image gallery with pexels api
- YouTube - CSS Masonry Layout with columns