/giphy-api-contest

Primary LanguageJavaScript

Giphy Api Contest✨

Hey YMI Geeks👋 , Welcome aboard YMI is conducting a fun little contest that would be an interesting learning opportunity for all and little community building exercise and if thats not enough the winner of this contest will get a little badge lol

enter image description here

What's the contest About?

Okay getting straight to the point, Let me tell you what's the contest is about So you guys have to build a little giphy clone and you gotta use Giphy Api for that. There are no hard and fast rules except using the api, Go as wild as you want !

Submissions will be open untill this weekend, So You've got almost a week to build this project👇

Check It Out

enter image description here

Down below is a little Tutorial/Guide of how you can make this application

Pre-Requisites ✒️

This is a begginer-intermediate level front-end project so i assume you must have basic html-css knowledge and these js topics 👇🏻

Knowledge of ES6 Syntax would benefit you greatly, Also you're free to use any sort of frameworks like React, Jquery, Vue, Bootstrap. I Just want the shit get built

Feel Free to use modules like Axios as well, I used vanilla js tho

How do I Build This??

Alright Krishna it's cool and stuff but how do i build this? It's not hard really let me tell you how do to it

  1. Get Your API Keys - First things first register on giphy developer portal, login and create an app with giphy api (don't use SDK) enter image description here

  2. Set Up Your Search Bar - This is also Fairly Easy, Just go ahead and setup your boilerplate or framework & Build a search bar

  3. Set Up Your Javascript - Go and just query elements that you require and assign them to a variable

  4. Fetch Data from API - Fetch your data, and at this point I would reccomend you to go a read to Giphy Docs and try to understand how their API works, Maybe play with it a little

  5. Find a way to display Gif's - When your data is fetching fine you have to a find a way to display the gif's on screen. I want you to figure how to do that there can be multiple ways to do it, No single way is the correct way. As long as it works I dont care how you do it

  6. Get Creative - This is the most important step, you will be provided the code for the above steps. But creativity is something unique to you. I've provided you with a barebone app which is kinda slow and shitty and looks dead, How can you make the app more beautiful? More efficient? More unique than others. That's something you want to work on!

Footnotes

I want everyone to try building this app, get your ide's running, get creative! Build something cool and win the contest, Dont try to just copy my code. Try to stackoveflow a bit. Come up with your own solutions. Admins and mods are always there to help! Dont Hesitate to Tag, All the best 👍

Submit your codes on github to participate in the contest

NOTE - Make a seperate branch with your name and do a pull request, DO NOT COMMIT TO MAIN BRANCH