I have finished this project

src/App.css

@@ -36,3 +36,11 @@
     transform: rotate(360deg);
   }
 }
+
+
+.link {
+  padding: 1em;
+  text-decoration: none;
+  color: black;
+  font-size: 17px;
+}

src/App.js

@@ -1,12 +1,57 @@
 import React from 'react';
 import './App.css';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Link} from 'react-router-dom';
+import Login from './components/login';
+import FriendsList from './components/FriendList';
+import AddFriend from './components/AddFriend';
+import Logout from './components/Logout';
+
+import PrivateRoute from './components/PrivateRoute';
 
 function App() {
   return (
-    <div className="App">
-      <h2>Client Auth Project</h2>
-    </div>
+      <div className="App">
+        <header>
+            <h2>Friends Database</h2>
+            <Link className='link' to='login'>Login</Link>
+            <Link className='link' to='friends'>Friends</Link>
+            <Link className='link' to='friends/add'>Add Friends</Link>
+            <Link className='link' to='logout'>Logout</Link>
+        </header> 
+      {/* Home */}
+        <Routes>
+          <Route exact path='/' element={<Login/>}>
+          </Route>
+        </Routes>
+
+      {/* Login */}
+        <Routes>
+          <Route exact path='/login' element={<Login/>}>
+          </Route>
+        </Routes>
+
+      {/* Friendlist */}
+      {/* <PrivateRoute exact path ='/friends' component={FriendsList}/> */}
+        <Routes>
+          <Route exact element={<PrivateRoute  />}>
+            <Route exact path ='/friends' element={<FriendsList/>} />
+          </Route>
+        </Routes>
+
+        {/* Addfriend */}
+        <Routes>
+          <Route exact element = {<PrivateRoute />}>
+            <Route exact path='/friends/add' element={<AddFriend/>}/>
+          </Route>
+        </Routes>
+
+        {/* Logout */}
+        <Routes>
+          <Route exact element = {<PrivateRoute />}>
+            <Route exact path='/logout' element={<Logout/>}/>
+          </Route>
+        </Routes>
+      </div>
   );
 }
 

src/components/AddFriend.js

@@ -0,0 +1,60 @@
+import React, {useState} from "react";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+
+const AddFriend = () => {
+    let navigate = useNavigate();
+    const [form, setForm] = useState({
+        name:'',
+        age:'',
+        email:'',
+    })
+
+    const handleChange = e => {
+        setForm({
+            ...form,
+            [e.target.name]: e.target.value
+        })
+    }
+
+    const handleSubmit = e => {
+        e.preventDefault()
+        const token = localStorage.getItem('token');
+        axios.post('http://localhost:9000/api/friends', form, {
+            headers: {
+                authorization: token
+            }
+        })
+        .then(res => {
+            navigate('/friends')
+        })
+        .catch(err => {console.error(err)})
+    }
+
+    console.log(form)
+    return (
+        <div>
+            <h2>Add a friend</h2>
+            <form onSubmit={handleSubmit}>
+
+                <div>
+                    <label htmlFor="name">Name:</label>
+                    <input onChange={handleChange} name ='name' id='name'></input>
+                </div>
+
+                <div>
+                    <label htmlFor="age">Age:</label>
+                    <input onChange={handleChange} name='age' id='age'></input>
+                </div>
+
+                <div>
+                    <label htmlFor="email">Email:</label>
+                    <input onChange={handleChange} name='email' id='email'></input>
+                </div>
+                <button>Submit</button>
+            </form>
+        </div>
+    )
+  }
+
+export default AddFriend

src/components/FriendList.js

@@ -0,0 +1,37 @@
+import React,{ useState , useEffect} from "react";
+import axios from 'axios'
+import axiosWithAuth from "../utils/axiosWithAuth";
+
+const FriendsList = () => {
+    const [friends, setFriends] = useState([]);
+
+    useEffect(()=>{
+        const token = localStorage.getItem('token')
+
+        axiosWithAuth().get('/friends')
+        .then(res => {
+            console.log(res.data)
+            setFriends(res.data)
+        })
+        .catch(err => {
+            console.error(err)
+        })
+    }, [])
+
+    return (
+        <div>
+             <h4>My friends</h4>
+             <ul>
+                {
+                    friends.map(friend => {
+                        return (
+                            <li key={friend.id}>{friend.name} - {friend.age} - {friend.email}</li>
+                        )
+                    })
+                }
+             </ul>
+        </div>
+    )
+  }
+
+  export default FriendsList

src/components/Login.js

@@ -0,0 +1,53 @@
+import axios from 'axios';
+import React, {useState} from 'react'
+import { useNavigate } from 'react-router-dom';
+
+
+const Login = () => {
+let navigate = useNavigate()
+
+    const [cred, setCred] = useState({
+        username: '',
+        password:'',
+    });
+
+    const handleChange = e => {
+        setCred({
+            ...cred,
+            [e.target.name]:e.target.value,
+        })
+    }
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        axios.post('http://localhost:9000/api/login', cred)
+            .then(res => {
+                console.log(res.data.token)
+                localStorage.setItem('token', res.data.token)
+                navigate('/friends')
+            })
+            .catch(err => console.error(err))
+    }
+
+
+    return (
+      <div>
+        <h1>Login</h1>
+        <form onSubmit={handleSubmit}>
+
+          <div>
+            <label htmlFor='username'>Username:</label>
+            <input name='username' onChange={handleChange} id='username'></input>
+          </div>
+
+          <div>
+            <label htmlFor='password'>Password:</label>
+            <input name='password' onChange={handleChange} type='password' id='password'></input>
+          </div>
+          <button>Submit</button>
+        </form>
+      </div>
+    )
+  }
+
+export default Login

src/components/Logout.js

@@ -0,0 +1,25 @@
+import React, {useEffect} from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+const Logout = () => {
+    let navigate = useNavigate();
+    const token = localStorage.getItem('token')
+    useEffect(()=>{
+        axios.post('http://localhost:9000/api/logout',{}, {
+            headers: {
+                authorization: token
+            }
+        })
+        .then(res => {
+            localStorage.removeItem('token')
+            navigate('/login')
+        })
+        .catch(err => {
+            console.error(err)
+        })
+    },[])
+
+}
+
+export default Logout

src/components/PrivateRoute.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Navigate, Outlet} from 'react-router-dom'
+
+const PrivateRoute = () => {
+    let userId = localStorage.getItem('token') == null ? false : true
+    console.log(userId)
+    return (
+        <>
+            {userId ? <Outlet /> : <Navigate to='login'/>}
+        </>
+    )
+}
+
+export default PrivateRoute

src/utils/axiosWithAuth.js

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const axiosWithAuth = () => {
+    const token = localStorage.getItem('token')
+
+    return axios.create({
+        headers:{
+            authorization: token
+        },
+        baseURL:'http://localhost:9000/api'
+    })
+}
+
+export default axiosWithAuth