Coding Challenge

You should see this challenge as an opportunity to create an app following modern development best practices (givenyour platform of choice), but also feel free to use your own app architecture preferences (coding standards, code organization, third-party libraries, etc). It’s perfectly fine to use vanilla or any framework or librarie.

Scope

The test is divided into two challenges. In the first you will build a simple blog API, and in the second implement an interface that consumes the data of your API.

Design Reference

Design is available in Figma at https://www.figma.com/file/ImqUersZbn3WGyBdiEjlwKyQ/Coderockr-Front-end-Test. If you haven't already, sign up for a free Figma account, so you can work with the design.

Prototype: https://www.figma.com/proto/ImqUersZbn3WGyBdiEjlwKyQ/Coderockr-Front-end-Test

NOTE 1: In this challenge we will not evaluate the implementation of design styles. USE THE DESIGN MERELY AS A VISUAL AND STRUCTURAL REFERENCE. In fact, it’s perfectly fine to use some library of components to assist you in the development of the interface. Or if you prefer, feel free to implement your own components / styles.

NOTE 2: For the images, you can download them from the unsplash.com API. EX: https://source.unsplash.com/640x640/?rock-concert

1. Challenge (API)

Build an API for a blog page that provides the following:

1. A news feed that shows the articles.
2. A way to store and get blog contacts (contact form).
3. You can use any backend language or framework to solve this challenge.

2. Challenge (Frontend Interface)

Create a Web interface for the API you created. Must have the following features:

1. Create the interface using any technology of your preference. (TIP: component-oriented frameworks/libs helps accelerate the development process)
2. Make it responsive using your best judgement.
3. Create a page to show the published articles.
4. Implements a way to view a single article in the blog.
5. Create a page with a contact form, where the user can send their name, email, phone, and message.

Deliverables

The project source code and dependencies should be made available in GitHub. Here are the steps you should follow:

1. Create a public repository on GitHub (create an account if you don't have one).
2. Create a "development" branch and commit the code to it. Do not push the code to the master branch.
3. Create a "screenshots" sub-folder and include at least two screenshots of the app.
4. Include a README file that describes:

• Special build instructions, if any
• List of third-party libraries used and short description of why/how they were used

5. Once the work is complete, create a pull request from "development" into "master" and send us the link.
6. Avoid using huge commits hiding your progress. Feel free to work on a branch and use rebase to adjust your commits before submitting the final version.

Coding Standards

When working on the project be as clean and consistent as possible.

Project Deadline

Ideally you'd finish the test project in 5 days. It shouldn't take you longer than a entire week.

Quality Assurance

Use the following checklist to ensure high quality of the project.

Evaluation Criteria

1. First of all, it should compile and run without errors
2. Understanding of design patterns, OO concepts and other related concepts.
3. The tools of choice to solve the problem.
4. Code and component reuse/extensibility.
5. Ability to write test code.
6. Code design.
7. Ability to write clear documentation.
8. Separation of frontend and backend.

Submission

1. A link to the Github repository.
2. Briefly describe how you decided on the tools that you used.

Have Fun Coding 🤘

This challenge description is intentionally vague in some aspects, but if you need assistance feel free to ask for help.