Giter Club home page Giter Club logo

wedding's Introduction

Wedding

I archived this project as I don't plan to update it anymore. It should still work until the stripe API it relies on gets deprecated.

A wedding website with a full-featured wedding list using Stripe for payments.

Dev Quickstart

Install docker and docker-compose.

Setup

Clone this repo and cd into it.
For a debian-like host:

# Install dependencies
sudo apt install -y nodejs npm wget unzip
sudo npm install -g pug-cli sass
wget --no-clobber -P static/ \
  https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js \
  https://code.jquery.com/jquery-3.4.1.slim.min.js \
  https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
wget https://github.com/twbs/bootstrap/archive/v4.4.1.zip \
  && unzip v4.4.1.zip \
  && rm v4.4.1.zip

# Populate custom content
cp vars.example.pug vars.pug
cp templates/about-us-content.example.pug templates/about-us-content.pug
cp backend/db/wedding-list.example.csv backend/db/wedding-list.csv
cp static/img/about-us.example.jpg static/img/about-us.jpg
cp static/img/about-us/1.example.jpg static/img/about-us/1.jpg
cp secrets.example.env secrets.env  
./dl_wl_imgs.py

Set your secrets in secrets.env (use your test apikeys).
Also set STRIPE_PUBLIC_KEY in vars.pug.

Run the dev server

Run the 3 following commands in 3 different shells.

docker-compose up
pug --pretty --watch templates --out static
sass --watch --no-source-map templates:static 

Go to http://localhost:8080/

Testing

In order to check the stripe webhook (contributions progress bar), follow those steps:

  1. Install the stripe cli.
  2. Run stripe listen --skip-verify --forward-to localhost:8080/api/stripe-webhook in a terminal.
  3. Set your STRIPE_WEBHOOK_SECRET_KEY in secrets.env.
  4. Reload the server (kill and re-run docker-compose up).

Simulate an event stripe trigger checkout.session.completed, reload the weddinf list, check backend/db/contributions.json. You can also use the credit card 4242 4242 4242 4242, any future date and any 3 digit CVC.

Customize

Set general content is in vars.pug.
Go to templates/wedding.scss to change the main color.
Change images in static/img/.
Images in about us must be named 1.jpg, 2.jpg, etc. and you must set the sum in vars.pug.
Update the date in templates/components/countdown.js for an accurate countdown.
Setup payment branding.

Wedding list

โš ๏ธ Avoid deleting/renaming existing items as it will mess up the contributions count. Use image URLs in the form http://xxx.com/xxx.jpg as much as possible.

Make your wedding list spreadsheet at backend/db/wedding-list.csv. You can also download a Google Sheet.
It must follow the format of backend/db/wedding-list.example.csv, the first line is ignored.
Download your wedding list images by running ./dl_wl_imgs.py.

You can access contributor names, amount and associated messages in the payment tab of your stripe dashboard.

Deploy in production

You can deploy on a bare server from any provider (OVH, Hetzner, scaleway, etc.) or deploy containers on fly.io directly (free and setup TLS for you).
If you feel adventurous you can also deploy on your home server. In any case, set your stripe webhook.
๐Ÿ’ก Advice: make regular backups the /db/ of API.

On a bare server

Update secrets.env with your live keys.
On your server, copy backend/ and static/.
Setup TLS (you can use Let's Encrypt cets) and https in nginx conf.
See docker-compose.prod.yml for a prod-ready example.

Using fly.io

  1. Create an account, launch 2 apps, one from the root, one from backend/.
  2. Update proxy_pass for the API with your app name in nginx.conf.
  3. In the backend app, avoid exposing the API directly by removing the services.ports sections in your fly.toml.
  4. Add secrets to the fly app corresponding to the API cat secrets.env | flyctl secrets import.
  5. Set custom envs for the API (see docker-compose.yml), update WEBSITE_HOST, add SKIP_WL_CHECK (needed before we copy the wedding list on the volume in the next step).
  6. Make a volume the /db/ volume for the API, mount it and copy wedding-list.csv to it as necessary.
  7. Remove SKIP_WL_CHECK and restart the API.
    As the wedding list gets updated, don't forget to run ./dl_wl_imgs.py and to fly deploy the nginx proxy.

โš ๏ธ Always copy wedding-list.csv only as you may lose contributions.json if you copy db/ entirely.

wedding's People

Contributors

henritel avatar

Watchers

 avatar  avatar

wedding's Issues

[Wedding list] Rely on the stripe API to get in sync with contributions

Context: the wedding list API append contributions as they arrive to the contributions.json file and use it on startup to get up to date with what remains to be paid for each item.

Problem: it makes the API container require a persistent volume and this one little file is a single point of failure.

Solution: Use the stripe API as the single source of truth and get rid of contributions.json and SKIP_WL_CHECK.

Bonus: Add a web-hook route for reimbursements and update contributions accordingly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.