diff --git a/.DS_Store b/.DS_Store
index 71796e5e4289a2d8a0fd10c38d1802ef309cb948..9eccfc2722da16d3dadb5c569acd3c025e7c1ca7 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/backend/.flaskenv b/backend/.flaskenv
new file mode 100644
index 0000000000000000000000000000000000000000..5aabce39e19b5f99fbfc93caae30a17a1933c54a
--- /dev/null
+++ b/backend/.flaskenv
@@ -0,0 +1,2 @@
+FLASK_APP=react_app.py
+FLASK_ENV=development
\ No newline at end of file
diff --git a/backend/react_app.py b/backend/react_app.py
new file mode 100644
index 0000000000000000000000000000000000000000..70758bd6336878eb4f6e0ca17ca9e59b48681511
--- /dev/null
+++ b/backend/react_app.py
@@ -0,0 +1,12 @@
+from flask import Flask
+
+api = Flask(__name__)
+
+@api.route('/profile')
+def my_profile():
+    response_body = {
+        "name": "Nagato",
+        "about" :"Hello! I'm a full stack developer that loves python and javascript"
+    }
+
+    return response_body
\ No newline at end of file
diff --git a/library/app.py b/library/app.py
index e7f2352e42c9df32fed17eb90b7002fee345ca72..149de8c3ce24a530376dd4969ffa79197e0d2786 100644
--- a/library/app.py
+++ b/library/app.py
@@ -17,7 +17,5 @@ app = create_app()
 port = int(os.environ.get("PORT", 5000))
 
 
-
-
 if __name__ == '__main__':
     app.run(debug=True)
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index eb996e32bce478984d6eeff68d49a13bbd8cba45..99c38f0607a793471f1e235cf61df7a811550b57 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,32 +7,59 @@ import axios from "axios";
 
 function App() {
 
-  // const [formData, setFormData] = useState(null)
+  const [formData, setFormData] = useState(null)
 
-  // function getData() {
-  //   axios({
-  //     method: "POST",
-  //     url:"/profile",
-  //   })
-  //   .then((response) => {
-  //     const res =response.data
-  //     setProfileData(({
-  //       profile_name: res.name,
-  //       about_me: res.about}))
-  //   }).catch((error) => {
-  //     if (error.response) {
-  //       console.log(error.response)
-  //       console.log(error.response.status)
-  //       console.log(error.response.headers)
-  //       }
-  //   })}
-    //end of new line 
+  function getData() {
+    axios({
+      method: "POST",
+      url:"/profile",
+    })
+    .then((response) => {
+      const res =response.data
+      setProfileData(({
+        profile_name: res.name,
+        about_me: res.about}))
+    }).catch((error) => {
+      if (error.response) {
+        console.log(error.response)
+        console.log(error.response.status)
+        console.log(error.response.headers)
+        }
+    })}
 
-  return (
-    <div>
-      <Home />
-    </div>
-  );
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <p>
+            Edit <code>src/App.js</code> and save to reload.
+          </p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+  
+          {/* new line start*/}
+          <p>To get your profile details: </p><button onClick={getData}>Click me</button>
+          {profileData && <div>
+                <p>Profile name: {profileData.profile_name}</p>
+                <p>About me: {profileData.about_me}</p>
+              </div>
+          }
+           {/* end of new line */}
+        </header>
+      </div>
+    );
+
+  // return (
+  //   <div>
+  //     <Home />
+  //   </div>
+  // );
 }
 
 export default App;