Git Product home page Git Product logo

crowdcomms-frontend-coding-challenge's Introduction

Frontend Coding Challenge

Comments

  1. Presentable - Added some CSS
  2. Cached to prevent unnecessary api calls - Was seeking to implement RxJS / use memory as store of last fetched data
  3. Must be tested - Basic; some tests failing
  4. Optimised for performance - Has Data service; Was seeking to implement RxJS
  5. Structured as though it is expected to grow into a large enterprise app in the future - Believe apprpriate file structure
  6. Display a good overall knowledge of the main Angular concepts and best practices - Believe meets this

Introduction

You have been tasked with creating a simple yet powerful recipe app using Angular for a local chef. The app will be created using the following free and open api:

The chef is rather frugal and does not want the app to fetch data unnecessarily from the server so it must be cached appropriately. The budget is so small for this project that we have to complete it within 2 hours.

Instructions

The app will fetch a list of recipes from a server and will allow the chef to star their favorite recipes and the data should persist. It will consist of just two screens.

The first screen will have a list of 20 ingredients from which the chef can pick from and a search box to filter the list.

Once the chef has selected his ingredients it should navigate to another page containing a list of recipes. Each recipe will contain the title of the recipe, other ingredients required and a link to the recipe page.

When navigating from the ingredients page to the recipe list page the data should be called from the cache and not fetch it from the api each time if the same ingredients are chosen.

Requirements

The app must be:

  1. Presentable
  2. Cached to prevent unnecessary api calls
  3. Must be tested
  4. Optimised for performance
  5. Structured as though it is expected to grow into a large enterprise app in the future
  6. Display a good overall knowledge of the main Angular concepts and best practices

Create a private repository on Github and add me(dandouglas) as a collaborator once you have finished (or when the time limit expires).

Commit regularly and follow the Angular guidelines for commit messages.

Example commit message: "fix(recipe list): cache not updating"

Good luck!

Time Limit

2 hours

**Please note: If you get cors issues on the api then it does accept jsonp requests. You can also use any available service to overcome the cors issue. If that is a problem then please use any other suitable api to fulfill the requirements of the challenge.

crowdcomms-frontend-coding-challenge's People

Contributors

mathematicuslucian avatar dandouglas avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.