diff --git a/package.json b/package.json
index 8b404206..cdd51bf0 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.19.2",
-    "emoji-dictionary": "^1.0.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
+    "emoji-dictionary": "^1.0.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"
diff --git a/src/App.js b/src/App.js
index 60566602..c5755335 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,18 @@
-import React from 'react';
-import './App.css';
-import Board from './components/Board';
+import React from "react";
+import "./App.css";
+import Board from "./components/Board";
 
 const App = () => {
   return (
     <section>
       <header className="header">
-        <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
+        <h1 className="header__h1">
+          <span className="header__text">Inspiration Board</span>
+        </h1>
       </header>
       <Board
         url="https://inspiration-board.herokuapp.com/boards/"
-        boardName={`Ada-Lovelace`}
+        boardName={`Pinreact`} //let's pick a name
       />
     </section>
   );
diff --git a/src/App.test.js b/src/App.test.js
index e857c27d..3b36a76e 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,11 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-describe('App', () => {
-
-  it('renders without crashing', () => {
-    console.log('testing would be nice! :)');
-  });
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
+describe("App", () => {
+  it("renders without crashing", () => {});
 });
diff --git a/src/components/Board.js b/src/components/Board.js
index 698faaaa..2bd4db65 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -1,21 +1,94 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import "./Board.css";
+import Card from "./Card";
+import NewCardForm from "./NewCardForm";
+import CARD_DATA from "../data/card-data.json";
 
-import './Board.css';
-import Card from './Card';
-import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+const Board = ({ url, boardName }) => {
+  const [board, setBoard] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  console.log(board);
+
+  useEffect(() => {
+    axios
+      .get(`${url}${boardName}/cards`)
+      .then((response) => {
+        const apiBoard = response.data;
+        setBoard(apiBoard);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  }, [boardName]); // this is a dependency array. If one of the dependencies change the callback method will be run, if it is empty it will only run on the first render
+
+  const addCard = (card) => {
+    axios
+      .post(url + boardName + "/cards", { text: card.text, emoji: card.emoji })
+      .then((response) => {
+        const newCard = {
+          card: {
+            id: response.data.card.id,
+            text: response.data.card.text,
+            emoji: response.data.card.emoji,
+          },
+        };
+        const newBoard = [newCard, ...board];
+        setBoard(newBoard);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  };
+
+  const deleteCard = (id) => {
+    axios
+      .delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+      .then((response) => {
+        console.log(response);
+        const updateBoard = board.filter((card) => card.card.id !== id);
+        setBoard(updateBoard); //
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  };
 
-const Board = () => {
   return (
-    <div>
-      Board
+    <div className="Myboard">
+      <div>Board {boardName}</div>
+      {errorMessage ? (
+        <div>
+          <h2 className="error-msg">{errorMessage}</h2>
+        </div>
+      ) : (
+        ""
+      )}
+      {board.map((el) => {
+        return (
+          <Card
+            key={el.card.id}
+            id={el.card.id}
+            text={el.card.text}
+            emoji={el.card.emoji}
+            deleteCard={deleteCard}
+          />
+        );
+      })}
+
+      <NewCardForm addCardCallback={addCard} />
     </div>
-  )
+  );
 };
-Board.propTypes = {
 
+Board.propTypes = {
+  url: PropTypes.string,
+  boardName: PropTypes.string,
 };
 
 export default Board;
diff --git a/src/components/Board.test.js b/src/components/Board.test.js
index e69de29b..f80dda19 100644
--- a/src/components/Board.test.js
+++ b/src/components/Board.test.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import Board from "./Board";
+
+describe("Board", () => {
+  test("that it matches the existing snapshot", () => {
+    // Arrange-Act
+    const { asFragment } = render(<Board url="abc" boardName={`Pinreact`} />);
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});
diff --git a/src/components/Card.js b/src/components/Card.js
index 51a33966..01df651a 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,19 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+import React from "react";
+import PropTypes from "prop-types";
+import emojiLib from "emoji-dictionary";
 
-import './Card.css';
+import "./Card.css";
 
-const Card = () => {
+const Card = ({ emoji, text, deleteCard, id }) => {
   return (
     <div className="card">
-      Card
+      <div className="card__content">
+        <div className="card__content-text">{text ? text : ""}</div>
+        <div className="card__content-emoji">
+          {emoji ? emojiLib.getUnicode(emoji) : ""}
+        </div>
+        <button
+          className="card__delete"
+          onClick={() => {
+            deleteCard(id);
+          }}
+        >
+          Delete
+        </button>
+      </div>
     </div>
-  )
-}
+  );
+};
 
 Card.propTypes = {
-
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCard: PropTypes.func,
 };
-
 export default Card;
+
+// {
+//   "card": {
+//     "id": 4733,
+//     "text": "'Be patient'",
+//     "emoji": "'heart'"
+//   }
+// };
+//card data
+
+// const studentIds = newStudentList.map(student => student.id);
+//const nextId = Math.max(...studentIds) + 1;
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
new file mode 100644
index 00000000..82dcdb71
--- /dev/null
+++ b/src/components/Card.test.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import Card from "./Card";
+
+describe("Card", () => {
+  test("that it matches the existing snapshot", () => {
+    // Arrange-Act
+    const { asFragment } = render(
+      <Card
+        key={1}
+        id={1}
+        text={"happy"}
+        emoji={"dog"}
+        deleteCard={() => null}
+      />
+    );
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..64d1e517 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -1,6 +1,87 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
-import './NewCardForm.css';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import emojiLib from "emoji-dictionary";
+import "./NewCardForm.css";
 
-const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+const EMOJI_LIST = [
+  "",
+  "heart_eyes",
+  "beer",
+  "clap",
+  "sparkling_heart",
+  "heart_eyes_cat",
+  "dog",
+];
+
+const NewCardForm = (props) => {
+  const [text, setText] = useState("");
+  const [emoji, setEmoji] = useState("");
+
+  // function for submitting the form
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+    const message = {
+      text: text,
+      emoji: emoji,
+    };
+    props.addCardCallback(message);
+
+    setText("");
+    setEmoji("");
+  };
+
+  const allEmojis = EMOJI_LIST.map((emoji, index) => {
+    return (
+      <option key={index} value={emoji}>
+        {emojiLib.getUnicode(emoji)}
+      </option>
+    );
+  });
+
+  return (
+    <form className="new-card-form" onSubmit={onFormSubmit}>
+      <h3 className="new-card-form__header">What inspires you?</h3>
+
+      <div className="new-card-form_form">
+        <label className="new-card-form__form-label" htmlFor="text">
+          Text:
+        </label>
+        <input
+          className="new-card-form__form-textarea"
+          name="text"
+          placeholder="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+      </div>
+
+      <div className="new-card-form_form">
+        <label className="new_card_form_form-label" htmlFor="emoji">
+          Emoji:
+          {allEmojis}
+        </label>
+        <input
+          className="new-card-form__form-textarea"
+          name="emoji"
+          placeholder="emoji"
+          value={emoji}
+          onChange={(e) => setEmoji(e.target.value)}
+        />
+      </div>
+
+      <input
+        className="new-card-form__form-button"
+        type="submit"
+        value="Add Card"
+      />
+    </form>
+  );
+};
+
+NewCardForm.propTypes = {
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  addCardCallback: PropTypes.func,
+};
+
+export default NewCardForm;
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index e69de29b..3a776767 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import NewCardForm from "./NewCardForm";
+
+describe("NewCardForm", () => {
+  test("that it matches the existing snapshot", () => {
+    // Arrange-Act
+    const { asFragment } = render(<NewCardForm addCardCallback={() => null} />);
+
+    // Assert
+    expect(asFragment()).toMatchSnapshot();
+    cleanup();
+  });
+});
diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap
new file mode 100644
index 00000000..31090069
--- /dev/null
+++ b/src/components/__snapshots__/Board.test.js.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="Myboard"
+  >
+    <div>
+      Board Pinreact
+    </div>
+    <form
+      class="new-card-form"
+    >
+      <h3
+        class="new-card-form__header"
+      >
+        What inspires you?
+      </h3>
+      <div
+        class="new-card-form_form"
+      >
+        <label
+          class="new-card-form__form-label"
+          for="text"
+        >
+          Text:
+        </label>
+        <input
+          class="new-card-form__form-textarea"
+          name="text"
+          placeholder="text"
+          value=""
+        />
+      </div>
+      <div
+        class="new-card-form_form"
+      >
+        <label
+          class="new_card_form_form-label"
+          for="emoji"
+        >
+          Emoji:
+          <option
+            value=""
+          />
+          <option
+            value="heart_eyes"
+          >
+            😍
+          </option>
+          <option
+            value="beer"
+          >
+            🍺
+          </option>
+          <option
+            value="clap"
+          >
+            👏
+          </option>
+          <option
+            value="sparkling_heart"
+          >
+            💖
+          </option>
+          <option
+            value="heart_eyes_cat"
+          >
+            😻
+          </option>
+          <option
+            value="dog"
+          >
+            🐶
+          </option>
+        </label>
+        <input
+          class="new-card-form__form-textarea"
+          name="emoji"
+          placeholder="emoji"
+          value=""
+        />
+      </div>
+      <input
+        class="new-card-form__form-button"
+        type="submit"
+        value="Add Card"
+      />
+    </form>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap
new file mode 100644
index 00000000..50678f95
--- /dev/null
+++ b/src/components/__snapshots__/Card.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="card"
+  >
+    <div
+      class="card__content"
+    >
+      <div
+        class="card__content-text"
+      >
+        happy
+      </div>
+      <div
+        class="card__content-emoji"
+      >
+        🐶
+      </div>
+      <button
+        class="card__delete"
+      >
+        Delete
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap
new file mode 100644
index 00000000..681f21fa
--- /dev/null
+++ b/src/components/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches the existing snapshot 1`] = `
+<DocumentFragment>
+  <form
+    class="new-card-form"
+  >
+    <h3
+      class="new-card-form__header"
+    >
+      What inspires you?
+    </h3>
+    <div
+      class="new-card-form_form"
+    >
+      <label
+        class="new-card-form__form-label"
+        for="text"
+      >
+        Text:
+      </label>
+      <input
+        class="new-card-form__form-textarea"
+        name="text"
+        placeholder="text"
+        value=""
+      />
+    </div>
+    <div
+      class="new-card-form_form"
+    >
+      <label
+        class="new_card_form_form-label"
+        for="emoji"
+      >
+        Emoji:
+        <option
+          value=""
+        />
+        <option
+          value="heart_eyes"
+        >
+          😍
+        </option>
+        <option
+          value="beer"
+        >
+          🍺
+        </option>
+        <option
+          value="clap"
+        >
+          👏
+        </option>
+        <option
+          value="sparkling_heart"
+        >
+          💖
+        </option>
+        <option
+          value="heart_eyes_cat"
+        >
+          😻
+        </option>
+        <option
+          value="dog"
+        >
+          🐶
+        </option>
+      </label>
+      <input
+        class="new-card-form__form-textarea"
+        name="emoji"
+        placeholder="emoji"
+        value=""
+      />
+    </div>
+    <input
+      class="new-card-form__form-button"
+      type="submit"
+      value="Add Card"
+    />
+  </form>
+</DocumentFragment>
+`;
diff --git a/src/data/card-data.json b/src/data/card-data.json
index 1f9793ec..525e5452 100644
--- a/src/data/card-data.json
+++ b/src/data/card-data.json
@@ -19,3 +19,5 @@
     }
   ]
 }
+
+
diff --git a/src/setupTests.js b/src/setupTests.js
index fc7b0dce..42caa142 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1,4 +1,4 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+// import Enzyme from "enzyme";
+// import Adapter from "enzyme-adapter-react-16";
 
-Enzyme.configure({ adapter: new Adapter() });
+// Enzyme.configure({ adapter: new Adapter() });