Giphy-from-wish: A Giphy SPA Project

Antani

Antani Kalchev

Giphy-from-wish

A Giphy SPA for searching and uploading GIFs.

🧠 About the Project

Giphy-from-wish is a single-page application (SPA) built as part of the Telerik Academy Web Module.
It demonstrates core concepts in modern front-end development, including:
āœ… DOM manipulation via the DOM API
šŸ”„ Asynchronous communication using AJAX and the Fetch API
🌐 RESTful HTTP requests to remote endpoints
ā¤ļø Working with favorites and localStorage
šŸ” Dynamic search
šŸ“„ GIF uploading (via file or URL)
šŸ“„ Rendering details pages for individual GIFs

šŸ–¼ļø Wireframes

šŸ“Š Main View (Trending & Favorites)

šŸ“ Details View

ā¬†ļø Upload View

šŸ› ļø Technologies Used

Vanilla JavaScript (ES6+)
HTML5 / CSS3
Fetch API
Basic REST principles
No external libraries (optional: Tailwind/Bootstrap)

šŸ’” Project Structure

giphy-from-wish/
ā”œā”€ā”€ gifs/ # Pre-downloaded GIFs used to demonstrate upload functionality
ā”œā”€ā”€ node_modules/ # Installed dependencies (auto-generated)
ā”œā”€ā”€ pictures/ # Images used in documentation/README
ā”œā”€ā”€ template/ # Main application code
│ ā”œā”€ā”€ constantsFolder/
│ │ └── constants.js # All constant values to avoid magic numbers
│ ā”œā”€ā”€ events/
│ │ ā”œā”€ā”€ helpers.js # Utility functions (clearScreens, etc.)
│ │ └── navigation.js # Page loading functionality (loadPage)
│ ā”œā”€ā”€ styles/
│ │ ā”œā”€ā”€ style.css # Custom styling
│ │ └── normalize.css # CSS reset/normalization
│ ā”œā”€ā”€ utils/
│ │ └── download-gif.js # Handles GIF downloading from Giphy
│ ā”œā”€ā”€ views/ # All page view renderers
│ │ ā”œā”€ā”€ trending.js
│ │ ā”œā”€ā”€ favorites.js
│ │ └── ... (other views)
│ ā”œā”€ā”€ main.js # Primary event listener for all page interactions
│ └── index.html # The primary html file
│
ā”œā”€ā”€ .gitignore # Specifies untracked files
ā”œā”€ā”€ .prettierrc # Code formatting configuration
ā”œā”€ā”€ .eslintconfig # Linting rules
ā”œā”€ā”€ package.json # Project configuration and dependencies
└── README.md # Project documentation```

Like this project

Posted Jun 27, 2025

Developed a Giphy SPA for searching and uploading GIFs using modern front-end techniques.

Likes

0

Views

2

Timeline

Apr 16, 2025 - Apr 22, 2025

Clients

Telerik Academy