About the project

GIFFLE is a web application, resembling a live search engine for gifs.

Technologies used

The project was made with Angular 13. Additional libraries and technologies used:

• RxJS
• MDB Bootstrap
• ngx-scrolltop
• ngx-pagination

Data & API

The data used for the app is provided by GiphyAPI for developers.

Set up locally

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

1. Get a free API key from the GIPHY Developers website.

2. Clone the repository

    git clone https://github.com/StefanShivarov/giffle.git

3. Install NPM packages if necessary

    npm install

4. Enter your GiphyAPI key in the environment.ts file:

    const giphyApiKey = 'ENTER YOUR API';

5. Run the application and open it inside your browser

    ng serve --open

App Walkthrough

When initially opening the app and when the search bar is empty, you will see the most trending gifs around the world.

When you get to the bottom of the page, a little button pops up in case you want to jump back to the top. There is also a pagination with hundreds of pages in order to explore as many gifs as possible in the smoothest possible way.

Now here comes the fun part... Do you want to look at some lovely panda GIFs? Just type it in the live search bar and you don't even need to press ENTER, it just loads itself.

Or maybe you're more into food? You can search for whatever you want!

Contact Me