Photo Gallery

This is a photo gallery built with React, Tailwind and Pixabay's APIs

Table of contents

• Overview
  • Requirements
  • Screenshot
  • Links
  • Getting Started with Create React App
• My process
  • Built with
  • Useful resources
  • Continued development
• Author
• Credits

Overview

Requirements

• Pull data from the Pixabay's API
• Display images and their data into a grid
• Create a search form
• Styled & polished

Screenshot

Links

• Live Site URL: @Netlify
• Solution URL: @GitHub

Getting Started with Create React App

This project was bootstrapped with Create React App.

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid Layout
• React.JS
• FlexBox
• Tailwind CSS
• Framer Motion

Useful resources

• ReactJS - How to set up a local development environment on your computer
• ReactJS - How do I bind a function to a component instance?
• TailwindCSS - Install Tailwind CSS with Create React App
• Create React App - Adding Custom Environment Variables (hide API's key)
• StackOverflow - How to remove the white space at the start of the string
• PluralSight - How to Render <a> with Optional href in React
• StackOverflow - onClick "save image as" in React
• StackOverflow - How to change the color on top an image using hover in Tailwind css
• learnetto & ms_yogii - How to implement form validation in React
• BobbyHadz - Scroll to the top of the Page in React.js
• StackOverflow - Call multiple functions onClick ReactJS
• StackOverflow - How to output numbers with leading zeros in JavaScript
• StackOverflow - How to create scrollable element in Tailwind without a scrollbar
• Daily Dev Tips - Using Google Fonts in a Tailwind project
• StackOverflow - How to make element invisible in mobile size but visible in laptop size in TailwindCSS
• Nikhil Gupta - How to disable Background Scroll when a ‘Modal/Side-Drawer’ is open in React JS
• StackOverflow - How to make element invisible in mobile size but visible in laptop size in TailwindCSS
• Framer - Scroll-triggered animations
• Framer - Animate components when they're removed from the React tree
• FreeCodeCamp - How to Import SVGs in a React app
• Paul Gaumer - Pulse animation with Framer Motion

Continued development

I'd like to:

• Add a button to download images
• Add a newsletter subscription form with validation
• Save last search term on localStorage
• Search new photos clicking on tags
• Add a mobile navbar
• Beautify app with Framer Motion's animations

Author

• Website - Emanuele Del Monte

Credits

• Pixabay - APIs
• Heroicons - Icons
• GetWaves - Wave SVG
• NetGuru - Avatars
• Icons8 - Github SVG