README_en.md

CloverFeed

The service that allows to find your business strengths through anonymous feedback from colleagues!

Make and share your own feedback form to your colleagues and get honest feedbacks! 👀

한국어 버전

🖱️Production

https://cloverfeed.kr/

⭐️ Medium

🇺🇸 CloverFeed.Eng
🇰🇷 CloverFeed.Kor

📋 Features

Sign up and login	Create question form

Submit feedback answer	Read feedback result

📌 System Architecture

📚 Tech Stack

Area	Tech Stack
Fronted
Backend
AI
DevOps
etc

Frontend

React Vite TypeScript

We developed the pages as a Single Page Application (SPA) using React. React lets us to allow the creation of highly readable code, modularization through a component-based structure, and efficient user interface development with performance optimization using virtual DOM.

We utilized TypeScript as the frontend development language. TypeScript is a statically typed language that was developed to solve problems caused by JavaScript being a dynamic language. It brings advantages such as enhanced code stability through static type checking and improved maintainability. This has facilitated smoother collaboration among team members.

We chose Vite as the bundler. Vite is an ESModule-based bundler that allows for faster builds and testing compared to traditional Webpack. This has increased development productivity significantly.

We used Tailwind CSS as the CSS framework. Tailwind CSS is a utility-first framework based on classes, allowing for quick and efficient styling. By using it, we achieved not only fast and effective styling but also a unified development convention.

Visualization

We visualized anonymous feedback received from colleagues for quick comprehension using charts and word clouds. Tags representing strengths, personality, and attitudes were illustrated in a donut-shaped chart using Chart.js. Additionally, we utilized the react-wordcloud library to visualize word cloud on the main page based on extracted keyword and their frequency in feedbacks.

Recoil

To mitigate the potential performance degradation caused by delays in API responses when adding questions and feedback answers, we implemented global state management using Recoil for question and answer list creation features. Recoil is a library that allows storing and managing state outside of components, enabling multiple components to globally share a single state. Each addition of a question or answer updates the question list and answer list defined in the Recoil Atom. Thanks to this structure, we improved usability on the question and answer writing pages by adopting a method that collects and communicates with the backend once when finalizing the question form or feedback answer.

Backend

Django REST Framework

We opted for Django, a Python-based web framework known for high productivity and stability due to its powerful ORM, security features, and rich functionality. also Its lets us seamless integration with ChatGPT and the addition of NLP features Because it is written in Python, which is widely used in AI.

Database

For data management, we utilized MySQL as the Database Management System (DBMS), an open-source relational database management system (RDBMS) with proven high stability and scalability that supports standard SQL.

DevOps

Docker

By containerizing the application using Docker, we achieved consistency in the development environment. This not only simplified environment configuration but also facilitated rapid deployment, management, and enhanced portability.

HTTPS

We obtained an SSL certificate and applied HTTPS to ensure the integrity of the website.

🔐 ERD Design

📈 API(swagger)

🛠 Installation

How to start the server

Prerequisites

• OpenAI secret key (Go to get it issued (cost may apply))

1. Install Docker to your system
2. Run the shell command as shown below

$ git clone https://github.com/2023WinterBootCamp-Team-L/CloverFeed.git

3. Make and write .env file in right directory

• /.env (same as the directory of docker-compose.yml)

MYSQL_ROOT_PASSWORD=(write the MySQL root password you want)
MYSQL_DATABASE=cloverfeed
MYSQL_USER=user
MYSQL_PASSWORD=(write the MySQL root password you want)

• /backend/config/.env

DB_NAME=cloverfeed
DB_USER=root
DB_PASSWORD=(write the MySQL root password same as in .env file above)
DB_HOST=mysql
DB_PORT=3306
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://frontend:5173,http://localhost:5173,http://127.0.0.1:5174,http://frontend:5174,http://localhost:5174,http://127.0.0.1:80,http://frontend:80,http://localhost:80,http://127.0.0.1,http://frontend,http://localhost,http://localhost:8000
ALLOWED_HOSTS=backend,localhost,127.0.0.1
OPENAI_KEY=(write your OpenAI secret key here)

4. Run the shell command as shown below

$ cd project
$ docker compose up -d --build

5. Check to Docker Container running well from Docker Desktop.
6. Select the backend container in Docker Desktop, then check your django secret key. (how to check)
7. add your django secret key in .env file.

• /backend/config/.env

DB_NAME=cloverfeed
DB_USER=root
DB_PASSWORD=(write the MySQL root password same as in .env file above)
DB_HOST=mysql
DB_PORT=3306
SECRET_KEY=django-insecure-(write your django secret key here)
CORS_ORIGIN_WHITELIST=http://127.0.0.1:5173,http://frontend:5173,http://localhost:5173,http://127.0.0.1:5174,http://frontend:5174,http://localhost:5174,http://127.0.0.1:80,http://frontend:80,http://localhost:80,http://127.0.0.1,http://frontend,http://localhost,http://localhost:8000
ALLOWED_HOSTS=backend,localhost,127.0.0.1
OPENAI_KEY=(write your OpenAI secret key here)

8. Run the shell command as shown below

$ docker compose up -d --build

9. Check to Docker Container running well from Docker Desktop once again.
10. Run the shell command as shown below

$ cd frontend
$ yarn
$ yarn dev

11. go to 'localhost:5173' in your web browser. then enjoy!

---

👨‍👩‍👧‍👦 Members

Pictures
Name	Seokkyoo Kang	Sanga Cho	Minjeong Seok	Jieun Kang	Hyeonsu Jung	Hyeonseo Han	Changyeon Lee
Position	Leader Backend DevOps	Backend DevOps	Backend	Frontend	Frontend	Frontend	Frontend
GitHub

Development Period : 26. 12. 2023. ~ 03. 02. 2024.