Giter Club home page Giter Club logo

frontend-exercise's Introduction

Exercise

A frontend-backend exercise.

The purpose of the exercise is demonstrate usage of basic Python skills and intermediate skills of AngularJS.

For the backend use Flask to implement a basic JSON Rest API (read only) with a bit of functionality. For the frontend showcase use of AngularJS consuming the implemented JSON API in the backend and with some basic functionality to display and interact with the data.

The Problem

Create a simple racing standings board and display information about each of the teams the pilots belong to.

Backend

Create an API to list the current situation of the race, every time the API is called, choose randomly a pilot and increment its points by 1. Implement another API to provide the team by team ID. (Rest API call must return only 1 object)

Data for the drivers and teams is provided in the data/ folder.

Frontend

Using AngularJS and angular-router create 2 views, one containing the list of pilots, their country and team and the current standings on the race. Update the results every second.

In the list of standings every pilot must be selectable and redirect to another view using angular-router containing information about the team the pilot belongs to. Optionally display the position in the race of each of the pilots for the team. Make some way to return to the standings list.

Other requirements/suggestions:

  • Implement at least a filter, a service and a directive using AngularJS.
  • Write couple tests with any framework of choice.
  • A little of UI candy is appreciated.

Tips to get started

Install python in your system.

Install virtualenv for python https://pypi.python.org/pypi/virtualenv. This step is optional but recommended, since it won't make available globally Flask to your system, but only for this project. If not using virtualenv you can just run:

easy_install Flask

or

pip install Flask

If using virtualenv, create a virtual environment in the cloned project folder. Call it env:

virtualenv env

Activate the virtual environment you will have to do this every time you get back to the project:

source env/bin/activate

Install the dependencies for the project:

pip install -r requirements.txt

to run the app just do

python app.py

the Flask server (in debug mode) will be running in port 5000. It loads in its root the base HTML file to build on.

Install bower dependencies

bower install

All yours, have fun!

PS: I have no idea of Formula1 or racing, just felt easy to propose a problem and find real data for the examples.

frontend-exercise's People

Contributors

harrastia avatar

Watchers

 avatar  avatar  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.