├── README.md ├── data.json └── img ├── all-promotions.png └── new-customers-promotions.png /README.md: -------------------------------------------------------------------------------- 1 | # Addison Global Web Technical Assesement 2 | 3 | ## Introduction 4 | 5 | Welcome to the Addison Global Web Tech Test. 6 | 7 | The primary goal of this exercise is to assess how you reason about your ability to write well defined HTML, CSS and JavaScript using the latest patterns and technologies in a mobile first approach. There's no hard rules or tricky questions. 8 | 9 | **We hope you have fun.** 10 | 11 | ## Glossary 12 | 13 | * Promotion - A sports or casino offering with a purpose of encouraging potential customers to sign up. 14 | 15 | ## Brief 16 | 17 | For this exercise you are required to build a fast, responsive, mobile first promotions page. This promotions page consists of two views or filters which exist on a single page: 18 | * New Customers - a list of promotions only applicable to new customers 19 | * All Promotions - a list of all promotions 20 | 21 | When the page loads, you should fetch the data to render the promotions. The promotions object contains a flag `onlyNewCustomers` which indicates whether a promotion is only applicable to new customers or not. 22 | 23 | Promotions must be sorted according to the `sequence` property. 24 | 25 | ## Data 26 | 27 | We've provided an endpoint that can be accessed using the following URL: 28 | http://www.mocky.io/v2/5bc3b9cc30000012007586b7 29 | 30 | You can also find a sample of the data [data.json](data.json) 31 | 32 | ### Types 33 | 34 | ```js 35 | /** The response type of the API call */ 36 | type ResponseType = PromotionType[]; 37 | 38 | /** Promotion Entity */ 39 | type PromotionType = { 40 | id: string, 41 | name: string, 42 | description: string, 43 | heroImageUrl: string, 44 | onlyNewCustomers: bool, 45 | termsAndConditionsButtonText: string, 46 | joinNowButtonText: string, 47 | sequence: number 48 | }; 49 | ``` 50 | 51 | ## Technology 52 | 53 | Since the purpose of this exercise is to assess your HTML, CSS and JavaScript abilities, we discourage the use of CSS frameworks such as Bootstrap or Material UI but encourage the use of React or any other frontend framework. 54 | 55 | ## Screens 56 | 57 | The provided screens are a wireframe, not a final design for the application. You are expected to implement the user interface by yourself. 58 | 59 | ### All Promotions 60 | 61 | ![All Promotions](img/all-promotions.png "All Promotions") 62 | 63 | ### New Customers Promotions 64 | 65 | ![New Customers Promotions](img/new-customers-promotions.png "New Customers Promotions") 66 | 67 | ## The Deliverable 68 | 69 | * A bundled/archived repository showing your commit history or a link to an accessible private repository with your work in (Github can host private repositories at a cost; there is no charge for doing so with Bitbucket). Git example for sending us a standalone bundle: 70 | 71 | git bundle create .bundle --all --branches 72 | 73 | * A Readme.md file explaining the decisions you've made solving this task including technology and library choices. 74 | * Any instructions required to run your solution and tests in a Linux environment. 75 | -------------------------------------------------------------------------------- /data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "PROMO_1", 4 | "name": "Promotion One", 5 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 6 | "heroImageUrl": "https://via.placeholder.com/600x300", 7 | "onlyNewCustomers": false, 8 | "termsAndConditionsButtonText": "Terms & Conditions", 9 | "joinNowButtonText": "Join Now", 10 | "sequence": 10 11 | }, 12 | { 13 | "id": "PROMO_2", 14 | "name": "Promotion Two", 15 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 16 | "heroImageUrl": "https://via.placeholder.com/600x300", 17 | "onlyNewCustomers": true, 18 | "termsAndConditionsButtonText": "Terms & Conditions", 19 | "joinNowButtonText": "Join Now", 20 | "sequence": 9 21 | }, 22 | { 23 | "id": "PROMO_3", 24 | "name": "Promotion Three", 25 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 26 | "heroImageUrl": "https://via.placeholder.com/600x300", 27 | "onlyNewCustomers": true, 28 | "termsAndConditionsButtonText": "Terms & Conditions", 29 | "joinNowButtonText": "Join Now", 30 | "sequence": 8 31 | }, 32 | { 33 | "id": "PROMO_4", 34 | "name": "Promotion Four", 35 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 36 | "heroImageUrl": "https://via.placeholder.com/600x300", 37 | "onlyNewCustomers": true, 38 | "termsAndConditionsButtonText": "Terms & Conditions", 39 | "joinNowButtonText": "Join Now", 40 | "sequence": 7 41 | }, 42 | { 43 | "id": "PROMO_5", 44 | "name": "Promotion Five", 45 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 46 | "heroImageUrl": "https://via.placeholder.com/600x300", 47 | "onlyNewCustomers": false, 48 | "termsAndConditionsButtonText": "Terms & Conditions", 49 | "joinNowButtonText": "Join Now", 50 | "sequence": 6 51 | }, 52 | { 53 | "id": "PROMO_6", 54 | "name": "Promotion Six", 55 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 56 | "heroImageUrl": "https://via.placeholder.com/600x300", 57 | "onlyNewCustomers": false, 58 | "termsAndConditionsButtonText": "Terms & Conditions", 59 | "joinNowButtonText": "Join Now", 60 | "sequence": 5 61 | }, 62 | { 63 | "id": "PROMO_7", 64 | "name": "Promotion Seven", 65 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 66 | "heroImageUrl": "https://via.placeholder.com/600x300", 67 | "onlyNewCustomers": true, 68 | "termsAndConditionsButtonText": "Terms & Conditions", 69 | "joinNowButtonText": "Join Now", 70 | "sequence": 4 71 | }, 72 | { 73 | "id": "PROMO_8", 74 | "name": "Promotion Eight", 75 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 76 | "heroImageUrl": "https://via.placeholder.com/600x300", 77 | "onlyNewCustomers": true, 78 | "termsAndConditionsButtonText": "Terms & Conditions", 79 | "joinNowButtonText": "Join Now", 80 | "sequence": 3 81 | }, 82 | { 83 | "id": "PROMO_9", 84 | "name": "Promotion Nine", 85 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 86 | "heroImageUrl": "https://via.placeholder.com/600x300", 87 | "onlyNewCustomers": false, 88 | "termsAndConditionsButtonText": "Terms & Conditions", 89 | "joinNowButtonText": "Join Now", 90 | "sequence": 2 91 | }, 92 | { 93 | "id": "PROMO_10", 94 | "name": "Promotion Ten", 95 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 96 | "heroImageUrl": "https://via.placeholder.com/600x300", 97 | "onlyNewCustomers": true, 98 | "termsAndConditionsButtonText": "Terms & Conditions", 99 | "joinNowButtonText": "Join Now", 100 | "sequence": 1 101 | } 102 | ] -------------------------------------------------------------------------------- /img/all-promotions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/addisonglobal/web-technical-test/d55e8159b80efbc434f74dc068fc322aafe97cd8/img/all-promotions.png -------------------------------------------------------------------------------- /img/new-customers-promotions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/addisonglobal/web-technical-test/d55e8159b80efbc434f74dc068fc322aafe97cd8/img/new-customers-promotions.png --------------------------------------------------------------------------------