quickly-search

doc file

Quickly Search Engine

tags: engine giphy gif search

🔍 Click here to Visit the Heroku website

:::info Mario don't touch our md :::

Table of Contents

• Goals
• Introduction
• Sketches
• The Final Product
• How it works
• Keynote Features
• Backend Requesets Documentation
• Strech Goals
• Issues We Faced
• Resources
• Credits

Goals

This week's project goal was to implement a search bar with an auto-complete feature with some key notes

• The front end send a get request to the back end.
• The back end fetched the data from an api or a file and returns it to the front end.
• Use at least 1 API.
• contain a least 2 routes.

Introduction

our initial goal was to use a simple external api to fetch the auto-complete suggestions from, so we went back the the giphy api (which we used on one of the previous workshop) that already has this feature integrated into it.

and one thing lead to the other and we ended up creating a "simplified" giphy like clone.

Sketches

there were the sketchs we based our project on, created in Figma to help us visualize the end result.

Concept Desktop view

  

Concept Mobile view

  

SeachBar->BEnd: Send the search Value
Note right of BEnd: The APIs wementioned\nare working now
BEnd-->SeachBar: Sends the whole data
Note left of SeachBar: First Displayes the\nwallpaper
SeachBar->BEnd: Asks if needs to load more

The Final Product

Realtime Mobile view

  

Realtime Desktop view

How it works

Once you enter the website, you search for gifs, and while you're typing it provides you with some autocomplete suggestions as it tries to load gifs for the partial query.

If you're looking for another intresting topic to load, our suggestion bubbles will do the trick. just by clicking on one of related suggestions bellow/above the search bar you will trigger a new gifs search.

The gifs are relatively small but once you click on one of them it enlarges as a popup. and if you want to return to the search results, a simple click outside of the enlarged gif (or hitting the escape button) will seffice.

and to make thing less boring, The page will load gifs as you scroll infinitly!! (or untill your phone/computer crashes)

Keynote Features

1. Support for mobile - Mobile first approach.
2. Suggestions that related to your search keywords.
3. "Random" website background Wallpaper.
4. Displaying GIFs when clicking on it (Press outside the frame/use Esc to exit).
5. infinite scrolling.

Backend Requesets Documentation

• "/search?q=.....&count=....&start=..."  OR  "/trending?q=.....&count=....&start=..."
  • q: search quary.
  • [optional] count: the number of returned/retrieved elements (default: 25 items).
  • [optional] start: the starting index of the elements to be retrieved (default: 0 ).
  • return: an array of objects example and example.

• "/autocomplete?q=........"
  • return: an array of strings.

• "/suggestions?q=........"
  • return: an array of strings.

• "/wallpaper?type=random"
  • the "/wallpaper" will return a new photo every day.
  • [optional] type: if equals "random", returns a random photo out of the last 7 days photos.

Strech Goals

• change the page's theme/color scheme.
• set random sized images/gif container using the grid layout.
• lazy load images (effect: from the center outwards effect), example {%youtube aUjBvuUdkhg %}
• show logs in developement only
• add more testers for backend and front end :/

Issues We Faced

• no accessabilty support.
• "tab" button does not travel between elements
• it takes time for the wallpaper to load.

We had fun

Resources

1. Moris :)
2. Google
3. Giphy Api Documentation
4. Node.js Documentation
5. background Image Api Documentation
6. Icons

Credits

• Giphy.com
• TimothyYe/bing-wallpaper + bing.com
• Flaticon.com