Image collection web app.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Deploy link:


Image collection web app.

Project Overview

Project Schedule

This schedule will be used to keep track of your progress throughout the week and align with our expectations.

You are responsible for attending squad standup at the begining and end of the day.

Day Deliverable Status
Day 1 Project Description Complete
Day 2 Components boiler plate, third party API search function(for testing that it works), Start on Rails Complete
Day 3 Finish backend, start front end main page and nav Complete
Day 4 Make stash page and form Complete
Day 5 Image component and logic (button to add to stash etc) Complete
Day 6 CSS, animation and attempt extra features (post MVP) Complete
Day 7 Present Complete

Project Description

A pinterest like web app that fills the home page with images from a third party API (pixabay) based on a search term and lets users "save" the images to their personal "stash" and make notes that are associated with said images.


Home page with menu open:

Home page with selected image with the "add to stash" button showing:

Stash page:

The home page after signing in:

Login page (POST MVP):

Priority Matrix

Priority Description
A Rails Models, Routes, Controllers
B React Components Boiler Plate
C Front end API implementation
D Implement Authentication
E Login Page Form
F Stash Page Form
G Nav menu
H Display images on the screen from different apis randomly based on keyword
I Create a "fav" button and a "faves" page with a list of all favorites
K Profile form page
L Load on scroll feature

MVP/PostMVP - 5min

The functionality will then be divided into two separate lists: MPV and PostMVP. Carefully decided what is placed into your MVP as the client will expect this functionality to be implemented upon project completion.


  • Render random images based on keyword on the front page from one or more THIRD PARTY image APIs
  • Allow the user to save the images to their stash
  • Allow the user to visit the stash and be able to attach or edit a note that is associated with that image.


  • Allow the user to login or register to the app
  • Allow the user to have a faves page where he keeps the images that he likes most from his stash.
  • have a button that shows everyone who liked an image.
  • Better styled with animations
  • If user scrolls to the bottom of the page the page loads more images that continu down the page.

Architectural Design

Define the the components and the architectural design of your app.


UI Components

Based on the initial logic defined in the previous sections try and breakdown the logic further into stateless/stateful components.


Component Description
APP holds all other components stateful
LOGIN holds the login form and the register form stateful
holds the login form and the register form stateful
BODY is the main page that displays all images from api call stateful also holds all other components
ABOUT has about information stateless
Stash displayes the saved images and has the notes form, stateful
PROFILE has the form to edit user information such as name, emai, and image url stateful
MENU is the nav component at the top of the page changes depending on CSS is stateless

Time frames are also key in the development cycle. You have limited time to code all phases of the game. Your estimates can then be used to evalute game possibilities based on time needed and the actual time you have before game must be submitted. It's always best to pad the time by a few hours so that you account for the unknown so add and additional hour or two to each component to play it safe.

Component Priority Estimated Time Actual Time
Deployment L 5hrs hrs 8
Components Boiler Plate L 1hrs hrs 1
Getting third party API to work with search H 4hrs 4hrs
Rails H 10hrs 6hrs
Making every search result to display in a separate component which includes a button to "add to stash" H 5hrs 8hrs
Stash Form H 5hrs 4hrs
Stash image button and logic H 3hrs 5hrs
Nav menu M 6hrs 3hrs
Styling and animations M 10hrs 8hrs
unexpected issues M 8hrs 5hrs
Total H 52hrs hrs52

Helper Functions


Function Description
Capitalize This will capitalize the first letter in a string of text

Additional Libraries

axios, react, rails. APIs: pixabay,

Library What it Does
Axios To make http requests
React For front end reactive components
react router to make routs for my site
Rails for my backend
postgresql for my database
pixabay Thrid party api for my image search

Code Snippet

I wanted to button for adding to stash to appear only when you clicked on a picture but for only one button to show up at a time because I didnt want the user to have a bunch of "ad to stash buttons shownig it didn't look good. To solve this issue I had to do the following:

This function took the index number from any Image component from the Mapping over on search would then set that index as a state. The index is passed to the toggleStashFunction Onclick

function toggleStashButton(i) {

console.log(i) setIndexCheck(i)


The useEffect on each image component would constantly compare if it's index maches the setIndexCheck. if this was true then the button would be allowed to be toggled for that component and no other component like it.

useEffect(() => { if (indexCheck == i ){ setAllowToggleStashButton(true) } else { setAllowToggleStashButton(false) } })

Change Log

Original Plan Outcome
Enlarge image on click to reveal add to stash button change to only show a button without enlarge as I could not figure out a clean way to do it
Nav cditched the hamburger menu idea
Stash component higherarchy added an extra intermediary component that hilds the "get" part of the stash

Issues and Resolutions

I set the unique key for the mapping over each image that is in my database in the wrong place. Whele it would still show all the images in a users stash when clicking the delete button it would for some reason delete the wrong image (in real time on the front end, the back end would delete correctly and you could see the result but only on refresh) even through the image is being removed from an array by its index and had nothing to do with the key. It took me way too long to figure out that not having a unique key throws it off. I still dont know why.


ERROR: app.js:34 Uncaught SyntaxError: Unexpected identifier
RESOLUTION: Missing comma after first object in sources {} object