Skip to content

Commit

Permalink
Port to React (#41)
Browse files Browse the repository at this point in the history
* Initial commit

* Consolidate duplicated money formatting code (#43)

* Ensure feature parity between new `Modal`s and old `popups.js` (#44)

* Add empty admin page (#45)

* Fix Item subtitle

* Revert changing of intentional typo

* Reduce amount of "prop drilling" (#46)

* Use `Context` for item state

* `ItemProvider.js` -> `ItemsProvider.js`

* Use `Context` for modal state

* Remove some unused imports

* Disable submit bit button in info modal if item ended

* Remove unused argument from HomePage

* Add content to admin page (#48)

* Fix GitHub icon in Footer

* Fix some warnings & some small tweaks

* Add table and action buttons to admin page

* Move images (not final location)

* Delete last of old JS

* Edit `items.yml` formatting

* Delete unused `admin.html`

* Correct package name

* Add concurrency fix

* Fix warning

* Fix name and version

* Change concurrency condition

* Update action versions

* Fix workflow

* New workflow

* Maybe fix

* Fix dependency

* Correct build dir

* Fix homepage

* Move images

* Relative homepage

* Try removing homepage

* Fix missing dependency

* Change all paths until better solution found

* Make homepage usable by others

* Rename workflow file and update readme

* Change action to run on push to main
  • Loading branch information
hmellor authored Dec 18, 2023
1 parent 098fddf commit 2b606f1
Show file tree
Hide file tree
Showing 52 changed files with 19,479 additions and 1,291 deletions.
28 changes: 0 additions & 28 deletions .github/workflows/node.js.yml

This file was deleted.

41 changes: 41 additions & 0 deletions .github/workflows/pages.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
name: Deploy to GitHub Pages

on:
push:
branches:
- main

concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '21'
- run: npm install
- run: npm run build
- uses: actions/upload-pages-artifact@v2
with:
path: 'build/'

deploy:
needs: build
# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
permissions:
pages: write # to deploy to Pages
id-token: write # to verify the deployment originates from an appropriate source
# Deploy to the github-pages environment
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
# Specify a runner + deployment step
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v3
120 changes: 18 additions & 102 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,107 +1,23 @@
# -----------------------------------------------------------------
# .gitignore
# Bare Minimum Git
# http://ironco.de/bare-minimum-git/
# ver 20181206
#
# From the root of your project run
# curl -O https://gist.githubusercontent.com/salcode/10017553/raw/.gitignore
# to download this file
#
# This file is tailored for a general web project, it
# is NOT optimized for a WordPress project. See
# https://gist.github.com/salcode/b515f520d3f8207ecd04
# for a WordPress specific .gitignore
#
# This file specifies intentionally untracked files to ignore
# http://git-scm.com/docs/gitignore
#
# NOTES:
# The purpose of gitignore files is to ensure that certain files not
# tracked by Git remain untracked.
#
# To ignore uncommitted changes in a file that is already tracked,
# use `git update-index --assume-unchanged`.
#
# To stop tracking a file that is currently tracked,
# use `git rm --cached`
#
# Change Log:
# 20190705 ignore private/secret files
# 20181206 remove trailing whitespaces
# 20180714 unignore .phpcs.xml.dist
# 20170502 unignore composer.lock
# 20170502 ignore components loaded via Bower
# 20150326 ignore jekyll build directory `/_site`
# 20150324 Reorganized file to list ignores first and whitelisted last,
# change WordPress .gitignore link to preferred gist,
# add curl line for quick installation
# ignore composer files (vendor directory and lock file)
# 20140606 Add .editorconfig as a tracked file
# 20140418 remove explicit inclusion
# of readme.md (this is not an ignored file by default)
# 20140407 Initially Published
#
# -----------------------------------------------------------------
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# ignore all files starting with . or ~
.*
~*
# dependencies
/node_modules
/.pnp
.pnp.js

# ignore node/grunt dependency directories
node_modules/
# testing
/coverage

# ignore composer vendor directory
/vendor
# production
/build

# ignore components loaded via Bower
/bower_components
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

# ignore jekyll build directory
/_site

# ignore OS generated files
ehthumbs.db
Thumbs.db

# ignore Editor files
*.sublime-project
*.sublime-workspace
*.komodoproject

# ignore log files and databases
*.log
*.sql
*.sqlite

# ignore compiled files
*.com
*.class
*.dll
*.exe
*.o
*.so

# ignore packaged files
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip

# ignore private/secret files
*.der
*.key
*.pem

# -------------------------
# BEGIN Whitelisted Files
# -------------------------

# track these files, if they exist
!.gitignore
!.editorconfig
!.phpcs.xml.dist
npm-debug.log*
yarn-debug.log*
yarn-error.log*
58 changes: 41 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ This is a project I originally worked on for a charity event and I've been impro
- [Table of contents](#table-of-contents)
- [Functionality](#functionality)
- [Setup](#setup)
- [Adding auction information](#adding-auction-information)
- [Firebase setup](#firebase-setup)
- [Environment](#environment)
- [Items](#items)
- [Firebase](#firebase)
- [Creating a project](#creating-a-project)
- [Authentication](#authentication)
- [Database](#database)
Expand All @@ -30,22 +31,46 @@ This is a project I originally worked on for a charity event and I've been impro
| <img src="./readme/homepage_mobile.png" width="50%"> | ![](./readme/adminpage.png) |

## Setup
Here we will cover how to add your own information to the auctions themselves, then how to most a local server to see your changes and finally how to connect it all to Firebase to enable user login and bidding.
Here we will cover how to add your own information to the auctions themselves, finally how to connect it all to Firebase to enable user login and bidding.

### Adding auction information
First, set `isDemo=False` in `js/items.js` (this will keep the cats at bay).
### Environment
To develop and deploy your own auction, you'll need to install `nodejs`. To do this, follow the instructions [here](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs).

Then, populate the `Object` in `js/items.js` with the information for of the items you'll be putting up for auction. The fields are:
- `primaryImage` (`String`): path or URL to the primary image
Then, insall the required packages as follows:

```shell
npm install
```

You can now host a development server by running:

```shell
npm start
```

You can run the following to make sure that your auction will deploy properly:

```shell
npm run build
```

Your website will deploy automatically using the [.github\workflows\pages.yml](.github\workflows\pages.yml).

### Items
First, set `demo = false` in `src\App.js` (this stop the timers from automatically resetting).

Then, populate `public\items.yml` with the information for of the items you'll be putting up for auction. The fields are:
- `id` (`Number`): the ID of the item
- `primaryImage` (`String`): URL of the primary image (relative if included in `public`, absolute if hosted elsewhere)
- `title` (`String`): item title
- `subtitle` (`String`): item subtitle
- `detail` (`String`): item detail text
- `secondaryImage` (`String`): path or URL to the secondary image
- `secondaryImage` (`String`): URL of the secondary image (relative if included in `public`, absolute if hosted elsewhere)
- `currency` (`String`): the currency symbol to use
- `amount` (`Number`): item starting price,
- `endTime` (`string`): item end time in [ISO 8601 format](https://tc39.es/ecma262/#sec-date-time-string-format) (`YYYY-MM-DDTHH:mm:ss.sssZ`)

### Firebase setup
### Firebase
Here we will cover how to set up your Firebase project and then how to enable the Firebase authentication and database respectively.

#### Creating a project
Expand Down Expand Up @@ -101,7 +126,7 @@ Setting up the database is a little more involved so here are the steps you must
}
```
- These rules state that:
- Users can only read and write to their own user data, keeping usernames private.
- Users can only read and write to their own user data, keeping usernames private and admin passwords.
- The auction document may be read by anyone and only updated if the user is logged in and is not modifying or deleting existing bids. This document is what your clients will fetch the current state of the auction from. No usernames are stored here, only the bid amount and the user's UID (which is randomly generated by Firebase and is completely non-identifying to any prying eyes).
- Admins can access all auction and user data.

Expand All @@ -111,17 +136,16 @@ The final step in setting up your auction is to create an admin account and use
To create an admin account:
- Host your website either locally or on GitHub Pages and log in to the website.
- Then go to your Firestore console and find the document for the user you just created.
- There should be a boolean field in the document called `admin` which has the value `"false"`. Change its type to string and enter your desired admin password*. The longer and more complicated the password the better, consider using something like an MD5 hash. You'll never actually have to enter it anywhere, it's just used when validating your Firestore requests.
- In this document there will be an empty `admin` field, this is where your admin password will live. You will never need to type this password, so the longer and more complicated the better, consider using something like an MD5 hash.
- Go to your Firestore rules and replace `insert long random secret string` with the password you **just created**.

> *_**Please** don't reuse one of your existing passwords! While the Firestore rules should prevent bad actors from reading your user's data, don't risk it. I can't be responsible for leaked passwords due to a misconfigured project_
> _**Please** don't reuse one of your existing passwords! While the Firestore rules should prevent bad actors from reading your user's data, don't risk it. I can't be responsible for leaked passwords due to a misconfigured project_
To initialise the auctions:
- With the device you used to create your admin account, head to your website and navigate to the admin page by clicking the `Admin` button in the top right.
- Open the developer console (F12) and enter `resetAll()` into the console.
- This will revert the entire auction to the initial state specified in `js/firebase.js` (as long as you are admin), be careful with this one!
- Click the `Update & Reset All` button.

While on this `Admin` page you can also:
- Monitor the status of your auction.
- Reset individual items using the `resetItem(i)` function.
- Reset all user's admin status using `resetUsers()` (excluding the current user).
- Monitor the status of the auction and see who is winning each item.
- Update an item's (or all items') details without deleting the bid history.
- Reset an item's (or all items') bid history without editing the item's details.
Loading

0 comments on commit 2b606f1

Please sign in to comment.