created homepage and displayed posts

frontend/.env

-VITE_BASE_URL=http://localhost:8000/
+VITE_BASE_URL=http://localhost:8002

frontend/src/components/Layout/Layout.css

 
 .sidebar {
     margin: 80px 30px;
+    margin-right: 150px;
 }
\ No newline at end of file

frontend/src/components/Post/Post.css

+.post_imageframe {
+    margin-right: 100px;
+    width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    height: 300px;
+}
+
+.post_image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
\ No newline at end of file

frontend/src/components/Post/Post.tsx

 import { FunctionComponent, ReactElement } from "react";
 import IPostProps from "./IPostProps";
 import defaultImage from '../../assets/default-image.jpg'
-
+import './Post.css'
 
 const Post: FunctionComponent<IPostProps> = (props): ReactElement => {
     return (

frontend/src/components/PostList/IPostListProps.ts

+import IPost from "../../interfaces/IPost";
+
+export default interface IPostListProps {
+    posts: IPost[]
+}
\ No newline at end of file

frontend/src/components/PostList/PostList.tsx

+import React, { FunctionComponent, ReactElement } from "react";
+import IPostListProps from "./IPostListProps";
+import Post from "../Post/Post";
+
+
+const PostList: FunctionComponent<IPostListProps> = (props): ReactElement => {
+    return (
+        <div className="PostList">
+            {props.posts.length ? 
+                props.posts.map(p => {
+                    return <Post
+                        key={p._id}
+                        post={p}
+                    />
+                }): <h1>No posts</h1>}
+        </div>
+    )
+}
+
+export default PostList
\ No newline at end of file

frontend/src/containers/HomePage/HomePage.tsx

-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import { AppDispatch, AppState } from "../../store/store";
+import { shallowEqual, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
+import { getPosts } from "../../store/posts/posts.slice";
+import PostList from "../../components/PostList/PostList";
 
 
 const HomePage: FunctionComponent = (): ReactElement => {
+    const dispatch:AppDispatch = useDispatch()
+    const {posts} = useSelector((state: AppState) => state.posts, shallowEqual)
+    
+    useEffect(() => {
+        dispatch(getPosts())
+    }, [])
+
     return (
         <div className="homepage">
             <div className="container">
-
+                <PostList 
+                    posts={posts}
+                />
             </div>
         </div>
     )