because the task

src/app/Bookmarks/scenes/Overview/Overview.js

@@ -1,29 +1,10 @@
 import React from 'react'
-import styled from 'styled-components'
+import BookmarkApp from '../../../components/BookmarkApp'
+
 export default class Home extends React.PureComponent {
   render () {
     return (
-      <Wrapper>
-        <Message>
-          Happy Coding!
-          <Icon dangerouslySetInnerHTML={{ __html: require('../../../../assets/cool.svg') }} />
-        </Message>
-      </Wrapper>
+      <BookmarkApp />
     )
   }
 }
-
-const Wrapper = styled.div`
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`
-
-const Message = styled.div`
-  font-size: 62px;
-`
-
-const Icon = styled.div`
-
-`

src/app/actions/index.js

@@ -0,0 +1,98 @@
+// import fetch from 'cross-fetch'
+import axios from 'axios'
+
+export const SEARCH_ONCHANGE = 'SEARCH_ONCHANGE'
+export const SEARCH_RECEIVE_DATA = 'SEARCH_RECEIVE_DATA'
+export const DROPDOWN_SHOW = 'DROPDOWN_SHOW'
+export const DROPDOWN_HIDE = 'DROPDOWN_HIDE'
+
+export const ADD_BOOKMARK = 'ADD_BOOKMARK'
+export const DELETE_BOOKMARK = 'DELETE_BOOKMARK'
+export const MOVE_BOOKMARK = 'MOVE_BOOKMARK'
+
+export const COLUMN_NAME_ONCHANGE = 'COLUMN_NAME_ONCHANGE'
+export const ADD_COLUMN = 'ADD_COLUMN'
+export const DELETE_COLUMN = 'DELETE_COLUMN'
+
+// Changing value of search input
+export const searchOnchange = text => ({
+  type: SEARCH_ONCHANGE,
+  data: text
+})
+
+// Received data of 5 first results
+export const searchReaceiveData = json => ({
+  type: SEARCH_RECEIVE_DATA,
+  items: json
+})
+
+// Also we can get data from GitHUB API using fetch
+// export const searchFetchQuery = text => dispatch => {
+//   return fetch(`https://api.github.com/search/repositories?q=${text}+in:name&sort=stars`)
+//     .then(response => response.json())
+//     .then(json => dispatch(searchReaceiveData(json.items.slice(0, 5))))
+// }
+
+// Fetching data from GitHUB API
+export const searchFetchQuery = text => dispatch => {
+  return axios.get(`https://api.github.com/search/repositories?q=${text}+in:name&sort=stars`)
+    .then(function (response) {
+      // here we can change results amount
+      dispatch(searchReaceiveData(response.data.items.slice(0, 5)))
+    })
+    .catch(function (error) {
+      console.log(error)
+    })
+}
+
+// Showing dropdown box
+export const dropdownShow = () => ({
+  type: DROPDOWN_SHOW
+})
+
+// Hiding dropdown box
+export const dropdownHide = () => ({
+  type: DROPDOWN_HIDE
+})
+
+// Adding new bookmark
+export const addBookmark = item => ({
+  type: ADD_BOOKMARK,
+  item: item
+})
+
+// Deleting bookmark
+export const deleteBookmark = (id, columnName) => ({
+  type: DELETE_BOOKMARK,
+  id: id,
+  column: columnName
+})
+
+// Moving bookmark
+export const moveBookmark = (id, idColumnName, indexOfId, atIndexColumnName, indexOfatIndex) => ({
+  type: MOVE_BOOKMARK,
+  id: id,
+  idColumnName: idColumnName,
+  indexOfId: indexOfId,
+  atIndexColumnName: atIndexColumnName,
+  indexOfatIndex: indexOfatIndex
+})
+
+// Changing value of add column input
+export const columnNameOnchange = text => ({
+  type: COLUMN_NAME_ONCHANGE,
+  text: text
+})
+
+// Adding new column
+export const addColumn = name => ({
+  type: ADD_COLUMN,
+  name: name
+})
+
+// Deleting column
+export const deleteColumn = (name, cards) => ({
+  type: DELETE_COLUMN,
+  name: name,
+  cards: cards
+})

src/app/additional/additionalFunc.js

@@ -0,0 +1,81 @@
+// Creating update info
+export function wasUpdated (dateString) {
+  const updatedAtMilisec = Date.parse(dateString)
+  const todayMilisec = Date.now()
+  let dayDiffirence = parseInt((todayMilisec - updatedAtMilisec) / (1000 * 60 * 60 * 24))
+  let result = ''
+  if (dayDiffirence > 1) {
+    result = 'Updated ' + dayDiffirence.toString() + ' days ago'
+    return result
+  } else if (dayDiffirence === 1) {
+    result = 'Updated a day ago'
+    return result
+  }
+  result = 'Updated today'
+  return result
+}
+
+// Creating stars info
+export function showStars (stars) {
+  let result = ''
+  const starsAbsolute = stars % 1000
+  if (stars < 1000) {
+    result = stars.toString()
+    return result
+  } else if (starsAbsolute > 50 && starsAbsolute < 951) {
+    let starsKilo = (stars / 1000).toFixed(1)
+    result = starsKilo + 'k'
+    return result
+  } else if (starsAbsolute < 50 || starsAbsolute > 950) {
+    let starsKilo = (stars / 1000).toFixed()
+    result = starsKilo + 'k'
+    return result
+  }
+}
+
+// Creating issues info
+export function showIssues (issues) {
+  let result = 'No issues'
+  if (issues > 1) {
+    result = issues.toString() + ' issues need help'
+    return result
+  } else if (issues === 1) {
+    result = '1 issue need help'
+    return result
+  }
+  return result
+}
+
+// Creating license info
+export function showLicense (license) {
+  let result = ''
+  if (!license) {
+    result = 'No info'
+    return result
+  }
+  result = license.name
+  return result
+}
+
+// Loading the state from LocalStorage
+export const loadState = () => {
+  try {
+    const serializedState = localStorage.getItem('bookmark')
+    if (serializedState === null) {
+      return { 'bookmarks': { name: '', list: {}, columns: [{ name: 'Collection', cards: [] }] } }
+    }
+    return JSON.parse(serializedState)
+  } catch (err) {
+    return undefined
+  }
+}
+
+// Saving the state to LocalStorage
+export const saveState = (state) => {
+  try {
+    const serializedState = JSON.stringify(state)
+    localStorage.setItem('bookmark', serializedState)
+  } catch (err) {
+    // Ignore errors
+  }
+}

src/app/components/BookmarkApp.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import ShowSearchInput from '../containers/Search/ShowSearchInput'
+import ShowDropDown from '../containers/DropDown/ShowDropDown'
+import ShowBookmarkContainer from '../containers/Columns/ShowBookmarkContainer'
+
+const BookmarkApp = () => (
+  <div>
+    <ShowSearchInput />
+    <ShowDropDown />
+    <ShowBookmarkContainer />
+  </div>
+)
+
+export default BookmarkApp

src/app/components/Columns/BookmarkAddColumn.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import styled from 'styled-components'
+
+// Visualisation of add column block
+const BookmarkAddColumn = ({ className, value, onChange, onClick, onKeyPress }) => (
+  <div className={className}>
+    <input name='addColumn'
+      type='text'
+      placeholder='Enter Name'
+      value={value}
+      onChange={onChange}
+      onKeyPress={onKeyPress} />
+    <button onClick={onClick}>
+      <svg viewBox='0 0 35 35' version='1.1' fill=''><g id='' fill=''><path d='M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 15 10 L 15 15 L 10 15 L 10 17 L 15 17 L 15 22 L 17 22 L 17 17 L 22 17 L 22 15 L 17 15 L 17 10 Z ' fill='' /></g></svg>
+    </button>
+  </div>
+)
+
+export default styled(BookmarkAddColumn)`
+  position: relative;
+  display: inline-block;
+  width: 196px;
+  height: 50px;
+  background-color: rgb(245, 247, 250);
+  border: 2px dashed rgb(153, 153, 153);
+  font-family: 'Open Sans', sans-serif;
+  font-weight: bold;
+  font-size: 17px;
+  margin: 7px 15px;
+
+  input[type="text"] {
+    color: rgb(73, 73, 73);
+    border-radius: 5px;
+    border: 1px solid transparent;
+    width: 70%;
+    height: 27px;
+    font-size: 17px;
+    background-color: rgb(245, 247, 250);
+    font-family: 'Open Sans', sans-serif;
+    font-weight: bold;
+    margin: 12px 0px 12px 15px;
+  }
+
+  input[type="text"]::placeholder {
+    font-size: 17px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: bold;
+  }
+
+  button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    margin: 6%;
+  }
+
+  button svg {
+    fill: #999999;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+  }
+
+`