Skip to content

5xRuby-12th-RubyJoy/RubyJoy

Repository files navigation

RubyJoy - 收禮的人開心,送禮的人省心


RubyJoy home page



專案介紹 - Overview

本專案以 Ruby 版本 3.1.2;Rails 6.1.7 進行開發


RubyJoy 是一個結合活動頁面、個人募資、站內商城的平台

身為「送」禮者,是否常在好友生日、小孩周歲時不知道要送什麼?
身為「收」禮者,是否常收到自己不那麼喜歡的禮物?
每次都在猶豫「我送這個禮物、這個金額會不會不夠誠意?」

在 RubyJoy 這個平台,你只需要:

註冊帳號 → 建立活動 → 挑選禮物 → 分享活動連結給朋友,等待願望實現!

輕鬆幫你解決活動頁面建立以及禮物清單的煩惱!

專案介紹影片:https://www.youtube.com/watch?v=HYIGw6shoC0

We used Ruby version 3.1.2;Rails version 6.1.7 for the development


RubyJoy is a website that combines event pages, personal fundraising, and an online store.
Imagine this:

As gift givers, do we often wonder about what to give on birthdays and baby showers?
As recipients, do we often receive gifts that we don't really like?

Now you have RubyJoy to solve this problem, you just need to: Register an account → Create an event → Pick a gift → Share the link to the event page with your friends and family and let them pay for it!

Easily help you out with the troubles of creating an event page and gift listing!

Project Introduction Video:https://www.youtube.com/watch?v=HYIGw6shoC0


核心功能介紹 - Core functions


1. 第三方金流 - Third-party payment

透過第三方金流,使用者的付款資訊不會留存在平台,同一透過安全的第三方處理快速的付款流程
The payment process is safely dealt with the third-party payment platform, so that user's payment information will not be stored in RubyJoy's database.

RubyJoy home page



2. 店家訂單管理介面 - Order management interface for vendor role

註冊店家角色的使用者,可以透過訂單管理頁面輕鬆查閱訂單狀態、訂單編號及收件人相關資訊,輕鬆出貨!
For vendor role in RubyJoy, You'll have a interface that you can easily manage the orders and check the status of the orders.


RubyJoy home page





3. 加禮物功能 - Add the products you like to the wishlist

使用者可以輕鬆透過加禮物按鈕將喜歡的禮物加入自己活動的許願清單
Users can easily add the products they like to the wishlist of the event page


RubyJoy home page




4. 寄信功能 - E-mail notification after the purchase

在送禮人結帳過後,會收到一封成功結帳的通知信,活動創辦人也會收到一封禮物被他人購買的通知信
After the purchase of the gift is done, gift givers will receive an e-mail informing them that the purchase and order are placed successfully. So do the recipients, they'll get e-mail information that tells them which gift on his/her wishlist is purchased.


( 活動主辦人收到的信件 - The e-mail that recipients will receive)

RubyJoy home page




( 送禮人收到的信件 - The e-mail that gift givers will receive)
RubyJoy home page



5. 一鍵複製、快速分享 - Easy copy, easy share

活動創辦人可以輕鬆點擊活動頁面上的一鍵複製活動連結按鈕,輕鬆複製活動頁面連結並透過社群媒體的群發功能分享活動頁面給他的朋友
Event holders can copy the link of their event page and share it through the social media apps.


RubyJoy home page




6. 模糊搜尋功能 - Easy search

隨著店家的逐漸增加,活動創辦人可以透過模糊搜尋功能,透過店名的關鍵字更快速的找到心儀的商店
Event holders can find the stores they prefer more easily via the search bar

RubyJoy home page




如何使用該專案 - Get started

步驟 1:安裝專案 - Clone the project

執行 $ bundle installRun $ bundle install
執行 $ yarn/npm installRun $ yarn/npm intall


步驟 2:建立資料庫 - Build the database

執行 $ rails db:createRun $ rails db:create
執行 $ rails db:migrateRun $ rails db:migrate


步驟 3:加入所需環境變數 - Fill up the ENV variables refer to the .env.example

Ps. 所需環境變數 - The env variables you'll need:
第三方金流(Third-party payment)、AWS S3、Google 第三方登入(Google third-party login)、Mailgun

步驟 4:啟動伺服器 - Start the server ( localhost:3000 )

執行 $ foreman sRun $ foreman s


RubyJoy 開發技術 - Develop & Tools, Dependencies

前端 - Frontend:HTML5、 CSS3、 Tailwindcss、 JavaScript、 Stimulus.js
後端 - Backend:Ruby、 Ruby on Rails
資料庫 - Database:PosgreSQL
圖片上傳 - Image upload and storage:AWS S3
部署 - Deployment:Heroku、GoDaddy、CloudFlare
寄信功能- e-mail notification:Mailgun
版本控制 - Version control:Git、GitHub
協同工具 - Collaboration tool:Figma( Flowchart)、DrawSQL ( Entity–relationship diagram)
第三方金流 - Third-party payment:藍新金流( NewebPay)

組員分工 - Members

吳家瑋

  • PosgreSQL 資料庫 - replace SQLite 3 to PosgreSQL
  • 搜尋功能 - Searching function
  • 串接 AWS S3 - Concatenates AWS S3
  • 商店、商品 CRUD - Store, Product CRUD
  • 藍新金流串接 - Concatenates NewebPay
  • Race condition 處理 - Solved race condition
  • Google 第三方登入 - Third-party login ( Google )

GitHub: Click me!
Email: [email protected]

謝政庭 - Dino

  • 商店、商品 CRUD - Store, Product CRUD
  • 商店、商品前端 RWD - Store, Product RWD
  • 路徑優化 - Routes optimization
  • 商店訂單查詢功能 - Order management function & interface ( UI )
  • ER圖、Flowchart - Entity–relationship diagram & Flowchart
  • 寄信功能 - Mailing function

GitHub: Click me!
Email: [email protected]

陳廷偉

  • 前端視覺設計 - UI design
  • 前端資料驗證 - Fronted validation
  • 活動 CRUD - Event CRUD
  • 前端 RWD - Frontend RWD
  • 一鍵複製活動頁面功能 - Copy function
  • SEO 優化、無障礙優化 - SEO optimization, Web accessibility optimization

GitHub: Click me!
Email: [email protected]

陳僅恩 - Elijah

  • 專案部署及自定義網址DNS轉向 - Project deployment, customized domain name ,DNS settings
  • 會員系統 - Member function ( enum, Vendor & User)
  • 前端 RWD 切版&UX 設計 - Frontend RWD & UX design
  • i18n 訊息中文化 - i18n ( from En to zh-tw)
  • ER圖、Flowchart - Entity–relationship diagram & Flowchart
  • 會員活動加禮物功能( 前後端API串接 ) - Add gift function ( Frontend & Backend API fetching)

GitHub: Click me!
Email: [email protected]