Combine Ideas

Word と Word をランダムに組み合わせるアイデアメーカー

新企画の着想や、アイデア出しに詰まった時に便利です

Demo: https://combine-ideas.onrender.com

画面イメージ

Getting Started

GitHub リポジトリのクローン

git clone git@github.com:strwalk/ideas-combine.git

プロジェクト内への移動
```
cd ideas-combine
```
依存関係のインストール
```
yarn install
```
Auth0 の設定

Auth0にログイン／サインアップし、新規アプリを作成
Regular Web App を選択
Applications > Applications > 作成したアプリを選択 > Settings で下記を設定し保存
- Allowed Callback URLs
  - http://localhost:3000/api/auth/callback
- Allowed Logout URLs
  - http://localhost:3000
- Allowed Web Origins
  - http://localhost:3000

.envファイルの設定

プロジェクト直下に.envを作成
```
touch .env
```

.envに下記を追加

Next.js 関連

NEXT_PUBLIC_BASE_URL="http://localhost:3000"

PostgreSQL 関連

POSTGRES_USE`、POSTGRES_PASSWORD、POSTGRES_DB、POSTGRES_TZ は、任意の値を設定
- POSTGRES_USER の例：user
- POSTGRES_PASSWORD の例：password
- POSTGRES_DB の例：database
- POSTGRES_TZ の例：Asia/Tokyo
DATABASE_URL は、＊1, ＊2 のどちらか片方を追加

POSTGRES_USER=XXXXX
POSTGRES_PASSWORD=XXXXX
POSTGRES_DB=XXXXX
POSTGRES_TZ=XXXXX

# PostgreSQL + アプリ全体を Docker コンテナで起動する場合（＊1）
DATABASE_URL=`postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}?schema=public`

# PostgreSQL のみ Docker コンテナで起動する場合（＊2）
# DATABASE_URL=`postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?schema=public`

Auth0 関連
- Auth0 にログイン > Applications > Applications > 作成したアプリを選択 > Quickstart > Configure the SDK から下記の値を取得
```
AUTH0_SECRET=XXXXX
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL=XXXXX
AUTH0_CLIENT_ID=XXXXX
AUTH0_CLIENT_SECRET=XXXXX
```
- 上記のAUTH0_SECRETはターミナルで下記を実行することで取得可能
```
openssl rand -hex
```

プロジェクトの起動

.envの PostgreSQL 関連で選択したDATABASE_URLに合わせ、下記のいずれかの方法で起動
- PostgreSQL + アプリ全体を Docker コンテナで起動する場合
```
docker compose up -d
```
- PostgreSQL のみ Docker コンテナで起動する場合
```
docker compose -f docker-compose.dev.yml up -d

yarn dev
```

ブラウザで確認

http://localhost:3000 を開く

Features

基本機能（Word のシャッフル）
- Top ページ（http://localhost:3000）を開く
- 「Shuffle」ボタンをクリック
- ランダムに表示される Word の組み合わせから、新たなアイデアが生まれるかも？

その他の機能

気に入ったアイデアの保存
- ログイン後に使用可能な機能
- Top ページ（http://localhost:3000）を開く
- 「Shuffle」ボタンをクリックし、気に入ったアイデアを見つけたら「Save」ボタンをクリック
- 「保存しました」と表示されたら「OK」で閉じる
保存したアイデアの確認
- ログイン後に使用可能な機能
- Top ページ（http://localhost:3000）を開く
- 「Favorites List」ボタンをクリック
- 保存したアイデアが表示される
保存したアイデアの削除
- ログイン後に使用可能な機能
- Top ページ（http://localhost:3000）を開く
- 「Favorites List」ボタンをクリック
- 削除したい行の一番右の削除ボタンをクリック
- 「削除しました」と表示されたら「OK」で閉じる
ログイン
- 画面右上の「Login」ボタンをクリック
- 登録したメールアドレス・パスワードを入力
- 「続ける」ボタンをクリック
- 初めて使用する場合は、先に「サインアップ」が必要
ログアウト
- 画面右上の「Logout」ボタンをクリック
- 注：Logout ボタンが表示されるのは、ログイン済みの時のみ
サインアップ
- 画面右上の「Login」ボタンをクリック
- ログイン画面下部の「サインアップ」の文字をクリック
- メールアドレス・パスワードを入力
- 「続ける」ボタンをクリック

Built With

Next.js - The React Framework for the Web
React - The library for web and native user interfaces
TypeScript - TypeScript is JavaScript with syntax for types
Node.js - Node.js® is an open-source, cross-platform JavaScript runtime environment
Prisma - Next-generation Node.js and TypeScript ORM
PostgreSQL - The World's Most Advanced Open Source Relational Database
Docker - Docker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.
tailwindcss - Rapidly build modern websites without ever leaving your HTML
Auth0 - Secure access for online shoppers But not scammer
render - Render is a unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git

Author

strwalk - https://github.com/strwalk

strwalk / ideas-combine

Combine Ideas

Getting Started

Features

Built With

Author

About

Languages