You are to treat this challenge as if you are working as a full-stack web developer at a fictitious startup. A news site has revealed that a big tech company is copying some of GifCities core features. The CTO is under pressure to showcase a minimum viable product to their board of directors by the end of the week.
You are tasked to integrate a Web API that will deliver GIF search results and display these search results using Flask. Fortunately, most of the work had already been done and you only need to add some finishing touches.
To ease the process, the repo provides some files to help you get started. You will need to choose one of the approaches described below:
The simplest way is to use a tool called Vagrant:
Alternatively you can use another tool called Docker:
If you don't use Vagrant/Docker, you need to perform many, many more steps. These steps depend on your operating system:
Please note: We use Python 3.6.5. and you can install all necessary dependencies from
requirements.txt
using pip.
Now that you have your server running, you can familiarize yourself with the project.
You're going to use:
- Flask for our web framework
- Requests to grab data from Tenor's GIF API
At this point, you should only pay attention to the following:
-
You only need to edit the following three files:
views.py
,results.html
andmain.css
.
├── ...
├── project
│ ├── main
│ |── views.py # Main file for Coding Challenge
│ ├── templates
│ ├── main
│ ├── results.html # HTML Skeleton for Search results page
├── index.html # HTML Skeleton for Searchform page
│ ├── static
├── main.css # Global Style Sheet
└── ...
- Learn the basics of Flask and Requests. Both are easy to learn and these resources listed below are good resources and references for getting started:
- Flask Megatutorial Chaper 1-3 only
- Routing with Flask
- Requests Quickstart
- Before moving on, make sure to create a developer account and request an API key.
In
views.py
replace "Your API Key" with your actual API key in the code.
In views.py
, do the following:
- Import
requests
module in views.py - Within
query_api
:
- Make an API call to execute a GIF Search that matches the given search parameter
- If the requests succeeds, parse the JSON response to acquire the URL of each GIF
-
Render search results in
results.html
(Hint: Jinja Templates) -
Search Results need to be shown in a grid-based layout (Hint: Use Bootstrap)
These resources listed below might help for your challenge:
- Python API Tutorial
- What is REST?
- Tenor's GIF Search API Documentation
- How to use Web APIs in Python 3
- Templating with Jinja
- Commit early and often. We want to be able to check your progress.
- Your Python code is neatly formatted and follows the PEP 8 Styleguide
- Once you're satified with your solution, create a Pull Request in your repo.
- Your solution should work like this:
Too hard? Got stuck? We encourage to reach out to Tutors and the CodeDoor Slack Community.
Too easy? Go the extra mile and add additional search functionalities or improve the styling.
Good Luck and Happy Coding!