Update README.md (#130)

* Create `.env.example` for backend

* Create `.env.example` for frontend

* Add development mode value in `.env.example`

* Update README.md

* Update README.md

* Update README.md

README.md

@@ -1,9 +1,17 @@
 # CodePair
 
+<p align="center">
+Build your own AI real-time collaborative markdown editor in just 5 minutes.
+</p>
+
+<p align="center">
+    <a href="https://codepair.yorkie.dev/"><b>Website</b></a> •
+    <a href="https://discord.com/invite/MVEAwz9sBy"><b>Discord</b></a>
+</p>
+
 <img width="1392" alt="스크린샷 2024-02-02 오후 4 35 29" src="https://github.com/yorkie-team/codepair-poc/assets/52884648/25c441ef-9ca4-4235-9969-279e1c56258b">
 
 
-Build your own AI real-time collaborative markdown editor in just 5 minutes.
 
 ## Overview
 
@@ -15,56 +23,58 @@ CodePair provides the following features:
 - **Sharing Document**: Share documents with external parties by setting permissions and expiration time
 - **Yorkie Intelligence**: AI intelligence available within the collaborative editing editor
 
-## Getting Started (Development Mode)
+## Getting Started with Development
 
 ### Configuration and Setup
 
-Before running the Frontend and Backend applications, you need to fill in the required API Keys.
-
+Before running the Frontend and Backend applications, you need to fill in the required API Keys.  
 Follow these steps:
 
 **Frontend Environment Configuration**
 
 1. Navigate to the `frontend` directory.
 
-   ```
+   ```bash
    cd frontend
    ```
-2. Fill in each Key field with the appropriate value in `.env.development`. Refer to the following links to obtain the necessary Key values.
-   - [Create Yorkie Project](https://yorkie.dev/)
+2. Copy the `.env.example` file to create a `.env.development` file.
+   ```bash
+   cp .env.example .env.development
+   ```
+3. Edit the `.env.development` file and fill in the necessary environment variable values. Refer to the comments for the meaning and examples of each value.
 
 **Backend Environment Configuration**
 
-1. Navigate to the `backend` directory.
+1. Navigate to the `frontend` directory.
 
-   ```
+   ```bash
    cd backend
    ```
-2. Fill in each Key field with the appropriate value in `.env`. Refer to the following links to obtain the necessary Key values.
-   - [Create Yorkie Project](https://yorkie.dev/)
-   - [Create GitHub OAuth App](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)
-   - [Create OpenAI API Key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-api-key)
-   - [Create LangSmith API Key](https://www.langchain.com/langsmith)
-
+2. Copy the `.env.example` file to create a `.env.development` file.
+   ```bash
+   cp .env.example .env.development
+   ```
+3. Edit the `.env.development` file and fill in the necessary environment variable values. Refer to the comments for the meaning and examples of each value.
+   
 ### Run Application
 
 1. Run the Dockerfile for MongoDB, the database used by CodePair:
 
-    ```
+    ```bash
     docker-compose up -f ./backend/docker/mongodb_replica/docker-compose.yml -d
     ```
 
 2. Run the Backend application:
 
-    ```
+    ```bash
     cd backend
     npm install
     npm run start:dev
     ```
 
 3. Run the Frontend application:
 
-    ```
+    ```bash
     cd frontend
     npm install
     npm run dev
@@ -77,5 +87,5 @@ Follow these steps:
 Thanks goes to these incredible people:
 
 <a href="https://github.com/yorkie-team/codepair/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=yorkie-team/codepair-poc" />
+  <img src="https://contrib.rocks/image?repo=yorkie-team/codepair" />
 </a>

backend/.env.example

@@ -0,0 +1,61 @@
+# This file serves as a template for configuring environment variables.
+# Copy this file to `.env` and fill in the necessary values.
+
+# DATABASE_URL: URL for connecting to the database.
+# Format: mongodb://<username>:<password>@<host>:<port>/<database>
+# Example: mongodb://localhost:27017/codepair (For development mode)
+DATABASE_URL=your_mongodb_database_url_here
+
+# GITHUB_CLIENT_ID: Client ID for authenticating with GitHub.
+# To obtain a client ID, create an OAuth app at: https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app
+GITHUB_CLIENT_ID=your_github_client_id_here
+# GITHUB_CLIENT_SECRET: Client secret for authenticating with GitHub.
+# To obtain a client ID, create an OAuth app at: https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app
+GITHUB_CLIENT_SECRET=your_github_client_secret_here
+# GITHUB_CALLBACK_URL: Callback URL for handling GitHub authentication response.
+# Format: https://<backend_url>/auth/github/callback
+# Example: http://localhost:3000/auth/github/callback (For development mode)
+GITHUB_CALLBACK_URL=your_github_callback_url_here
+
+# JWT_AUTH_SECRET: Secret key for JWT authentication.
+# This key is used to sign and verify JWT tokens.
+JWT_AUTH_SECRET=your_jwt_auth_secret_here
+
+# FRONTEND_BASE_URL: Base URL of the frontend application.
+# This URL is used for redirecting after authentication, etc.
+# Example: http://localhost:5173 (For development mode)
+FRONTEND_BASE_URL=your_frontend_base_url_here
+
+
+# YORKIE_API_ADDR: URL of the Yorkie Server
+# This URL is used for using collaborative editing CRDT server
+# Example: https://api.yorkie.dev (For development mode)
+YORKIE_API_ADDR=your_yorkie_api_addr_here
+# YORKIE_PROJECT_NAME: Name of the Yorkie project
+# Create Yorkie project at: https://yorkie.dev
+YORKIE_PROJECT_NAME=your_yorkie_project_name_here
+# YORKIE_PROJECT_SECRET_KEY: Secret key of the Yorkie project
+# To obtain a project secret key, visit your project dashboard: https://yorkie.dev/dashboard/projects
+YORKIE_PROJECT_SECRET_KEY=your_yorkie_project_secret_key_here
+
+# OPENAI_API_KEY: API key for using the gpt-3.5-turbo model by Yorkie Intelligence.
+# To obtain an API key, visit OpenAI: https://help.openai.com/en/articles/4936850-where-do-i-find-my-api-key
+OPENAI_API_KEY=your_openai_api_key_here
+
+# LANGCHAIN_TRACING_V2: Whether LangSmith monitoring for YorkieIntelligence is needed.
+# Set to true if LangSmith monitoring is required.
+# If set to false, LANGCHAIN_ENDPOINT, LANGCHAIN_API_KEY, and LANGCHAIN_PROJECT are not required.
+LANGCHAIN_TRACING_V2=true
+# LANGCHAIN_ENDPOINT: LangSmith API URL.
+# This URL is used to communicate with LangSmith.
+# Example: https://api.smith.langchain.com
+# To obtain the LangSmith endpoint, visit LangSmith: https://www.langchain.com/langsmith
+LANGCHAIN_ENDPOINT=your_langsmith_api_key_here
+# LANGCHAIN_API_KEY: LangSmith API Key.
+# This key is required for authenticating with LangSmith.
+# To obtain an API key, visit LangSmith: https://www.langchain.com/langsmith
+LANGCHAIN_API_KEY=your_langsmith_api_key_here
+# LANGCHAIN_PROJECT: LangSmith project name.
+# This is the name of the project created within LangSmith.
+# To create a LangSmith project, visit LangSmith: https://www.langchain.com/langsmith
+LANGCHAIN_PROJECT=your_langsmith_project_name_here

frontend/.env.example

@@ -0,0 +1,15 @@
+# This file serves as a template for configuring environment variables.
+# Copy this file to `.env` and fill in the necessary values.
+
+# VITE_API_ADDR: URL of backend application
+# This URL is used for backend API
+# Example: http://localhost:3000 (For development mode)
+VITE_API_ADDR=your_api_addr_here
+
+# YORKIE_API_ADDR: URL of the Yorkie Server
+# This URL is used for using collaborative editing CRDT server
+# Example: https://api.yorkie.dev (For development mode)
+VITE_YORKIE_API_ADDR=your_yorkie_api_addr_here
+# VITE_YORKIE_API_KEY: API key of the Yorkie project
+# To obtain a API key, visit your project dashboard: https://yorkie.dev/dashboard/projects
+VITE_YORKIE_API_KEY=your_yorkie_api_key_here