Skip to content
This repository was archived by the owner on Apr 29, 2021. It is now read-only.

Commit c8dcf3e

Browse files
navgarchapeter-mouland
navgarcha
authored and
peter-mouland
committed
add idea-board test (#2)
1 parent d04e836 commit c8dcf3e

File tree

12 files changed

+7443
-3
lines changed

12 files changed

+7443
-3
lines changed

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
# Tech-screen
44

55
This repo contains multiple apps. The concept is to enable developers to pick and choose which tech problem(s) they would like to solve.
6-
6+
77
But first, a little bit about us...
88

99
## About ClearScore
@@ -25,13 +25,14 @@ We are currently working with...
2525
* A stylish solution with unit test coverage
2626
* Clean, concise code
2727
* A detailed README
28-
* A live site we can see (if possible)
28+
* A live site we can see (if possible)
2929

3030
## Apps
3131

3232
> Each app contains 1 (or more) tech challenge(s). Please pick and choose one or more to complete.
3333
3434
* [Carousel](/carousel) \[4 hours] \[Front-end] \[React]
3535
* A Front-end focused app which requires a new carousel
36-
* ...
36+
* [Idea Board](/idea-board) \[2-3 hours] \[Front-end] \[React]
37+
* Idea board app where you can create, update, delete and sort items.
3738

‎idea-board/COMMENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Developer Comments

‎idea-board/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# ClearScore FED Test
2+
Thank you for applying for a front end developer role at [ClearScore](https://www.clearscore.com).
3+
4+
We hope that you find this task fun and not to worry, there are no trick questions; we want to see your solution to a simple problem with well structured and thought-out code. We love to see unique solutions so if you're a developer that has a flare for CSS animations or a penchant for procedural programming then feel free to incorporate these skills.
5+
## Task
6+
Build an idea board that allows a user to create new ideas, edit existing ideas or delete them. Each idea should be represented as a tile on the board that displays a title, description and created/updated time. The title and description should be editable inline. The description text should have a max length of 140 characters. There should also be a button on the tile that allows for it to be deleted.
7+
8+
When working through the task you should treat it as if you're writing real world production code. We're looking to see a test suite, comments where required and an attention to detail. In addition to this you may use whatever libraries or packages you wish. This should take you around two or three hours to complete fully but feel free to spend as much or as little time on the exercise as you like. Detail anything you didn't get around to completing in the `COMMENTS.md` file along with any other additonal information we should be aware of when reviewing the code.
9+
### Required
10+
* Page should be fully responsive.
11+
* Each idea tile should contain a title and description, which is editable, as well as created/updated time.
12+
* New ideas should have the title field focused to prompt user to begin typing.
13+
* Add the ability to sort ideas by creation date or alphabetically.
14+
### Stretch
15+
* Utilise the localStorage API to persist current state when the page is refreshed.
16+
* Add a character countdown as the user is approaching the limit of their description text.
17+
* Add an unobtrusive notification when an update is made to a tile.
18+
## Getting started
19+
`yarn start` will run a development server on `http://localhost:3000`.
20+
`yarn test` will run the suite of tests created.

‎idea-board/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "clearscore-fed-test",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "16.4.0",
7+
"react-dom": "16.4.0",
8+
"react-scripts": "1.1.4"
9+
},
10+
"scripts": {
11+
"start": "react-scripts start",
12+
"test": "react-scripts test --env=jsdom",
13+
"eject": "react-scripts eject"
14+
},
15+
"devDependencies": {
16+
"enzyme": "3.3.0",
17+
"enzyme-adapter-react-16": "1.1.1",
18+
"react-test-renderer": "16.4.0"
19+
}
20+
}

‎idea-board/public/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>ClearScore FED Test</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎idea-board/src/App.css‎

Whitespace-only changes.

‎idea-board/src/App.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { Component } from 'react';
2+
import './App.css';
3+
4+
export default class App extends Component {
5+
render() {
6+
return (
7+
<div>
8+
ClearScore FED test...
9+
</div>
10+
);
11+
}
12+
}

‎idea-board/src/App.test.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
shallow(<App />);
7+
});

‎idea-board/src/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}

‎idea-board/src/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import './index.css';
5+
6+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)