Barton MEAN Admin Tool AngularJS Polymer Code Challenge

Welcome to Barton MEAN Admin Tool AngularJS Polymer Code Challenge

We excited to announce a cool new project where we are building an admin tool for an existing IoT device management back end.

For this first challenge, we will do 2 things:
1). Build the base application and
2). Implement the UI for the user managment.

This is a basic MEAN stack CRUD interface and should be pretty straight forward and simple.
 

Base of your submission:
- The customer is leaning towards Angular 1.5.5 but you are free to substitute any framework or 2.x as long as you present a compelling reason why your selection is a better choice than Angular 1.5.5.
- You are also free to use any of the Full Stack frameworks like mean.io, meanjs, create-react-app but please support your choice and include a setup documentation and user guide.
- The customer already has an existing service layer backed by Mongodb however your submission will need to be the Full stack include mongo and deployed to Heroku for demonstration purposes.
- The customer has developed their own web component front end built in Angular and Polymer. A demo of these components is available here on Heroku. The source for this demo (including the web components themselves) is available here.
- The UI you build must use these existing web components. The client wants to make sure this admin tool fully leverages their web component framework.
- Client will be present in the forums so please ask questions.

Submissions Requirements
- Create a Full Stack MEAN (or equivalent) with a "user management" module deployed to Heroku
- The users of this app are system administrators who manage sites, users, apps, devices, and device profiles for a system.
- For this first challenge you can hardcode the admin credential to admin@test.com / abc123 set in the config file or .env vars.
- All UI components should leverage the client web component framework whenever possible. If there is uncertainty of what component to use for a given aspect of the UI, please ask in the forums.
- UI Interface should be responsive on Desktop/Tablet and Mobile layout and perform well in both Chrome and IE
- The image below shows a mock-up of the user management module:



Follow the layout requirements below for your submission:

Navigation
- Create Router/Page Placeholder for all menu navigation.
- For this challenge you just need focus on "Users" page
- Match all required menu navigations:
-- Home
-- Sites
-- Users
-- Apps
-- Devices
-- Device Profile
- Set default route to "Users"
- For other pages, create simple "Coming Soon" message
- You must use the web components provided where possible; all element styling should be similar to the Power Customer gateway here on Heroku

Header
- Title: IoT Platform Admin App - User
- When user selects a page to visits, the "User" title changes to selected page

Left Sidebar
- You can use fixed width for this left sidebar
- Display block contains all users accounts in the system
- When user selected, fetch darta and display on the right column
- Default alphabetical name sorting is fine but you should also include a type ahead search filter on just the name and this should scale to tens of thousands of users. An ideal solution will demonstrate the with 100,000+ users as part of your unit tests.
- We would also like to add a type ahead filter above the user list on the left sidebar

Main Content
- Use fluid width for the main content
- Only the Name, Enabled status, Email, and password are editable. All other fields shall be read-only.
- In addition to passwords matching validation on create/update, you should also validate against this microsoft password policy and inform the user why the new password did not meet the policy.
- Create Error validation stylei
- Click New button need clear outs the form and allows entry of new user
- Click Save button
- For the "Create" view you will need to add a second password form field and should validated they are the same before you save.
- And you should use growl style notification for the save confirmation not a popup.

Routes and Resources
- GET api/v1/users retrieves all users pagination parameters are optional default page size of 1000 if good since the payload is small. email and name optional parameters for server side queries
- GET /api/v1/user/{:id} retrieves a single user record
- POST api/v1/user creates new user
- PUT /api/v1/user/{:id} updates a single user record

User Model

     {
       "email" : "string",
       "displayName": "string",
       "jobTitle": "string",
       "department": "string",
       "phoneNumber": "string",
       "accountEnabled": "string",
       "createdAt": "date",
       "updatedAt": "date",
       "createdBy": "id",
     }

Final Submission Guidelines

- Deploy your solution on Heroku so we can see it in action and include the link to your submission.
- Provide documentation, (usage and deployment guide) for your solution
- Provide a quick < 5 minute video of your solution in action. (You may annotate if your don't want to narrate it)
- A code walk through video is desired but not required.