naumannazir/blog

React Component Exercise

Your task is to create a maintainable React application using modern JavaScript and framework(s). The application is a blog pulling content from the API listed below based on some simple designs. All the necessary design files are inside this directory as well as any information you need to complete the exercise. The designs are given for large screen, you shouldn't need much adjustment for small screen, but be sure to update responsive patterns as you see fit.

Please use your best judgement for any decisions that need to be made about the implementation including potential starter files, modules, plugins, and libraries you feel are necessary to create the interface. The goal of this exercise is to help us gauge your knowledge with HTML, CSS. React, and JavaScript. We are very interested to see how you scaffold your application e.g. build processes.

Please also track your time, our goal is to make these exercises thorough, but not overwhelming so getting your feedback very much helps the process. If the exercise is taking too long, feel free to stop and just show us what you have. If this project is a challenge or a struggle, just do your best.

Requirements

• JavaScript application matching design files and specifications. No server-side rendering is required.
• Modern HTML, CSS, and JavaScript best practices.
• Built using React.
• No page reloads necessary.

Data API

The API is the default WordPress REST API provided with WordPress. The relevant endpoints are listed below:

GET https://exercise.10uplabs.com/wp-json/wp/v2/posts - Get blog posts GET https://exercise.10uplabs.com/wp-json/wp/v2/pages - Get pages

Design Specs

Here you will find details and assets around the application design.

Fonts

Raleway: https://fonts.google.com/specimen/Raleway

Sizes

• Top-level Heading: 36px
• Second-level Heading: 24px
• Accordion Triggers: 18px
• Forms: 16px
• Content: 14px

Colors

• Orange: #CC4B00 (Links)
• Blue: #004EAE (Primary Branding Color)
• Light Gray: #CCCCCC (dividers)
• Gray: #767676 (Meta info and placeholder text)
• Dark Gray: #333333 (Content)
• White: #FFFFFF (Background colors)

Spacing

• Gutters are in increments of 5px although most are set to 20px

Design Files

• /Designs/Index.png (The homepage with post links, accordion should be closed by default - output as many post return, don't worry about limiting it to the design output)
• /Designs/Page.png (A static page)
• /Designs/Post.png (A Dynamic page)
• /Designs/Page - State.png (The results of submitting the form)