Create the your own novel is that easy with our MyW. Just select the keyword and write simple plot, then proceed sequentially, and you will get your own novel!
http://www.techeer-team-a.store/
Click to watch the Demo Video
Requirement
- Your own OpenAI secret key (Get your key from here(may incur costs))
- Your own AWS S3 Bucket (Get your AWS S3 Bucket from here(may incur costs))
- Install Docker on your system
- follow the shell command below
$ git clone https://github.com/2023SVBootcamp-Team-A/project.git- make the docker-compose.yml file and .env file at right location
- .docker-compose.yml
version: "3"
services:
frontend:
container_name: frontend
build:
context: ./frontend
dockerfile: Dockerfile.dev
ports:
- 5173:5173
stdin_open: true
volumes:
- ./frontend/:/frontend
- /frontend/node_modules
tty: true
environment:
- NODE_ENV=development
- CHOKIDAR_USEPOLLING=true
db:
image: postgres
environment:
- POSTGRES_USER=myuser
- POSTGRES_PASSWORD=mypassword
- POSTGRES_DB=mydatabase
pgadmin:
image: dpage/pgadmin4
environment:
- PGADMIN_DEFAULT_EMAIL=admin@makeyourworld.com
- PGADMIN_DEFAULT_PASSWORD=password
ports:
- "8080:80"
web:
build:
context: ./backend
dockerfile: Dockerfile
volumes:
- ./backend:/backend/
ports:
- "8000:8000"
depends_on:
- db
container_name: backend
environment:
- DJANGO_DEBUG=True
- /.env (Directory where docker-compose.yml is located)
DEBUG=True
GF_USER=team-a
GF_PASSWORD=team-a
- /backend/config/.env
OPENAI_SECRET_KEY=(input your OpenAI secret key here)
DEBUG=True
DB_ENGINE=django.db.backends.postgresql
DB_NAME=mydatabase
DB_USER=myuser
DB_PASSWORD=mypassword
DB_HOST=db
DB_PORT=5432
AWS_ACCESS_KEY_ID=(input your AWS access key id here)
AWS_SECRET_ACCESS_KEY=(input your AWS secret access key here)
AWS_STORAGE_BUCKET_NAME=(input your AWS S3 Bucket name here)
AWS_S3_REGION_NAME=(input your AWS region name here)
AWS_S3_ENDPOINT_URL=(input your AWS S3 endpoint URL here)
AWS_S3_DOWNLOAD_URL=(input your AWS S3 download URL here)
SECRET_KEY=django-insecure-
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://13.125.48.224:5173,http://frontend:5173,http://13.125.48.224,http://www.techeer-team-a.store,http://www.techeer-team-a.store:5173,http://localhost:5173
ALLOWED_HOSTS=backend,13.125.48.224,www.techeer-team-a.store,techeer-team-a.store,localhost,127.0.0.1
- follow the shell command below
$ cd project
$ docker compose up -d --build- Check the Docker Containers running correctly at Docker Desktop.
- Go to the backend container on Docker Desktop, then get your django secret key. (How to get)
- Add your django secret key to .env file
- /backend/config/.env
OPENAI_SECRET_KEY=(input your OpenAI secret key here)
DEBUG=True
DB_ENGINE=django.db.backends.postgresql
DB_NAME=mydatabase
DB_USER=myuser
DB_PASSWORD=mypassword
DB_HOST=db
DB_PORT=5432
AWS_ACCESS_KEY_ID=(input your AWS access key id here)
AWS_SECRET_ACCESS_KEY=(input your AWS secret access key here)
AWS_STORAGE_BUCKET_NAME=(input your AWS S3 Bucket name here)
AWS_S3_REGION_NAME=(input your AWS region name here)
AWS_S3_ENDPOINT_URL=(input your AWS S3 endpoint URL here)
AWS_S3_DOWNLOAD_URL=(input your AWS S3 download URL here)
SECRET_KEY=django-insecure-(input your django secret key here)
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://13.125.48.224:5173,http://frontend:5173,http://13.125.48.224,http://www.techeer-team-a.store,http://www.techeer-team-a.store:5173,http://localhost:5173
ALLOWED_HOSTS=backend,13.125.48.224,www.techeer-team-a.store,techeer-team-a.store,localhost,127.0.0.1
- follow the shell command below
$ docker compose up -d --build- Check the Docker Containers running correctly at Docker Desktop once again.
- Access to 'localhost:5173' on your web browser. then, enjoy!
It provides the ability to select the genre, spatial background, historical background, characters, and plot of the novel to be created as desired. In addition to the built-in options, users can freely add genres, spaces, and eras of they want.
Create a novel with the story you want by repeating progression and selection. You can continue by choosing one of the options provided, or you can end the writing at any point and go to the results page.
The completed novel is expressed in a UI similar to reading a real book, providing the same experience as reading a novel you created as an e-book.
The novel list written by each user is provided in a UI that can be checked in the form of a bookshelf. Clicking on the book shape will take you to a page confirming the completed content of that novel.
You can also check the entire list of novels written by all users, not just the user himself, through the bookshelf-style UI. You can browse page by page with pagination applied, and similarly, click the book shape to see the completed contents of the novel.
| Area | Tech Stack |
|---|---|
| Frontend |        |
| Backend |      |
| AI |   |
| DevOps |      |
| Monitoring |       |
| etc |         |
We used React framework to make page in SPA (Single Page Application) format. This improves loading speed on the page with only contents that is change which user can enojoy there experience without useless loading delays. And we used TypeScript. TypeScript is static type language that was developed to solve problems caused by JavaScript being a dynamic language. In TypeScript, all variables and functions must be defined with their specific types. This benefit developers with reducing time to search for errors and because it allows to catch error while compiling it reduces the whole process. also We used Vite, a frontend build tool that is similar to Web-pack. With enhancement of native ESBuild Module and using HMR (Hot Module Replacement) Vite can run server more faster than Web-pack by seperating source code and dependency so server can run without bundling whole thing.
With Tailwind CSS, you can apply pre-defined CSS styled by just set the class name on HTML. Therefore, we reduced the time for make naming rules, and documentation about structure. also we made some component without import external CSS file thanks to Tailwind CSS.
We can track error caused by frontend side with Sentry, the frontend error monitoring, and tracking tool. it provides the type of error and where the error occurred in the code. therefore we can reduce the time to find the location of wrong code. also we can check the error quickly by receiving an email notification as soon as an error occurs.
Grafana + Prometheus, ELK
| Django | Node exporter |
|---|---|
| cAdvisor | ELK |
|---|---|
We gather the information about request, response from Django by Prometheus, then it can be visualized by Grafana. By linking Slack and Grafana, a warning notification is sent to Slack when the CPU usage exceeds the set range. also, CAdvisor let us monitor the usage of CPU, memory, and network for each of containers. and we use node exporter to monitor the CPU, Memory, network traffic usage of entire server. Nginx log, time-zone, response code by each site and their ratio can be monitored by ELK Stack.
By building a CI/CD pipeline through Github Actions, code changes can be smoothly reflected on the server.
| Name | Yeonjin Kim | Seokkyoo Kang | Haeun Kim |
|---|---|---|---|
| Profile |  |
 |
|
| Role | Team Leader Frontend, DevOps |
Frontend, DevOps |
Frontend |
| GitHub | @homebdy | @AlgeMoya | @HaeunKim01 |
| Name | Seunguk Lee | Taek Lee | Hyeongchan Im | Youngjin Chae |
|---|---|---|---|---|
| Profile | ||||
| Role | Backend, DevOps |
Backend | Frontend | Backend |
| GitHub | @josephuk77 | @LeeTaek2T | @V2LLAIN | @youngjin516 |