avenida714 / Mic-Lockr

PERN-stack project based on Flickr

Mic Lockr

Thank you for checking out Mic Lockr, my full-stack web application based on Flickr.

Live link: https://mic-lockr.herokuapp.com/

Flex your vocal cords and share pictures of your favorite microphones!

Splash page

Mic Lockr page

View photos from all users, and click them to navigate to that image's page.

View a Single Mic Page

View single image details and leave comments.

Technologies Used

Features

• Sign-in/Log-in with your own creditionals or via our Demo User
• Create, Read, Update, and Destroy Images with Error Handling
• Create, Read, and Destroy Comments with Error Handling

Things to develop in the future:

• I would love to add AWS integration
• I want to create personal Lockrs to allow users to keep track of mics that only they have added.

Technical Implementation

I had an ongoing issue where viewing a single mic would return a blank screen upon refresh. This was because my return statement had been relying on my Redux store that was not hydrating fast enough. I was able to fix the issue using a short circuit (&& &&) before my return, giving enough time for the store to be there.

return personLoggedIn && currentlyViewingThisMic && (
    <div className='mostOuterDiv'>
      <div className='singleMicDiv'>
      <img className='micImage' src={currentlyViewingThisMic.imageURL} alt={currentlyViewingThisMic.title}  onClick={() => history.push('/')}></img>
      <h1 className='singleMicTitle'>{currentlyViewingThisMic.title}</h1>
      <h2 className='singleMicDescription'>{currentlyViewingThisMic.description}</h2>
    </div>
    <div>
      {editButton}{deleteButton}
    </div>

    <Comments />
    {commentButton}
    {showCommentForm && (
      <AddComment />
    )}
    </div>

  )
}