Challenge Overview
Challenge Introduction:
Welcome to the Retailer Loyalty Desktop Web App Integration Challenge. Our client is a leading agriculture company that supplies it’s products to Retailers. Visibility into retailer inventory and their sales of our clients products is very limited and the process is manual. Retailers receive our client's products but do not report back on actual sales nor inventory. There is also no formal loyalty process that includes retailers.
The Agriculture company supplies products like Fertilizer, Herbicide, Pesticide, Fungicide, Plant Tonic.
In previous Retailer Loyalty contests we’ve built the Ionic Mobile app, Web App UI Prototype, and NodeJS backend API.
In this contest we would like you to integrate the NodeJS backend with the Web App UI Prototype
Challenge Description:
Integrate the NodeJS backend with the Web App UI prototype
- The Web App UI Prototype is to be used by an Admin at the client for overseeing activity of the Retailers and Agents.
- We’ve included the Gitlab repository for NodeJS backend (ask for access in the forums). Please follow the instructions for setting up the backend on your local dev machine. You’ll be required to integrate the Web App UI Prototype with the backend for this challenge (please ask for access in the forums).
- The Web App UI Prototype has been built in HTML, CSS and JQuery. You can continue to use JQuery for integrating the web app with the backend.
- You should integrate the code from the Web UI proto repo in to the NodeJS backend repo - we want to keep the code for web UI proto in the NodeJS backend repo.
- We are using Auth0 Database type access for login. The backend has been built with Auth0. You’ll notice there is an ‘admin’ role which has permission to all endpoints.
- Here are the suggested end-points to use on the screens:
|
End-point |
HTTP Method |
Web UI proto screens that use this API |
|
/retailer/{id} |
GET |
|
|
/retailer/{id}/sales |
GET |
|
|
/admin/products/sales |
GET |
|
|
/admin/retailers/sales |
GET |
|
|
/admin/inquiries |
GET |
|
|
/admin/agents |
GET |
|
|
/admin/retailers |
GET |
Specific HTML/CSS/JavaScript Requirements
- You must use HTML5 and CSS3
- The existing prototype uses Sass and you should continue to use Sass
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Must support latest versions of Chrome and IE for Windows