Giphy-from-wish: A Giphy SPA Project

Portfolio project

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```

0 likes · 11 views · Jun 27, 2025

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

Timeline

Apr 16, 2025 - Apr 22, 2025