MyPitit / itv-a-la-carte

Simple application that allows the user to discover ITV content

Home Page:http://mireiasangalo.com/itv-a-la-carte/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

itv à la carte

This app is developed using pure vanilla JavaScript, by Mireia Sangalo (@MyPitit).

Old project presented on 24 of May 2016, click here to see the full project.

See itv à la carte here: http://mireiasangalo.com/itv-a-la-carte/

Architecture

1 - Home Page, setting up an HTTP request headers.

All the channels will be displayed on the Home Page: itv, itv2, itvBe, itv3, itv4 and CITV.

API:

Channels
http://fetd.prod.cps.awseuwest1.itvcloud.zone/platform/itvonline/samsung/channels?broadcaster=ITV

The channels will be displayed as a list.

Home Page screenshot

cursor_and_itv_a_la_carte

2 - Productions Page: When the user click on one channel in particular, another HTTP request headers will be send in order to get the all the corresponding programmes from that channel in particular.

API for each channel:

itv
http://fetd.prod.cps.awseuwest1.itvcloud.zone/platform/itvonline/samsung/productions?grouping=latestPerProgramme&channelId=itv&broadcaster=itv

itv2
http://fetd.prod.cps.awseuwest1.itvcloud.zone/platform/itvonline/samsung/productions?grouping=latestPerProgramme&channelId=itv2&broadcaster=itv

itvBe
http://fetd.prod.cps.awseuwest1.itvcloud.zone/platform/itvonline/samsung/productions?grouping=latestPerProgramme&channelId=itvbe&broadcaster=itv

itv3
http://fetd.prod.cps.awseuwest1.itvcloud.zone/platform/itvonline/samsung/productions?grouping=latestPerProgramme&channelId=itv3&broadcaster=itv

itv4
http://fetd.prod.cps.awseuwest1.itvcloud.zone/platform/itvonline/samsung/productions?grouping=latestPerProgramme&channelId=itv4&broadcaster=itv

CITV
http://fetd.prod.cps.awseuwest1.itvcloud.zone/platform/itvonline/samsung/productions?grouping=latestPerProgramme&channelId=citv&broadcaster=itv

Productions Page screenshot

cursor_and_productions

3 - Programme Page: The user will be able to click any programme and get more information about that programme in particular.

To being able to access to the programmes, an HTTP request headers will be send in order to get all the corresponding data.

Data displayed on Programme Page:

"programmeTitle"
"categories"
"duration"
"broadcastDateTime"
"catalogueHierarchyDescription"
"synopsis"
"image"

Programme Page screenshot

cursor_and_programme

Flow diagram

flow

Style guides

img1 img2

About

Simple application that allows the user to discover ITV content

http://mireiasangalo.com/itv-a-la-carte/


Languages

Language:JavaScript 75.5%Language:HTML 13.5%Language:CSS 11.1%