├── .gitignore ├── Curriculum Vitae.md ├── Donate.md ├── Movie Library.md ├── NewsFeed.md ├── README.md ├── ShoppingCart.md ├── donation.png └── shopping.PNG /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### JetBrains template 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 4 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 5 | 6 | # User-specific stuff: 7 | .idea/workspace.xml 8 | .idea/tasks.xml 9 | .idea/dictionaries 10 | .idea/vcs.xml 11 | .idea/jsLibraryMappings.xml 12 | 13 | # Sensitive or high-churn files: 14 | .idea/dataSources.ids 15 | .idea/dataSources.xml 16 | .idea/dataSources.local.xml 17 | .idea/sqlDataSources.xml 18 | .idea/dynamic.xml 19 | .idea/uiDesigner.xml 20 | 21 | # Gradle: 22 | .idea/gradle.xml 23 | .idea/libraries 24 | 25 | # Mongo Explorer plugin: 26 | .idea/mongoSettings.xml 27 | 28 | ## File-based project format: 29 | *.iws 30 | 31 | ## Plugin-specific files: 32 | 33 | # IntelliJ 34 | /out/ 35 | 36 | # mpeltonen/sbt-idea plugin 37 | .idea_modules/ 38 | 39 | # JIRA plugin 40 | atlassian-ide-plugin.xml 41 | 42 | # Crashlytics plugin (for Android Studio and IntelliJ) 43 | com_crashlytics_export_strings.xml 44 | crashlytics.properties 45 | crashlytics-build.properties 46 | fabric.properties 47 | 48 | .gitignore 49 | .idea/ 50 | -------------------------------------------------------------------------------- /Curriculum Vitae.md: -------------------------------------------------------------------------------- 1 | ## Curriculum Vitae 2 | 3 | Develop an interactive online resume for yourself and submit the link to us. 4 | 5 | Please display your creativity by making it enchanting and informative. -------------------------------------------------------------------------------- /Donate.md: -------------------------------------------------------------------------------- 1 | ## Donate 2 | 3 | Please develop a donation page similar to the one shown below: 4 | 5 | ![Donate](donation.png "Donation") 6 | 7 | It should have following functionality: 8 | * On clicking "Give Now" Button, the donation amount slider should move. Keep the total amount to $1000. 9 | * On clicking "Tell your friends", it should share "Yay, I donated!" on Facebook and Twitter. 10 | * On clicking "Save for later", it should show a dialog with message "Saved!" 11 | -------------------------------------------------------------------------------- /Movie Library.md: -------------------------------------------------------------------------------- 1 | # Loktra Front-end Challenge 2 | 3 | ## Our goal 4 | 5 | We want to see how you make decisions, solve problems, and handle feedback. We'll be checking in on you throughout the interview asking you what you're doing and why you're doing it and providing feedback where we feel it might help you. 6 | 7 | ## Your task 8 | 9 | The challenge before you is to create a simple movie library management tool using the [OMDb API](http://www.omdbapi.com/) to access movie data. The target MVP has two views: 10 | 11 | * Search view 12 | * The user can search for a movie by name and see a list of results 13 | * The user can add a movie to their personal library 14 | * Library view 15 | * The user can see a list of the movies added to their library 16 | 17 | Feel free to use something simple like `localStorage` to store which movies the user has in their library. 18 | 19 | ## Stretch goals 20 | 21 | If you get the basic app done with time to spare, then tackle whichever of these secondary objectives tickle your fancy. Or make up one of your own if you have a cool idea you want to try! 22 | 23 | * Create a simple back-end for storing user's library data 24 | * Add the ability to add reviews and/or star ratings to movies 25 | * Add multi-user capability by letting the user sign-in with an email (don't bother with passwords for the sake of time) 26 | * Use responsive design to make the site work well on mobile 27 | * Add a Graphs view that presents interesting information about the user's library, e.g. most common actors in your movies, number of your movies by decade, etc. 28 | 29 | ## General bonus points 30 | 31 | As you tackle this topic there are a few general things that would be nice to see (though by no means necessary): 32 | 33 | * Commit your work frequently to a repository 34 | * Design a simple UI with good usability 35 | 36 | 37 | We'll try to check in on your periodically, but please feel free to ask us any clarifying questions that may arise or just ask us for feedback on the direction you're going. 38 | -------------------------------------------------------------------------------- /NewsFeed.md: -------------------------------------------------------------------------------- 1 | # Loktra Front-end Challenge 2 | 3 | ## Our goal 4 | 5 | We want to see how smart, dedicated and passionate you are about programming.We'll be checking in on you throughout the interview asking you what you're doing and why you're doing it and providing feedback where we feel it might help you. 6 | 7 | ## Your task 8 | 9 | The challenge before you is to create a simple news website using the [News API](http://www.newsapi.org/). The main focus should be on good UI. The target MVP should have: 10 | 11 | * A big top view with changing top stories from various outlets 12 | * A few lists of news stories from the above outlets 13 | * The individual list items should flip on hover showing description of the news and on click should take us to the news 14 | * Use responsive design to make the site work well on mobile 15 | 16 | ## Stretch goals 17 | 18 | If you get the basic app done with time to spare, then tackle whichever of these secondary objectives tickle your fancy. Or make up one of your own if you have a cool idea you want to try! 19 | 20 | 21 | * Create different filters based on the parameters provided in the apis 22 | * Add the ability for the user to pin stories they might want to see later 23 | * Make the locally pinned stories appear in a side drawer 24 | * Allow the news articles to be dragged to the side drawer to pin them 25 | * Add some cool animations to the dragged item while being dragged 26 | * Show us your css prowess, we really want to see that. Go Crazy! 27 | 28 | 29 | ## General bonus points 30 | 31 | As you tackle this topic there are a few general things that would be nice to see (though by no means necessary): 32 | 33 | * Commit your work frequently to a repository 34 | * Design a simple UI with good usability 35 | 36 | 37 | We'll try to check in on your periodically, but please feel free to ask us any clarifying questions that may arise or just ask us for feedback on the direction you're going. 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Front End Engineer Task 2 | You must complete one of the following task: 3 | 4 | 1. Complete [donation](Donate.md) task. 5 | 2. Implement a [shopping cart](ShoppingCart.md). 6 | 7 | Commit and push your code to your new repository. Use [Github Pages](https://help.github.com/articles/what-is-github-pages/) or any other hosting service to run your solution. 8 | 9 | To apply, please email careers@loktra.com with your solution. Include link of your code on Github. Also please explain why you would be a good fit for this job. 10 | 11 | 12 | ### Things to keep in mind: 13 | 14 | * Write production quality code. 15 | * The code should be cross browser compatible and responsive across different devices. 16 | * Your app should be consistent across all tabs when user is making changes in any one of them. 17 | * Ensure code follows a consistent convention. -------------------------------------------------------------------------------- /ShoppingCart.md: -------------------------------------------------------------------------------- 1 | ## 1. Shopping Cart 2 | 3 | Your task is to implement a basic shopping cart for a website, following these basic rules: 4 | 5 | ![Shopping](shopping.PNG "Shopping") 6 | 7 | * Store the cart on localStorage 8 | * The cart should only know about item IDs and their quantity 9 | * The cart should notify when it has been updated 10 | * UI could be like flipkart cart, the functionality you should implement is add/remove items, increment/decrement item count and update localStorage on any change 11 | * The UI should be clean 12 | * Focus on the cart, other parts are just helpers 13 | * Dummy data should be used for the cart items 14 | 15 | 77 | -------------------------------------------------------------------------------- /donation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Loktra/Front-End-Engineer/979f0c04cbe21d6f978289deed1068ed3ff8c518/donation.png -------------------------------------------------------------------------------- /shopping.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Loktra/Front-End-Engineer/979f0c04cbe21d6f978289deed1068ed3ff8c518/shopping.PNG --------------------------------------------------------------------------------