Microservice sample projects

4 files changed, 72 insertions, 0 deletions

diff --git a/microservices/04-react-app/src/features/auth/components/Login.jsx b/microservices/04-react-app/src/features/auth/components/Login.jsx
new file mode 100644
index 0000000..45e3e9d
--- /dev/null
+++ b/microservices/04-react-app/src/features/auth/components/Login.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Login = () => {
+  return (
+    <div>Login</div>
+  )
+}
+
+export default Login
\ No newline at end of file
diff --git a/microservices/04-react-app/src/features/auth/components/Register.jsx b/microservices/04-react-app/src/features/auth/components/Register.jsx
new file mode 100644
index 0000000..bb20b14
--- /dev/null
+++ b/microservices/04-react-app/src/features/auth/components/Register.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Register = () => {
+  return (
+    <div>Register</div>
+  )
+}
+
+export default Register
\ No newline at end of file
diff --git a/microservices/04-react-app/src/features/auth/layouts/AuthLayout.jsx b/microservices/04-react-app/src/features/auth/layouts/AuthLayout.jsx
new file mode 100644
index 0000000..20aada4
--- /dev/null
+++ b/microservices/04-react-app/src/features/auth/layouts/AuthLayout.jsx
@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router';
+
+const AuthLayout = () => {
+  return (
+    <div className="auth-layout">
+      <div>AuthLayout</div>
+      <Outlet />
+    </div>
+  )
+}
+
+export default AuthLayout
\ No newline at end of file
diff --git a/microservices/04-react-app/src/features/posts/components/PostList.jsx b/microservices/04-react-app/src/features/posts/components/PostList.jsx
new file mode 100644
index 0000000..a7ccd3b
--- /dev/null
+++ b/microservices/04-react-app/src/features/posts/components/PostList.jsx
@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react'
+import api from '../../../services/api'
+
+const PostList = () => {
+    const [posts, setPosts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    // Fetch data on component mount
+    useEffect(() => {
+        api
+            .get("/posts") // Replace with your actual API endpoint
+            .then((response) => {
+                setPosts(response.data);
+                setLoading(false);
+            })
+            .catch((err) => {
+                setError(err.message);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) return <p>Loading posts...</p>;
+    if (error) return <p style={{ color: "red" }}>Error: {error}</p>;
+
+    return (
+        <div style={{ padding: "10px", fontFamily: "sans-serif" }}>
+            <h3>Latest posts</h3>
+
+            {/* 1. LIST VIEW */}
+            <ul>
+                {posts.map((post) => (
+                    <li key={post.id}>
+                        <strong>{post.title}</strong> by {post.author} (ID: {post.id})
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export default PostList
\ No newline at end of file