https://github.com/fizzymo/gif-search-application
Enhance the design and layout of the GIF search application for mobile devices.
https://github.com/fizzymo/gif-search-application
accessibility bootstrap css express giphy-api git html javascript jquery nodejs responsive-design vercel visual-studio-code webpack
Last synced: 2 months ago
JSON representation
Enhance the design and layout of the GIF search application for mobile devices.
- Host: GitHub
- URL: https://github.com/fizzymo/gif-search-application
- Owner: FizzyMo
- License: mit
- Created: 2024-08-09T20:27:58.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-25T05:47:41.000Z (over 1 year ago)
- Last Synced: 2024-11-25T06:26:31.072Z (over 1 year ago)
- Topics: accessibility, bootstrap, css, express, giphy-api, git, html, javascript, jquery, nodejs, responsive-design, vercel, visual-studio-code, webpack
- Language: JavaScript
- Homepage: https://gif-search-application.vercel.app
- Size: 131 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> [!NOTE]
> This README is currently being updated. Some sections may be incomplete or undergoing revisions. Thank you for your patience!
GIF Search Application
GIFs Master is a simple web application that allows users to search for and view GIFs. The application is designed with a focus on enhancing the user experience on mobile devices by optimizing touch interactions, responsiveness, performance, and accessibility.
***
## Table of Contents
- [Introduction](#introduction)
- [Focus Areas](#focus-areas)
- [Features](#features)
- [Wiki](#wiki)
- [Installation](#installation)
- [Project Structure](#project-structure)
- [Usage](#usage)
- [API Details](#api-details)
- [Technology Stack Breakdown](#technology-stack-breakdown)
- [Responsive Design](#responsive-design)
- [Viewport Meta Tag](#viewport-meta-tag)
- [Flexible Grid Layout](#flexible-grid-layout)
- [Media Queries](#media-queries)
- [Mobile-First Approach](#mobile-first-approach)
- [Touch Interaction Optimization](#touch-interaction-optimization)
- [Larger Touch Targets](#larger-touch-targets)
- [Touch Feedback](#touch-feedback)
- [Performance Optimization](#performance-optimization)
- [Optimized Images](#optimized-images)
- [Minification](#minification)
- [Accessibility Considerations](#accessibility-considerations)
- [High Contrast Mode](#high-contrast-mode)
- [Text Scaling](#text-scaling)
- [ARIA Attributes](#aria-attributes)
- [Author](#author)
- [Contact](#contact)
***
## Introduction
GIF Search Application is designed to deliver a seamless GIF search experience, especially on mobile devices.
### Focus Areas
- **Touch interactions:** Easy and responsive interactions for touchscreens.
- **Responsiveness:** Adapts perfectly to different screen sizes.
- **Performance:** Optimized for fast loading and smooth animations.
- **Accessibility:** Accessible to users with disabilities.
## Features
* Quick search using predefined buttons for popular queries.
* Custom searches using the text input.
* Toggle GIFs between still and animated states with a simple tap.
## Wiki
For a deeper dive into the planning, development decisions, and the evolution of GIFs Master, head over to the detailed [Wiki](https://github.com/FizzyMo/GIF-Search-Application/wiki).
## Installation
1. **Clone the Repository**
``git clone https://github.com/your-username/GIF-Search-Application.git ``
3. **Navigate into the project directory:**
``cd gif_search_application``
5. **Install Dependencies**
- Make sure you have [Node.js](https://nodejs.org/) installed.
- Install the required dependencies:
``npm install``
6. **Setup Environment Variables:**
* Option 1: Manually create `.env` file:
* Create a `.env` file in the root directory.
* Option 2:
* Use a script to create the .env file
* `npm install dotenv --save`
7. **Obtain a Giphy API Key:**
* Go to [Giphy Developers](https://developers.giphy.com/)
* Create an account if you don't have one.
* Create a new app to get your API key.
* Add your API key to the `.env` file
* `GIPHY_API_KEY=your_giphy_api_key`
## Project Structure
```
gifs
├── api/
│ ├── index.js
│ └── search.js
├── public/
│ ├── assets/
│ │ └── javascript/
│ │ └── main.js
│ ├── video/
│ │ └── accessibility_demo.gif
│ ├── index.html
├── dist/
│ ├── bundle.js
│ └── style.css
├── .env
├── .gitignore
├── package.json
├── package-lock.json
└── webpack.config.js
```
* `api/` Contains server-side code for handling API requests.
* `index.js` Defines the main API routes and request handlers.
* `search.js` Contains logic for searching and processing GIF requests.
* `public/` Stores static files and assets.
* `assets/`
* `javascript/` Contains JavaScript files, including main.js.
* `video/` Stores video-related assets like GIFs, e.g., accessibility_demo.gif.
* `index.html` The entry point HTML file for the web application.
* `dist/` Contains bundled and minified assets generated by Webpack.
* `bundle.js` The main JavaScript file with all bundled and minified code.
* `style.css` The main CSS file with all bundled and minified styles.
* `.env` Stores environment variables, such as API keys.
* `.gitignore` Specifies files and directories that should be ignored by Git.
* `package.json` Lists project dependencies, scripts, and metadata.
* `package-lock.json` Ensures consistent dependency versions.
* `webpack.config.js` Configuration file for Webpack, detailing how to bundle and minify assets.
## Usage
1. **Start the server:**
`npm start`
2. **Open your browser and navigate to** `http://localhost:3000`
3. **Use the predefined buttons or type a search query into the input box and click "Submit" to fetch and display GIFs.**
4. **Click on the GIFs to toggle between still and animated states.**
## API Details
* **Base URL:** `https://api.giphy.com/v1/gifs`
* GIPHY Search gives you instant access to our library of millions of GIFs by entering a word or phrase. See [GIPHY Docs](https://developers.giphy.com/docs/api/endpoint#trending) for more information
* **Endpoints:**
* **Search GIFs:** `/search`
* **Description:** Search for GIFs by a query term.
* **Query Parameters:**
* `q` **(required)**: The search query term.
* `api_key` **(required)**: Your Giphy API key.
* `limit` **(optional)**: The number of GIFs to return. Default is 25, maximum is 50.
* **Example Request:**
* `GET https://api.giphy.com/v1/gifs/search?q=dogs&api_key=your_giphy_api_key&limit=20`
* **Example Response:**
```
{
"data": [
{
"type": "gif",
"id": "xT9IgDEI1iZyb2wqo8",
"images": {
"fixed_height_still": {
"url": "https://media.giphy.com/media/xT9IgDEI1iZyb2wqo8/200_s.gif"
},
"fixed_height": {
"url": "https://media.giphy.com/media/xT9IgDEI1iZyb2wqo8/200.gif"
}
}
}
// Additional GIF objects
]
}
```
* **Refer to the [Giphy Developer Portal](https://developers.giphy.com/docs/api/) for more options to customize your search and retrieve different types of GIFs**
## Technology Stack Breakdown
### **Front-End:**
* **HTML**
* **Purpose:** Structures the content of the webpage.
* **Usage:** Defines elements such as headings, paragraphs, buttons, and forms.
* **CSS**
* **Purpose:** Styles the visual presentation of the HTML content.
* **Usage:** Custom styles for text, buttons, images, layout, and responsiveness (e.g., media queries for text scaling and high contrast mode).
* **JavaScript**
* **Purpose:** Adds interactivity and dynamic behavior to the webpage.
* **Usage:** Handles user interactions (e.g., button clicks, form submissions), performs AJAX requests, manipulates the DOM, and manages state changes.
* **Bootstrap**
* **Purpose:** Provides a framework for responsive design and pre-styled components.
* **Usage:** Includes ready-to-use components like buttons and forms that are styled for different screen sizes.
* **jQuery**
* **Purpose:** Simplifies DOM manipulation and AJAX requests.
* **Usage:** Facilitates adding and removing elements, handling events, and making AJAX calls to the server.
* **Webpack**
* **Purpose:** Bundles and minifies CSS and JavaScript files.
* **Usage:** Combines multiple files into a single bundle, optimizes performance by reducing file sizes.
### Development Tools
* **Visual Studio Code (VSC)**
* **Purpose:** Integrated development environment (IDE) for coding.
* **Usage:** Writing, editing, and debugging code. Supports extensions for various languages and tools, including C++ and JavaScript.
* **Git**
* **Purpose:** Version control system to manage code changes.
* **Usage:** Tracks changes in the codebase, allows for collaboration, and manages versions of the project.
* **Github**
* **Purpose:** Platform for hosting Git repositories.
* **Usage:** Stores and manages code repositories, facilitates collaboration through pull requests, issues, and code reviews.
### Back End
* **Node.js**
* **Purpose:** JavaScript runtime for building server-side applications.
* **Usage:** Executes JavaScript code on the server, handles server-side logic, and manages API requests.
* **Express**
* **Purpose:** Web application framework for Node.js.
* **Usage:** Simplifies the creation of server-side routes, handles HTTP requests, and manages middleware.
* **API**
* **Giphy API**
### **Deployment**
* **Vercel**
* **Purpose:** Hosting and deployment platform for server-side applications and static sites.
* **Usage:** Deploys the application to a live environment, handles automatic builds and deployments from the Git repository.
## Responsive Design
### Viewport Meta Tag
To ensure that the application is responsive on all devices, the viewport meta tag is included in the HTML head. This ensures that the application scales properly on different screen sizes.
``
``
### Flexible Grid Layout
For layout flexibility, Bootstrap's grid system is used. Elements are arranged in rows and columns that adjust based on screen size.
### Media Queries
Media queries are implemented to adjust font sizes, image sizes, and margins based on screen width. This ensures that the application remains usable on various devices.
```
@media (max-width: 768px) {
h1 {
font-size: 36px;
}
.btn-primary, .btn-success {
font-size: 16px;
}
}
@media (max-width: 576px) {
h1 {
font-size: 28px;
}
.btn-primary, .btn-success {
font-size: 14px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 24px;
}
.btn-primary, .btn-success {
font-size: 12px;
}
}
```
### Mobile-First Approach
The design begins with small screens and progressively enhances for larger screens, ensuring that the core functionality is optimized for mobile devices first.
## Touch Interaction Optimization
### Larger Touch Targets
Buttons and interactive elements are styled to ensure they are easily tappable on mobile devices. Here is how the buttons are styled to meet the recommended touch target size:
```
:root {
--bg-color: #f0f8ff;
}
body {
background-color: var(--bg-color);
margin: 0;
padding: 20px;
font-family: 'Lora', serif;
}
h1 {
font-family: 'Lobster', cursive;
color: #ff69b4;
font-size: 48px;
text-shadow: 2px 2px #ff4500;
margin-bottom: 30px;
}
.btn-primary {
display: inline-block;
padding: 12px 24px;
margin-left: 10px;
background: #ff69b4;
color: #fff;
font-size: 18px;
border-radius: 20px;
border: none;
cursor: pointer;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.btn-success {
background-color: #32cd32;
border-radius: 20px !important;
color: white;
border: none;
margin-left: 10px !important;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
input.form-control {
border-radius: 15px !important;
border: 2px solid #ff69b4;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.container {
margin-bottom: 30px;
}
#random img {
width: 100%;
height: auto;
display: block;
margin: 10px auto;
border-radius: 15px;
transition: transform 0.2s;
}
#random img:hover {
transform: scale(1.05);
}
.center-input {
width: 100%;
margin: 0 auto;
}
#add {
font-size: 22px;
color: #ff4500;
margin-bottom: 10px;
display: block;
}
.form-control {
width: 100%;
}
.input-group {
width: 100%;
}
@media (max-width: 768px) {
h1 {
font-size: 36px;
}
.btn-primary, .btn-success {
font-size: 16px;
}
}
@media (max-width: 576px) {
h1 {
font-size: 28px;
}
.btn-primary, .btn-success {
font-size: 14px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 24px;
}
.btn-primary, .btn-success {
font-size: 12px;
}
}
```
### Touch Feedback
CSS transitions provide visual feedback for touch interactions:
```
#random img {
width: 100%;
height: auto;
display: block;
margin: 10px auto;
border-radius: 15px;
transition: transform 0.2s;
}
#random img:hover {
transform: scale(1.05);
}
```
## Performance Optimization
### Optimized Images
GIFs are served in WebP format to reduce load times on mobile devices.
```
for (var i = 0; i < gifs.length; i++) {
// Get URLs for WebP and GIF formats
const gifUrl = gifs[i].images.fixed_height.url;
const webpUrl = gifs[i].images.fixed_height_webp ? gifs[i].images.fixed_height_webp.url : gifUrl;
const stillUrl = gifs[i].images.fixed_height_still.url;
const webpStillUrl = gifs[i].images.fixed_height_still_webp ? gifs[i].images.fixed_height_still_webp.url : stillUrl;
// Create image element with descriptive alt text
var image = '![' + gifs[i].title + ']('%20+%20webpStillUrl%20+%0A%20%20%20%20%20%20%20%20%20%20%20%20')
Hall of Memes
```
```
Submit
```
## Author
**Carisa Saenz-Videtto**
## Contact
carisasaenz@gmail.com