Git Product home page Git Product logo

biketag-website's Introduction

⚠️ End Of Life ⚠️

The `biketag-website` project has reached end of life. We are no longer accepting pull requests or providing support for community users of this code and supporting software. This project started as a tool for people to be able to more easily play BikeTag in Portland, Oregon, socially on Reddit. This code lived much longer than it could have and I, Ken, am so happy that it worked so well for the community of BikeTag Players all over the world. Please see the new [BikeTag App][biketag-vue] for the continued free and open source offering by the BikeTag Project.

(THANK YOU!)

biketag-website

Build Status

A website for biketag.org

BikeTag Homepage

Why?

To allow anyone and everyone to play BikeTag! This site will ingest the Reddit posts playing biketag for a configured subreddit, and display them on biketag. Conversely, using the site you can create a new tag and will be automagically posted to Reddit! This lets anyone play the game without needing to know how to imgur or having a reddit account, while continuing to support those who have been playing biketag on reddit as well!

Features of the webapp

BikeTag Game

Contribute

If you'd like to contribute to this project you can file an issue, fork the code and create a pull request, or support this project on patreon.

Development

Install dependencies

Run npm install to install the node module dependencies.

Required Configuration

The app loads a set of configuration files found in the config folder. The repository is set to ignore a config.json file, for security reasons, but there's sample of the minimum configuration to get the local site to display images for the Portland subdomain, as well as the default landing page. sample.config.json. Copy this file to config/config.json

cp config.sample.json config/config.json

to get started from scratch. Note: for some features to work, API values will need to be set.

Start local server

Run npm start to run the webserver and then navigate to http://localhost:80 or whichever port you have set in the config.json. You can also run npm run dev to run in debugging mode for local development, which provides greater logging and hot-reloading.

Change the website code

This project supports Embedded Javascript templating, ejs, for the templates served by each subdomain. A template may have either an index.html or index.ejs file in it's root that the express application will serve for a given subdomain. Using data from the config.json file as well as the data found in /data/config/, in conjunction with the raw html in the /data/content/ folder, data can be injected into the ejs templates.

To use within javascript:

<script>
	// get the supportedRegions object via JSON serialization
	var subs = JSON.parse(`<%- JSON.stringify(supportedRegions) %>`)
</script>

To use within html:

<audio id="biketag-jingle">
	<!-- insert the page.easter.jingle variable into the src attribute of this audio element -->
	<source src="<%= page.easter.jingle %>" type="audio/mpeg">
</audio>

The homepage landing page is in the /templates/home/ folder using the template file index.ejs. Each template should use it's own root folder for theme resources. There is a public folder in the root of the project for items that span multiple templates. Within the public folder there is a js folder that contains javascript available to all consumption. There is also a content folder within the public folder that contains raw html content which is available for editing by site administrators using git.

Note: When running in dev mode, changes to the files in the /templates/ folder are reflected immediately, with the page autoreloading.

Dependencies

This website runs on sexpress, a wrapper around express, which provides a series of configurable features for a multitenant website. These features include subdomain support, api authentication using passport.js, ssl support, and more. Because these features are abstracted out of the biketag-website project, the core of this application lives inside /api/biketag/index.js to handle the BikeTag specific routes and functionality.

Sexpress uses clobfig, a configurator library, which clobbers all of the files found in the /config folder. Clobfig clobbers all of the js files within the config folder that have 'config.js' in their name and all .json files.

Credits

Thank you to HorribleLogos.com for whatever it is that you provided.

Structured content powered by Sanity.io

Sanity.io

biketag-website's People

Contributors

aidy avatar benaduggan avatar ejfinneran avatar evan-white avatar keneucker avatar ktoth2 avatar selator avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

biketag-website's Issues

Create api endpoints for templates

What
We could do serverside rendering for any kind of template and then those can sit at a JSON endpoint, that the app then consumes. The first two templates to build are the postedTagTemplate and the redditPostTemplate. These endpoints will receive a POST request with some data and return the template with the data, the template without the data, and the data inside a JSON object.

Why
The templates for data on the biketag site shouldn't be in the templates for the sites, let's put them into their own templated endpoints and allow for different views of the same data. This also allows us to get templates based on our data to do migrations and historical post imports more simply.

How
Use a templating engine? Output can be any text whether it be html or not.

Content: build Bike Tag playbooks

We need playbooks for the following regional biketag features
These playbooks will guide the regional ambassadors through running the version of Bike Tag they wish to see in their city:

BikeTag website (completed)
Reddit (completed)
Instagram
Imgur
Github
Ambassadorship Program (completed)
Development

Social: Instagram story format

We discussed to switching to a format of:

  • 3 snippets/screens
    Screen 1: “Tag You’re It!” with day and timestamp
    Screen 2: User provided image of tag
    Screen 3/4: User provided hint and link to biketag.org, and mention to watch “How To” pinned story if you’re new.
  • NOTE: Until the “How To” is created and pinned on our IG, we can simply use screen 3/4 for the ‘user provided hint’ and “Go to BikeTag.Org to play!” message

Regional landing page

  • Show active Biketag cities on the map
  • Explain and invite people to get BikeTag started in their own city via the ambassador program if their city isn’t already participating

Giving back: donation tags

Per Denver Bike Tag, there are bike orgs that reward taking a picture near particular locations with a donation to certain organizations.

It would be great to further expand the positive impact of participating in Bike Tag.

Output more information in Reddit Post

The current template supports the following data:

  • Credited tagger
  • Previous tag number
  • New tag number
  • Tew tag image
  • Found image
  • Rules link

Other items to include could be:

  • Previous tag link
  • Mapped location
  • Leaderboard link

Get images from multiple sources

What
Imgur has seen some downtime in the last two months. When this happens, there are no images for biketag, and nothing shows up on any of the pages. We should store and fetch our images from mutliple, redundant, sources.

Why
Using multiple sources, including the localhost, we can create a caching system for when failures of the imgur API (our main source) goes down.

How
Integrate with AWS S3 to create a bucket that stores the biketag photos for each region. This can be all one AWS account or individual AWS accounts for each region. When a user uploads a photo to imgur, that photo should be ingested by biketag.org and placed into the appropriate bucket. The last 10 images can be stored on localhost in case both S3 and imgur go down simultaneously, but S3 behind cloudfront will be our main fallback solution, with imgur being the primary solution. Title and description can be included as metadata for those images.

Add nightwatch tests for determining if the functionality of the frontend still works

BikeTag.org should display images on the homepage no matter what, as long as the imgurAlbumHash is set and correct and the imgur album contains images.

The site should not show an endless spinner.

Integrate with nighwatch to run tests against the UI of the site. This will greatly help reduce the amount of downtime due to UI errors as well.

Add city name as header for each subdomain

Each city subdomain (eg pdx.biketag.org) should have a header that states the city name and labels the feed.

Benefits:

  • User does not have to look in the URL
  • Stronger sense of place
  • Signals that this is a multi-city game

Add geotagging to posts

Give the option to record GPS coordinates of the location to verify the tag and ultimately create a map of all of the tags in a region.

time-delayed hint

the current bike tag photo has got me stumped. it might be useful to have a mechanism that kicks in after a set amount of time, such as a written hint, to keep the game moving forward.

Brand: establish color palette

It would be helpful to start forming an aesthetic identity for ourselves that stays consistent across platforms (e.g. BT.org, Instagram, etc.).

Consideration:
Do we have a global palette that we apply to all cities or do we have a main brand with sub-brands for cities? For example our main colors are black, blue, and yellow AND each city also gets their own unique color (e.g Portland could be black, blue, yellow, purple.)

Colors should treflect the feeling we want to create. For example, the game is approachable, inclusive, fun, gender-neutral.

Geofence allowed tagging area

For expansion into other regions (especially sprawling or expansive cities), it would be helpful to geofence the area to keep tags within city limits, for example.

Content: write Terms of Service/Code of Conduct

Considerations:

  • - User Data

  • Usage on social media

  • Usage on BikeTag.org

  • Usage on Reddit

  • - Publishing of images, geotags, etc.

  • Refer to imgur's terms of use as well?

  • - Safety: our advice and guidelines

Stop loading all tag images from imgur on each request

On each page load, the site requests all of the images from the album from imgur, when we only need to display the most recent X (currently 3), for the homepage. We will know how many more to load by the count. Only count=all should request all images.

Create profile views of each tagger and history of all tags

What
/r/BikeLA has a leaderboard and link to all of their tags as a history of the game at this page:

https://www.reddit.com/r/BikeLA/wiki/phototag

screen shot 2018-06-09 at 9 21 28 pm

Why
To give some data back to users, not to spur competition but to give credit where creddit is due.

How

  1. Develop method to scrape out all tags by each user, allowing us to search/sort by username.
  2. Create the profile view and show the history for a user.
  3. Create view of all tags.
  4. Develop leaderboard views for month, year, and all time.
  5. Make maps of all tags?

Adapting Bike Tag: thematic tags

When dealing with the challenge of sprawling environments a possible solution is to make tags thematic (e.g. take a picture of your bike near a gas station) rather than an exact 1:1 match of locations. The idea is to make the game more like a scavenger hunt.

'Special event' playbooks

Playbooks outlining preparation and participation in events like Pedalpalooza.

Added on 6/12: A suggestion to add a tutorial on setting up Reddit Enhancement Suite to our playbooks. RES allows users have multiple Reddit users and easily toggle between them.

Support multiple bike tag regions

Hey Ken,

The bike tag idea was stolen from /r/chicago: it'd be cool to support some of the more popular bike subs (and it'll get you some more traffic).

Sweet idea!

Fix the submit button

When submitting a new tag, the button disappears but the spinner doesn't show up in it's place -- the html for the spinner does.

Design: finalize spoke cards and stickers

  • Lets finalize badass designs for our spoke cards and stickers.
  • Once the designs are final, we can send them to Sticker Ninja to be printed.

Due date: ASAP
Deliverable date: by 6/21

BikeTag Game Glossary: Term and Phrase Definitions

Define terminology and definitions for things like:
"Tag It"

Choose how we want to refer to geographical expansion, e.g. the implications of choosing the terms region vs city vs town vs greater metro areas, etc. and the boundaries they create.

Patreon setup

Lets set up a Patreon account to help collect funding to support things like the printing of spoke cards, stickers, hosting costs, etc.

It seems like we would be a good fit as either Creator > Non-profit or Creator > Community.

Add a date for the pictures

It'd help to have some indication of the date of the photos. I cant tell if the latest photo is from yesterday or from a year ago. It matters because it'd give a sense that if I participated, there would be others to keep the game going, if I knew that photos changed recently.

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.