Explanation
The task is to create a small blog application where users can see a list of recent articles, create/update/delete or see article details.
In order to solve this task, we require the following frameworks to be used: bootstrap (v4.5), angular (v10), with solid knowledge of typescript, SCSS, git. Presentation (design) is up to you, choose layout, typography, and colors.
Featureѕ
# List articles
- Should show a list of articles by page (3 per page),
- Should show article as title, picture, description (less than 200 characters) and date/time when it's created
- Should contain archive by year and inside it, month in which articles are created
- Should contain the action to create a new article
- Should contain the option to delete an existing article (should warn the user before doing so, and on consent, delete it)
- Should contain the action to update an existing article
# Article details
- Should contain title, picture, content, date and time when the article is created,
- Should contain the action to create a new article,
- Should contain the option to delete an existing article (should warn the user before doing so, and on consent, delete it)
- Should contain the action to return on the list of articles
# Edit article
- Should allow the user to edit an existing article,
- Should validate inputs (title - required, more than 3 characters and less than 70, description - required, more than 3 characters and less than 500, picture - required),
- Should return user after update to list of articles,
- Client-side validation messages show bellow inputs,
- Server-side validation messages show above form
# Create article
- Should allow the user to create a new article,
- Should validate inputs (title - required, more than 3 characters and less than 70, description - required, more than 3 characters and less than 500, picture - required),
- Should return the user to a list of articles,
-- Client-side validation messages show bellow inputs,
-- Server-side validation messages show above form
# Tests for edit article component
- Should contain tests for edit component (coverage should be 70%+)
# Tests for article service
- Should contain tests for actions (coverage should be 70%+)
The API
We don’t want you to work with browser localStorage or deal with any back-end technology, so we have created a simple API for you.
This API supports the following methods:
# API Authorization
In order to successfully use any of the provided methods it’s necessary that you send one additional header in the format:
Authorization: Bearer YOUR-API-KEY
# GET
We use this method to only get the data from the server. It supports two URLs:
-
https://api.webbytechexpert.com/devTest/api.php (get all articles)
-
https://api.webbytechexpert.com/devTest/api.php?id=XXX (get specific article where
XXX represents article ID)
# POST
We use this method to create articles. Each request must include:
- title
- picture
- description
URL for POST method is
https://api.webbytechexpert.com/devTest/api.php
The picture represents a direct link for the image.
# PUT
We use this method to update articles. Each request must include:
- title
- picture
- description
URL for the PUT method is
https://api.webbytechexpert.com/devTest/api.php?id=XXX
The picture represents a direct link for the image.
# DELETE
We use this method to delete articles.
URL:
-
https://api.webbytechexpert.com/devTest/api.php?id=XXX (delete specific article where
XXX represents article ID)
Important
For each feature, please create brach, implement stuff, and merge it with the master, avoid working on the master branch.
NOTE: Harden application for server-side or permission/authorization errors. Use only what you need from frameworks, don't include what's not needed. SCSS should be overridden where possible and in the main style.scss file, not in components. No warnings and lint issues.
BONUS: Provide a link where we can test your application without having to set it all locally