Tundra - The Canadian Dating App

You will building a two screen Single Page Application as a Cordova Android App. The first screen will show cards with pictures, names and other details. The user will be able to swipe left or right on the card. When the user swipes left or right you need to use a CSS transition to animate the card off the screen in the correct direction. Swiping left will delete the card and discard all that data. Swiping right will save the person's information in an array that gets stored in sessionStorage. The second screen will show a list view of all the people that the user swiped right on. This list will be retrieved from sessionStorage. When the app starts, you need to make a fetch call to the Tundra API - [login to view URL] (Links to an external site.)Links to an external site. The queryString parameter can be "female", "male" or left blank. If left blank you will get a random selection of people from the API. Note that each person object will contain a first name, last name, and an avatar image. The images all sit inside the folder defined in the imgBaseURL property at the root level. The "profiles" array from the data should be looped through and a single card created for each profile. After the user swipes the profile card, and after the transition animation has finished be sure to remove the card from the DOM. Getting New Profiles We don't want the user to have to ask for more profiles to be downloaded. So, each time we remove a card from the DOM, following a swipe left or right, check the number of cards left. If the number of cards is less than 3, do another fetch to get more profiles. When those profiles are returned, create more cards. Hint: reuse your functions from the original fetch and building of cards. After Swiping Cards After the user has swiped a card to the left or the right, then you need to display a message to them confirming that the the profile has been rejected | dismissed | deleted OR saved | favourited | kept | stored. The terminology is up to you. What is important is that you show a confirmation. The message should be an overlay. The user needs to be able to read it while the card is being animated off the screen. Then the message disappears while the new card appears. Favourites Screen On the second screen when you display the saved profiles, you should show three things: The full name of the profile A small version of the image as an avatar A delete icon button When the user clicks on the delete button you will need to remove that profile from BOTH the list view AND sessionStorage. You will need to use the id from the profile to identify which person to delete from localstorage. Tiny$hell Framework Here is a framework that you can use for your interface. It provides the basic CSS to give structure to your pages plus it has three gesture events that you can add to your cards - 'swipeleft', 'swiperight', and 'tap'. [login to view URL] (Links to an external site.)Links to an external site. You are NOT required to use this framework. You can write all your own CSS and JS if you want. OR you can just use the JavaScript from the framework and write your own CSS. There are instructions in the [login to view URL] file, which are displayed on the home page for the Framework Repo. Note: that the framework is still under development. I will be updating it regularily to add new features to both the CSS and JS. As things get changed in the framework, I will update the ReadMe file. Watch for changes to the Last Update date in the readme. Cordova version Info You must use: Cordova version 8.0.0 Cordova Android version 7.0.0 Launcher Icons Your app does not need to have a Splashscreen image but it does need a custom Launcher icon.