Photosnap

Checkout The Live Project: HERE!

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site

Screenshots

Desktop Version

Tablet Version

Mobile Version

Links

• Live Site URL: Netlify

My process

Built with

• Flexbox
• CSS Grid
• Mobile-first workflow
• Next.js - React framework
• Node.js - JS Runtime
• Tailwind CSS - CSS Framework

What I learned

Building a JSON Data file from scratch

{ "title": "The Mountains", "images": { "desktop":
"./assets/stories/desktop/mountains.jpg", "mobile":
"./assets/stories/mobile/mountains.jpg", "tablet":
"./assets/stories/tablet/mountains.jpg" }, "date": "April 16th 2020",
"photographer": "John Appleseed", "isHomepage": true, "id": 2 },

Using the Fill CSS property to fill a SVG

#tw:hover {
  fill: url(#gradientTW);
}

Using Map and Filter together to populate cards using the JSON data

{
  storiesItemsData
    .filter((media) => !media.isHomepage && !media.isMainCard)
    .map((media) => (
      <StoriesCards
        title={media.title}
        mobile={media.images.mobile}
        desktop={media.images.desktop}
        tablet={media.images.tablet}
        date={media.date}
        photographer={media.photographer}
        key={media.id}
      />
    ));
}

Using state to toggle between classes for tailwind styling and displaying text

const [isActive, setActive] = useState(false);

const toggleClass = () => {
  setActive(!isActive);

Continued development

I would like to learn more about working with JSON data in React & NextJS projects. I would also like to gain more experience creating reusable components.

Useful resources

• Grid Template Cols - TailwindCSS - This helped me with creating the layouts to ensure they were responsive and taking up their required space. Tailwind has really great documentation that makes using their framework a breeze.

• Kevin Powell - Are you writing responsive CSS the wrong way? - This is an amazing video that really helped me understand that less is more when working with CSS and responsiveness.

Author

• Website - Tyrell Curry
• Frontend Mentor - LinkedIn
• Twitter - @Tyrell_io

Acknowledgments

Special thanks to Rodderick Garland for collaborating on the project.