Skip to content

Latest commit

 

History

History
190 lines (129 loc) · 5.18 KB

README.md

File metadata and controls

190 lines (129 loc) · 5.18 KB
Raw

TL;DR

  1. git clone https://github.com/ueewbdy93/wedding-screen.git && cd wedding-screen && git submodule update --init
  2. Build backend: cp src/config.sample.ts src/config.ts && npm install && npm run build
  3. Build frontend: npm install --prefix frontend/ && npm run build --prefix frontend/
  4. Start server: npm run start
  5. Now you can browse the service with your favorite browser at http://localhost:5566 as user and, http://localhost:5566/admin-index.html (password: happy) as admin.

Demo

About

A wedding activity web app implemented by a happy programmer couple dy93 and ueewbd ❤️.

There are two modes and a admin page

  1. slideshow mode:

    Users can see wedding pictures and leave bullet comments.

  2. game mode:

    This mode was inspired by Kahoot!. Since Kahoot does not show full description of options on users' phone and it's a requirement for us. We decided to implement this game service by ourselves.

  3. admin page:

    Admin can switch between modes and control the game state.

The whole web app consists of two projects: wedding-screen and wedding-screen-frontend. The former is responsible for back-end and the other is for front-end. We manage wedding-screen-frontend as a git submodule of wedding-screen.

Prerequisite

  • Nodejs 10

Start

  1. Clone the project from github.

    git clone https://github.com/ueewbdy93/wedding-screen.git

  2. cd into project folder.

    cd wedding-screen

  3. Install dependency.

    npm install

  4. Set up configurations.

    cp src/config.sample.ts src/config.ts

  5. Compile typescript into javascript.

    npm run build

Now, the back-end work is done. Follow the steps below to prepare front-end.

  1. Check out wedding-screen-frontend.

    git submodule update --init

  2. cd into frontend folder.

    cd frontend

  3. Install dependency of wedding-screen-frontend.

    npm install

  4. Build code.

    npm run build

  5. Start server.

    cd ../
npm run start

OK! Now you can visit http://localhost:5566 to watch slideshow or play game.

Visit http://localhost:5566/admin-index.html and login(default password:happy) to control the state.

Config

Edit wedding-screen/src/config.ts (If not exists, copy from wedding-screen/src/config.sample.ts), see config.sample.ts for more detail.

property description
admin.password Admin login password.
slide.intervalMs Slideshow interval.
slide.urls Paths of slideshow pictures, auto generate by scanning wedding-screen/public/images/*.jpg
game.intervalMs Answer time
game.questions Array of questions.
The format of question:
{ text: <string>, options: [<string>], answer: <string>}

How to develop

Back-end

  1. Compile typescript in watch mode: npm run build -- --watch
  2. Modify the code under src
  3. Whenever you modify the code, restart the server

Front-end

wedding-screen-frontend is a submodule of wedding-screen and link to frontend/ folder.

The project is initiated by create-react-app (CRA). Base on CRA, we integrated it with redux, redux-thunk, websocket, css-module and storybook(for test).

We ejected CRA configurations and made some changes:

  1. Allow multiple entry points. One for user page the other for admin page.
  2. Enable css module.

Followings are the steps to develop.

  1. Run the back-end server

    cd wedding-screen
npm run start

    Although CRA will run webpack-dev-server to host static files in development mode. However, we need to connect to back-end server to deal with actions (ex: add comment). We proxy some uris (/socket, /images/ and /resources/) to the back-end server. See Proxy API Requests in Development.

  2. cd into frontend/

  3. Modify code under frontend/src/ to meet your need.

  4. Runs the app in development mode.

    npm run start

    This command will open http://localhost:3000 in browser. And page will automatically reload if you make changes to the code.

Test

Back-end

dy93: You barely have errors when you are writing typescript.

Front-end

To be fix.

We use storybook to have a quick demo of react components.

Just run npm run storybook and visit http://localhost:9009.

Component coverage

[x] slideshow
[x] game/score
[ ] game/final
[ ] game/joinList
[ ] game/qa
[ ] game/nameInput
[ ] adm