Photo-Gallery 🖼

Photo-Gallery An application that depends on the API to display the data inside it from the server, where you can search for gifs that is related to any field.

Live demo here

Table of Contents 🔗

• Problem
• Solution
• Features
• User Stories
• User Journey
• Screenshots
• Technologies Used
• APIs
• Usage
• Project Status
• Acknowledgements
• Contact

Problem ⁉️

• Many people especially entertainment content owners, who are spreading their posts to the public, are suffering from searching the helper models for their content, especially the gifs websites because there aren't many websites that are Specialized in displaying gifs, even if they find these websites, the loading is very long.

Solution 💯

• So we decided to create a website that provides the ability to users to search for gifs in any field, with ability to limit the numbers of these gifs for making the loading of the website shorter.

Features 📑

• Simple UI
• Responsive
• Search Photos
• Handle server errors (500 error page)
• Handle cleint errors (404 error page)
• Cover all user-input cases (Handle non-valid search input)
• Clean Code
• Reusable Code

User Stories 📝

As a user:

• I want to be able to search for any gif.
• I want to be able to select the number of gifs to show.
• When I search for invalid input I want to get a message informing me about the limit number of photos and allowed words to search.
• I want to know more about your website by viewing an about page.
• I want to see a loading screen when fetching data from external APIs.
• I want to see 404 page if i didnt found page that i want, and 500 page for To know that the site is not working at the moment.

User Journey ✈️

• When opening the Photo-Gellary website you'll be faced with our logo and a link to visit ourabout page.
• when you visit about page by the link, you will see description for our site and button for back to home page.
• In the home page, you will see two input fields, you can search for any gif you want by typing the search-term in the input-field that has the placeholder search a photo, and you can select the number of the gifs too.
• While you're waiting for the data to load you'll see a loading screen which will disappear when the data is ready.
• If the search does not meet the verification requirements, a message will appear informing you about what is allowed to be written.
• If the gif you've searched for is not available, a Popup window will appear to inform you that we don't have what you've searched for, you can close the popup by clicking anywhere in the website.

Screenshots 🔎

Note: all screenshots are from a device which is 1000px wide

• Home Page

• Loading Screen

• Validation Data

• Not Found Data

• About Page

Technologies Used 💻

• HTML5
• CSS3
• JavaScript (APIs, fetch)
• node.js (express.js)

Photo-Gallery uses 🔑

• Gifs API for fetching gifs articles.

Usage 🔢

• git clone https://github.com/GSG-G11/Photo-Gallery.git
• Change your current directory cd ./ Photo-Gallery
• Open it with your favorite text editor code .
• Enjoy Contributing to the Photo-Gallery website

Project Status ❓

Project is: Completed

Acknowledgements 📅

• This project was based on Week 5 - Code Academey.

Contact 👥

Created by @zaher-aa, @K6a1ed - feel free to contact us!