update README.md

update docker compose
update README.md
2024-04-09 18:02:32 -04:00 · 2024-04-09 17:53:50 -04:00 · 2024-04-09 17:51:12 -04:00 · 2024-04-09 17:50:06 -04:00 · 2024-04-09 17:47:09 -04:00 · 2024-04-09 17:43:06 -04:00
19 changed files with 304 additions and 7 deletions
--- a/README.md
+++ b/README.md
@ -1,6 +1,12 @@
-# Forum App with FastAPI
-Model is after 4chan
+# Singleboard Forum
+A 4ch ripoff, coded as an exercise in learning full stack development with React
+and FastAPI.

-Board: has threads, unique counter for posts
-Thread: Collection of related posts
-Post: post_id, thread_id, title, content
+## Demo
+Start the Docker containers:
+```
+docker compose up -d
+```
+
+Interact with the backend API to add some posts by browsing to http://localhost:8000/docs,
+then browse to the frontend at http://localhost:3000.
--- a/backend/main.py
+++ b/backend/main.py
@ -1,4 +1,5 @@
 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware

 import models
 from database import engine
@ -6,6 +7,14 @@ from routers import auth, forum

 app = FastAPI()

+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=['*'],
+    allow_credentials=False,
+    allow_methods=['GET', 'POST'],
+    allow_headers=['*']
+)
+
 models.Base.metadata.create_all(bind=engine)

 app.include_router(forum.router)
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -7,3 +7,13 @@ services:
    ports:
      - '8000:8000'
    restart: unless-stopped
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - '3000:3000'
+    restart: unless-stopped
+    depends_on:
+      - backend
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1 @@
+.idea/
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -0,0 +1,13 @@
+FROM node:alpine
+
+WORKDIR /app
+COPY ./app/package.json /app/package.json
+RUN npm install
+
+COPY ./app /app
+RUN npm run build
+
+RUN npm install -g serve
+
+EXPOSE 3000
+CMD ["serve", "-s", "--no-clipboard", "build"]
--- a/frontend/README.md
+++ b/frontend/README.md
@ -1,4 +1,22 @@
 # Forum Frontend
-Should be extremely simple to start with no styling.
+The frontend for the forum is written in React.

-Node.js with a nice framework should be the ultimate goal, but could just do simple HTML and JS by hand for now.
+**Note**: Before running, update the `apiUrl` in `app/src/App.js` to point your backend.
+
+## Development
+To start the frontend in development mode and serve on http://localhost:3000:
+```shell
+npm run start
+```
+
+## Production
+```shell
+# Install serve
+npm install -g serve
+
+# Build for production
+npm run build
+
+# Serve
+serve -s --no-clipboard build
+```
--- a/frontend/app/.gitignore
+++ b/frontend/app/.gitignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/frontend/app/package.json
+++ b/frontend/app/package.json
@ -0,0 +1,40 @@
+{
+  "name": "forum",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
+    "bulma": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/frontend/app/public/favicon.ico
+++ b/frontend/app/public/favicon.ico
--- a/frontend/app/public/index.html
+++ b/frontend/app/public/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/frontend/app/public/logo192.png
+++ b/frontend/app/public/logo192.png
--- a/frontend/app/public/logo512.png
+++ b/frontend/app/public/logo512.png
--- a/frontend/app/public/manifest.json
+++ b/frontend/app/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/frontend/app/public/robots.txt
+++ b/frontend/app/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/frontend/app/src/App.js
+++ b/frontend/app/src/App.js
@ -0,0 +1,43 @@
+import 'bulma/css/bulma.css'
+import {useEffect, useState} from "react";
+import axios from "axios";
+import PostList from "./components/Post/PostList";
+
+const apiUrl = "http://localhost:8000";
+
+function App() {
+    const [postList, setPostsList] = useState([]);
+
+    const fetchPosts = async () => {
+        await axios.get(apiUrl + "/catalog")
+        .then((response) => { setPostsList(response.data)})
+    }
+
+    useEffect(() => {
+        fetchPosts();
+    }, []);
+
+    async function handleClickRefresh() {
+        await fetchPosts();
+    }
+
+    return (
+        <>
+            <div className="container">
+                <section className="hero is-info">
+                    <div className="hero-body">
+                        <p className="title">Singleboard Forum App</p>
+                    </div>
+                </section>
+                <div className="section">
+                    <div className="container" style={{marginBottom: "50px"}}>
+                        <button className="button" onClick={handleClickRefresh}>Refresh Posts</button>
+                    </div>
+                    <PostList posts={postList}/>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default App;
--- a/frontend/app/src/components/Post/PostList.js
+++ b/frontend/app/src/components/Post/PostList.js
@ -0,0 +1,19 @@
+import PostShow from "./PostShow";
+
+function PostList({posts}) {
+    const renderedPosts = posts.map((post, key) => {
+        return <PostShow title={post.title} content={post.content} key={key}/>
+    })
+
+    return (
+        <>
+            <div className="container">
+                <div className="columns is-multiline">
+                    {renderedPosts}
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default PostList
--- a/frontend/app/src/components/Post/PostShow.js
+++ b/frontend/app/src/components/Post/PostShow.js
@ -0,0 +1,14 @@
+function PostShow({title, content, post_id}) {
+    return (
+        <>
+            <div className="column is-4">
+                <h1 className="is-size-5 has-text-weight-bold">{title}</h1>
+                <p>{content}</p>
+                <br />
+                <p className="is-italic">0 replies</p>
+            </div>
+        </>
+    );
+}
+
+export default PostShow;
--- a/frontend/app/src/index.js
+++ b/frontend/app/src/index.js
@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom/client"
+import App from "./App";
+
+const el = document.getElementById("root");
+const root = ReactDOM.createRoot(el)
+
+root.render(<App />)
--- a/frontend/conf/nginx.conf
+++ b/frontend/conf/nginx.conf
@ -0,0 +1,22 @@
+events {
+    worker_connections  1024;
+}
+
+http {
+    server {
+        listen 8000 default_server;
+        listen [::]:8000 default_server;
+
+        root /app;
+        index index.html;
+        server_name _;
+
+        location / {
+            try_files $uri $uri/ =404;
+        }
+
+        location /api {
+            proxy_pass http://backend:8000/;
+        }
+    }
+}
Author	SHA1	Message	Date
agatha	d1a6b17920	update README.md	2024-04-09 18:02:32 -04:00
agatha	7cf8cef8cf	update docker compose	2024-04-09 17:53:50 -04:00
agatha	1c4fd23e76	update README.md	2024-04-09 17:51:12 -04:00
agatha	dc67c7eb10	use variable for api base url	2024-04-09 17:50:06 -04:00
agatha	82bd76618c	update frontend README.md	2024-04-09 17:47:09 -04:00
agatha	b0027575b6	Finish merge	2024-04-09 17:43:06 -04:00
agatha	9d9bce9caa	remove nginx	2024-04-09 17:37:24 -04:00
agatha	a92975961d	add missing public/ directory	2024-04-09 17:37:05 -04:00
agatha	1c362d163d	add react frontend	2024-04-09 17:21:59 -04:00
agatha	e481968ab2	remove frontend for rewrite	2024-04-09 17:19:46 -04:00
agatha	c3a88e187f	display threads (poorly)	2024-04-06 18:54:20 -04:00
agatha	3e9f97e0e0	add cors middleware	2024-04-06 18:29:56 -04:00
agatha	ebea9faabf	add jquery (broken)	2024-04-06 18:14:17 -04:00
agatha	221dbba3be	remove location /api/ from nginx.conf	2024-04-06 17:57:44 -04:00
agatha	db4ea90a99	update docker-compose.yml	2024-04-06 17:50:34 -04:00
agatha	8f2d6b1613	add Dockerfile and nginx configuration	2024-04-06 17:50:21 -04:00
agatha	45c7886090	refactor: create src directory	2024-04-06 17:27:23 -04:00
agatha	327f8e4964	ignore .idea	2024-04-06 17:15:57 -04:00
agatha	e79f2840d7	Merge branch 'dev' of git.juggalol.com:agatha/forum-app into dev	2024-04-06 15:57:53 -04:00
agatha	2db6e18d5b	feat: add authentication for administration (#2 ) Reviewed-on: #2 Co-authored-by: agatha <agatha@juggalol.com> Co-committed-by: agatha <agatha@juggalol.com>	2024-04-06 19:56:48 +00:00
agatha	42ee9326ae	chore: remove unused import	2024-04-06 13:33:44 -04:00