5 files changed, 109 insertions, 0 deletions

diff --git a/app/controllers/api/v1/blog_controller.rb b/app/controllers/api/v1/blog_controller.rb
new file mode 100644
index 0000000..4594645
--- /dev/null
+++ b/app/controllers/api/v1/blog_controller.rb
@@ -0,0 +1,29 @@
+class Api::V1::BlogController < ApplicationController
+  before_action :set_blog, only: %i[show destroy]
+
+  def index
+    blog = Blog.all.order(created_at: :desc)
+    render json: blog
+  end
+
+  def create
+    blog = Blog.Create!(blog_params)
+    if blog
+      render json: blog
+    else
+    render json: blog.errors
+    end
+  end
+
+  def show
+  end
+
+  def destroy
+  end
+
+  private
+
+  def blog_params
+    params.permit(:name, :image, :content, :category, :live_date, :update_date)
+  end
+end
diff --git a/app/javascript/components/Blogs.jsx b/app/javascript/components/Blogs.jsx
new file mode 100644
index 0000000..f52f286
--- /dev/null
+++ b/app/javascript/components/Blogs.jsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+const Blogs = () => {
+	const navigate = useNavigate();
+	const [blogs, setBlogs] = useState([]);
+
+	useEffect(() => {
+		const url = "/api/v1/blogs/index";
+		fetch(url).then((response) => {
+			if (response.ok) {
+				return response.json();
+			}
+			throw new Error("Network response was not ok.");
+		}).then((response) => setBlogs(response)).catch(() => navigate("/"));
+	}, []);
+
+	const allBlogs = blogs.map((blog, index) => (
+		<div key={index} className="col-md-6 col-lg-4">
+			<div className="card mb-4">
+				<img src={blog.image} className="card-img-top" alt={`${blog.name} image`}/>
+				<div className="card-body">
+					<h5 className="card-title">{blog.name}</h5>
+					<Link to={`/blog/${blog.id}`} className="btn custom-button">
+						View Post
+					</Link>
+				</div>
+			</div>
+		</div>
+	));
+	const noBlog = (
+		<div className="vw-100 vh-50 dflex align-items-center justify-content-center">
+			<h4> Nothing Yet! </h4>
+		</div>
+	);
+
+	return (
+		<>
+		<section className="jumbotron jumbotron-fluid text-center">
+			<div className="container py-5">
+				<h1 className="display-4">Welcome to my Blog</h1>
+				<p className="lead text-muted">
+					Yup, this is my blog and stuff. Enjoy it :)
+				</p>
+			</div>
+		</section>
+		<div className="py-5">
+			<main className="container">
+				<div className="text-end mb-3">
+					<Link to="/blog" className="btn custom-button">
+						Write New Blog
+					</Link>
+				</div>
+				<div className="row">
+					{blogs.length > 0 ? allBlogs : noBlog}
+				</div>
+				<Link to="/" className="btn btn-link">
+					Home
+				</Link>
+			</main>
+		</div>
+		</>
+	);
+};
+
+export default Blogs;
diff --git a/app/javascript/components/Home.jsx b/app/javascript/components/Home.jsx
index b6c21e2..563ec88 100644
--- a/app/javascript/components/Home.jsx
+++ b/app/javascript/components/Home.jsx
@@ -17,6 +17,13 @@ export default () => (
         >
           View Games
         </Link>
+        <Link
+          to="/blogs"
+          className="btn btn-lg custom-button"
+          role="button"
+        >
+          View Blogs
+        </Link>
       </div>
     </div>
   </div>
diff --git a/app/javascript/routes/index.jsx b/app/javascript/routes/index.jsx
index e231cc5..ac0f9ae 100644
--- a/app/javascript/routes/index.jsx
+++ b/app/javascript/routes/index.jsx
@@ -1,11 +1,13 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "../components/Home";
+import Blogs from "../components/Blogs";
 
 export default (
 	<Router>
 		<Routes>
 			<Route path="/" element = {<Home />} />
+			<Route path="/blogs" element={<Blogs />} />
 		</Routes>
 	</Router>
 );
diff --git a/app/models/blog.rb b/app/models/blog.rb
new file mode 100644
index 0000000..5afa227
--- /dev/null
+++ b/app/models/blog.rb
@@ -0,0 +1,5 @@
+class Blog < ApplicationRecord
+  validates :name, presence: true
+  validates :content, presence: true
+  validates :category, presence: true
+end