DotCMS - Frontend Coding Exercise

readme.md

• Your backend
• Requirements:
  • We are going to evaluate:
• Our API
  • Get Content
    • Categories
  • Save content
• Mocks
• How it works?
• Nice to have

DotCMS - Frontend Coding Exercise

This is a pretty straight forward webapp - the idea is to build a “Product Catalog” it will do two things:

1. Get products
2. Create a product

Your backend

You will be using our DotCMS API to get content, no extra backend work is need it.

There is a already content created here for demo purpose.

Here is the access information for a dotCMS demo server that resets/rebuilds itself at 12:00AM and 12:00PM US eastern time:

http://demo.dotcms.com (front end)

http://demo.dotcms.com/admin (backend)

• U: admin@dotcms.com
• P: admin

Requirements:

1. Use DotCMS Content API: documentation
2. Use the Image Resizing and Processing API to print out the images. Also see the Standard REST API documentation.
3. JavaScript Framework: React or Angular.
4. CSS: No Bootstrap, Foundation or CSS framework at all. You can use preprocessors and/or css-in-js
5. Please create a Github repo and add fmontes as collaborator.

We are going to evaluate:

• Code quality: clean, scalable, semantic, etc...
• Design: UX and UI
• Performance
• Responsive
• Completion (is ok not to complete 100%), we will also evaluate how to attack the problem, how you prioritize tasks and how you use your time.

Our API

Get Content

1. The DotCMS content API will allow you to GET the product listing, you will get a collection of products. Here is an example of the product object.

2. We recommend to read carefully the DotCMS Content API documentation. In short, you can pass parameters to the URL to get the content you need (as pretty much any other rest API)

3. Here is an example of the url to GET the first 10 products: link

Categories

In the Product object you'll have a property name: productLine in that you will have an object that represent a full category, more than one product can contain the same "category" you need to take that into consideration.

Save content

1. To save content in DotCMS the doc is here
2. You need to authenticate to save content, here is the documentation
3. You need to submit the all the required fields:

  - title: string
  - productLine: string // the identifier of the productLink
  - productNumber: string
  - retailPrice: string
  - image: binary

3. productLine is a relationship you need to create a <select> component and the options will be product lines items, the link to get those is here (only the first 10 for this demo) and more information on how to save relationship here.
4. image is a binary field, the info to save those here

Mocks

ARE NOT FINAL DESIGN.

---

---

How it works?

1. Sidebar with categories, on click show products for that category
2. When user clicks in a products show a popup dialog with full product information
3. Create a product, form with the required fields to create a product

Nice to have

1. Animated transitions.
2. Pagination: you can pass to the url API: /limit/X/offset/X

product.json

{
    "hostName": "System Host",
    "modDate": "2019-11-07 00:59:20.029",
    "image3ContentAsset": "5b4c012a-df7c-4e1d-ab8b-5ee949f1ec0d\/image3",
    "image2ContentAsset": "5b4c012a-df7c-4e1d-ab8b-5ee949f1ec0d\/image2",
    "description": "<p>For your trophy quest, only the legendary strength and performance of a Penn&reg; International&reg; VIS\/Offshore Angler&trade; Ocean Master&reg; Stand-Up Combo will do. The pairing of the world's premier 2-speed conventional reel and an acclaimed rod with virtually unlimited lifting power gives you the advantage against the biggest game in the sea.<\/p>\n<p>The 6th-generation Penn International VIS Two-Speed Lever Drag Reel gives you a shot at landing the fish of a lifetime. Its Quick-Shift II&trade; system lets you choose between 2 gear ratios &ndash; fast retrieve or low power &ndash; with the push of a button. Features a machined and anodized aluminum Full Metal Body and sideplates, braid-ready spool with line capacity rings, stainless steel gears, and 5 shielded stainless steel ball bearings. Double-dog ratchet anti-reverse; Versa-Strike Adjustable Strike Stop system; hesitation-free Dura-Drag&reg;; Line Shedding Lug design.<\/p>\n<p>Our lightweight Offshore Angler Ocean Master Stand-Up Rod is built on a rugged graphite composite blank with Carbon Coil Technology for optimum power and comfort, and features only the best components: exclusive high-leverage triangular EVA foregrip with X-wrap, Fuji&reg; aluminum oxide guides with AFTCO&reg; roller stripper and tip, and a Stuart&reg; machined-aluminum reel seat. Slick butt rear grip; machined-aluminum gimbal and protective cap.<\/p>",
    "title": "Penn International VIS\/Offshore Angler Ocean Master Stand-Up Rod and Reel",
    "baseType": "CONTENT",
    "inode": "a8175bc2-877f-418b-9a65-e345d4f35170",
    "archived": false,
    "host": "SYSTEM_HOST",
    "working": true,
    "locked": false,
    "image2Version": "\/dA\/a8175bc2-877f-418b-9a65-e345d4f35170\/image2\/combo-3.jpg",
    "stInode": "a1661fbc-9e84-4c00-bd62-76d633170da3",
    "contentType": "Product",
    "live": true,
    "image3Version": "\/dA\/a8175bc2-877f-418b-9a65-e345d4f35170\/image3\/combo-2.jpg",
    "owner": "036fd43a-6d98-46e0-b22e-bae02cb86f0c",
    "imageVersion": "\/dA\/a8175bc2-877f-418b-9a65-e345d4f35170\/image\/combo-1.jpg",
    "identifier": "5b4c012a-df7c-4e1d-ab8b-5ee949f1ec0d",
    "image": "\/dA\/5b4c012a-df7c-4e1d-ab8b-5ee949f1ec0d\/image\/combo-1.jpg",
    "image3": "\/dA\/5b4c012a-df7c-4e1d-ab8b-5ee949f1ec0d\/image3\/combo-2.jpg",
    "imageContentAsset": "5b4c012a-df7c-4e1d-ab8b-5ee949f1ec0d\/image",
    "urlTitle": "penn-international-vis-offshore-angler-ocean-master-stand-up-rod-and-reel",
    "languageId": 1,
    "URL_MAP_FOR_CONTENT": "\/store\/products\/penn-international-vis-offshore-angler-ocean-master-stand-up-rod-and-reel",
    "productNumber": "INT50VISW\/OM650",
    "image2": "\/dA\/5b4c012a-df7c-4e1d-ab8b-5ee949f1ec0d\/image2\/combo-3.jpg",
    "url": "\/content.16558e4b-c687-4e05-aa77-f7269c1ff120",
    "tags": "fishing,sport fishing",
    "titleImage": "image",
    "modUserName": "Jason Smith",
    "urlMap": "\/store\/products\/penn-international-vis-offshore-angler-ocean-master-stand-up-rod-and-reel",
    "folder": "SYSTEM_FOLDER",
    "hasTitleImage": true,
    "sortOrder": 0,
    "modUser": "036fd43a-6d98-46e0-b22e-bae02cb86f0c",
    "retailPrice": "849.99",
    "specifications1": {
        "Max Drag": "50 lbs",
        "Retrieve": "Right",
        "Length": "6'",
        "Line Capacity": "50\/880",
        "Gear Ratio": "3.5:1\/1.3:1",
        "Reel Size": "50",
        "Ball Bearings": "5"
    },
    "productLine": [
        {
            "template": "52f0067c-83d9-48b6-8a74-56c6404788c7",
            "hostName": "demo.dotcms.com",
            "modDate": "2019-11-07 01:00:12.111",
            "cachettl": "15",
            "title": "Fishing",
            "seoTitle": "Fishing Gear",
            "showOnMenu": "true",
            "baseType": "HTMLPAGE",
            "inode": "c0853cc0-fbef-45d6-b2c0-74c1f79ca05c",
            "archived": false,
            "path": "\/store\/water\/fishing",
            "host": "48190c8c-42c4-46af-8d1a-0cd5db894797",
            "working": true,
            "locked": false,
            "stInode": "f52275b5-7595-4f89-8375-8bb1266437a5",
            "contentType": "ProductLineLandingPage",
            "friendlyName": "Fishing",
            "live": true,
            "owner": "036fd43a-6d98-46e0-b22e-bae02cb86f0c",
            "imageVersion": "\/dA\/c0853cc0-fbef-45d6-b2c0-74c1f79ca05c\/image\/fishing.jpg",
            "identifier": "59223b5f-e052-4d59-aaa2-7c6bb6a06a77",
            "image": "\/dA\/59223b5f-e052-4d59-aaa2-7c6bb6a06a77\/image\/fishing.jpg",
            "imageContentAsset": "59223b5f-e052-4d59-aaa2-7c6bb6a06a77\/image",
            "languageId": 1,
            "url": "\/store\/water\/fishing",
            "tags": "fishing,sport fishing",
            "titleImage": "image",
            "modUserName": "Jason Smith",
            "folder": "f740c48e-c63b-4b83-bb20-036551c3aa26",
            "hasTitleImage": true,
            "sortOrder": 0,
            "modUser": "036fd43a-6d98-46e0-b22e-bae02cb86f0c",
            "childProductLines": []
        }
    ]
}