coopsoc/website

Co-op Soc Website

This repository houses the source code for UNSW Co-op Society's website, hosted at https://coopsoc.com.au and written in Next.js. Visit our website and explore around!

Running the website locally

Before running the website, please ensure that the following is installed:

• Git
• Node.js
• Yarn

To run the website on your local machine, do the following:

1. Clone the repository through git clone https://github.com/coopsoc/coopsoc.com.au.
2. Go into the repository and run yarn install to install all required packages.
3. Run yarn dev to launch the website. After executing this command, the website should be available at http://localhost:3000, where any edits made to the website's source code should be immediately reflected on the webpage.

Maintaining

Enabling/disabling nominations

Change const showNominations to true or false in pages/nominations.tsx to enable or disable nominations.

Enabling/disabling merch

Change export const isMerchActive = (): boolean => false; to true in scripts/merch.ts to enable merch.

Contributors

The first version of the website was written by the 2020 Co-op Soc IT director, Vincent Chen.

The React rewrite of the website was done by the 2021 IT subcom:

• Noa Challis
• Hanyuan Li
• Rohan Agarwal

This was then ported over to Next.js and improved on by the 2022 IT subcom:

• Hanyuan Li
• Stephen Lincon
• Meghna Sunil

Acknowledgements

This website was originally built using CreativeTim's Argon Design System for React, and heavily modified to work with Next.js.

website's Issues

Improve 404 not found page

Currently has a black background and dark purple text, clashing with the rest of the website

(Optional) - add support for multiple colours of the same item

Instead of having one item for each colour. Was attempted (unsuccessfully) before and changes were reverted.

Possible approaches:

1. One image for each item, clicking on the image changes to that colour
2. Radio buttons, one for each colour. Clicking will change the image displayed and changes a "colour" field when adding to cart/purchasing.

Create success/failure page

Will display after clicking "submit" on the /checkout page.

Fix front page on mobile

The social events etc widgets are bugged

Upgrade NextJS / Bootstrap 5

• Upgrade NextJS
• Resolve issues from conversion, e.g. Invalid <Link> with <a> child and Text content does not match server-rendered HTML
• Upgrade Reactstrap and manually convert Argon design system to Bootstrap 5 - seemingly will fix the latter issue

Sort out package-lock.json and yarn.lock conflict

Currently the codebase has both package-lock.json and yarn.lock, and running yarn install gives the following error:

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

I believe, we should decide if we are using Yarn or not, and remove the other file.

Remove nominations page

Get rid of https://coopsoc.com.au/nominations from header, and perhaps look at a way of taking down that page (until next year's nominations)

Create store page

To view merch, prices, colours etc

TODO:

• Decide how to store product data - potentially a json file with an array of products, each having images, a price, colours etc
• Create store page, allowing users to browse all products
• Create page to view an individual product (display a larger photo and details etc), and add to cart

Add 2024 coop facebook link

Perhaps add to header? Just be wary of people spam-requesting to join. Ask Sam for link if needed.

Potential idea - make website content more outward facing

Trying to sell coop to people who aren't currently scholars (raising awareness for high school students, current uni students etc). Could attract more/better applicants and more sponsors. Limitation is, I doubt many

Perhaps also include more information about what coop is - short description & link to official coop page. Could put on the homepage after "A society for co-ops, by co-ops.", or under the about us page. And/or, include more info/pics about past events under "What we do" in the about us page, or create new page/subheading - would help to increase current coop engagement in events like coop olympics, coop ball etc, as well as attract new scholars/sponsors.

Clean up inconsistent Reactstrap usage

E.g. using <div className="col..."> rather than <Col ...>. See the Reactstrap docs (and perhaps the Bootstrap docs, but note much of the div-based class system can be replaced with React components).

Create frontend purchase pages

To integrate with our backend Go API. Depends on coopsoc/merch-backend-2023#1

Todo:

• Make checkout page (see here and here)
• Incorporate stripe payment element
• Make payment status page
• Incorporate stripe payment request button element (to add support for apple pay etc)

Ideally, UX should be something like:

1. Add to cart
2. View cart
3. (Edit cart as needed, changing quantities etc)
4. Proceed to checkout
5. Enter payment details etc
6. Place order -> sends API request to Go backend with a purchase intent
7. Display success/failure message depending on API response

Finish merch site 2024

Must do

• Read cart info (Price ID / quantity of each item) from localStorage in /pages/checkout/index.tsx and send as a POST body to /pages/api/checkout_sessions.js (could be a good one for@RonanG cause he did the cart)
• Host - either move Stripe API routes to api.coopsoc.com.au, pay to host the entire website, or see if it'll work with GitHub Pages. Set up live API keys
• Upload data to live stripe account
• Fix /cart page - add and subtract don't update localStorage, so do nothing
• On load of /merch, read cart from localStorage

Should do

• Make the return page not look like garbage (just copy the style from another page)
• Mobile layout (single column /merch, make /cart legible)
• Convert all images to JPEG / compress (for load times)
• Make addToCart function update localStorage, e.g. stealing logic from goToCart (probably move to function used by both)
• If you added price ID to variants (merch.ts getAllProductsAndVariants), constructing cartWithDetails in merch.tsx goToCart / new function could avoid needing to do another find through repo.products.find
• Could also refactor to do repo.variants.foreach / repo.variants.filter then finding the corresponding cart item, given the size of each
• Buttons to go between merch/cart/checkout/
• e.g., see https://www.switchkeys.com.au/collections/lubricants/products/krytox-205g0-5ml
• Enables adding multiple different colours/sizes to the cart in a single transaction & simplifies UX
• Fix sharp image optimisation in production (currently DigitalOcean App platform, ideally would migrate to a Droplet to cut costs)
• Don't list out of stock combinations in the dropdowns, or let users know it's out of stock without having to press add to cart

Nice to have

• Item added to cart, view cart popup
• Cart icon linking to cart in the top corner of the page, so don't have to scroll right to the bottom
• Cart length pill - number next to the cart icon depicting the number of items in the cart (#37)
• Scale images so they're not cut off in the carousel on the /merch storefront
• Make cart persist when going merch -> cart -> merch
• Remove the update/remove buttons on /merch. Instead, make add to cart button add the value of the quantity drop-down to the cart.
• (Can just click view to cart down the bottom, or ideally a cart icon in the top right).
• This is to allow buying multiple different variants of the same item - colours/sizes etc.
• Make quantity 1 the default on /merch, could use +/- buttons rather than dropdown (steal from /cart?)
• Sync colour selection to image displayed on storefront (/merch)
• Migrate more of /checkout to reactstrap
• Make images constant width on /cart
• Make remove from cart (with no colour/size/quantity selected) remove all items of that product from the cart. Currently says "Please select a colour."

Change "President" and "Vice President" on meet the team 2023 to "Co-President"

Update checout USD to AUD

All prices are in AUD, but the checkout in /merch says "(USD)"

Can we integrate Stripe payment API into the front-end securely?

We'd prefer to avoid having to create and deploy a payment microservice to enable customers to purchase Co-op Society merchandise - primarily because we'd need to pay for the hosting of such a microservice and we'd like to avoid incurring costs wherever possible.

My proposal is we use

• Google Sheets API to store order details
• Mailjet to send invoices/receipts to customers who purchase products
• Stripe to process payments in the front-end in this way

This is NOT recommended in serious production systems as storing API keys in .env is a bad idea. If someone ever gets access to our environment variables and has malicious intentions, they can easily make a series of API calls to 'refund' transactions that never occurred; but, we're unlikely to be a target of that kind of attack.

If we don't want to go down that avenue, we'll develop a backend in whatever language you'd like and deploy it here or wherever else y'all think is a good hosting service (maybe AWS)

Add /calendar link to the navigation bar

It seems fairly self-explanatory from the title. I'd like Jason or Sky to pick this one up!

Create a JSON file for store data

This is probably a sensible abstraction for what items are in the store but, we might hardcode it?

Update events

https://coopsoc.com.au/events

MVP:

• Get some new photos and replace the ones from like 2020
• Add 2023 charity events on

Nice-to-have:

• Expand on description
• More info on each event
• One section per event from 2023? Eg name / description / photo carousel
• Could split into past and upcoming
  • Would need info from socials
  • Already done on the charity page actually, layout is pretty good so we could just steal the React components & add the info
  • I also like the link to the Facebook events, ideally we’d be more proactive in adding that stuff to the upcoming section
  • This seems to require each event to make their own image (see the website) - could either get marketing to make canva images/posters for each event, or perhaps just use a random photo from that event?
  • Would a name of each event next to the photo help, or is the current charity system of click on photo - get modal with name, photo, description enough?
  • Need to add an image carousel to the event modals
• Merge with charity page?
  • The end user doesn’t really care if the event is for charity or not, this distinction appears to be a remnant from the 2018 CSCS merger
  • Could just move the charity info paragraph to the events page, then merge all the past and upcoming events
  • Some way to distinguish between charity events would be nice, at the very least just have “charity” in each event name. Could also have a colour or banner or logo or something on the modal for charity events
  • Where to put charity list?

Update exec list for 2024

• Add 2024 execs/directors to the meet the team page - names + photos (from nominations page)
• Vertically centre left hand side of subcom (see #20)
• Split up pubs/IT from 2023 onwards

Update footer

At the least, change to copyright 2024. Also would be worth double-checking the constitution and grievance policies are up-to-date.

Create JSX component for displaying store items

Probably just a card element to display items which are available. We have similar 'matrices' of images/content in other places and we can kind of steal the idea from there too (see the team.jsx page and the card we display there?)

Talk to pubs about updating publications page

• https://coopsoc.com.au/publications
• Currently has first year guide, blog posts, podcast, but they’re out of date
• Also lacking the chicken coop stuff - could have a pdf viewer?
• Need to get the links to all pubs publications

Display discounts on frontend

Currently only calculating right before creating a payment intent on backend.

Update constitution version

Replace old PDF with new one (removes the notion of a "vice president"). Can be found in All Team [Coop] chat.

Create /merch page

Fix navigation header on medium-width devices

There's a width in between the vertical and horizontal navbars in which the links are listed vertically, but the popup doesn't appear. Change to add the popup at this width too.

To replicate - view website on an iPad mini/air (via chrome devtools), or manually resize window.

Update "Meet the team" page to include 2023 subcom

• Add 2023 subcom
• Add 2023 first year reps + pics
• Make title, url, header link, and page header consistent (currently "Our Team | UNSW Co-op Society", "https://coopsoc.com.au/team", "The Team", and "MEET THE TEAM", respectively
• Address team.jsx line 40: 'TODO: have this be a subpage of "About"'
• #24
• Vertically centre left-hand column of subcom section of /team in each row/portfolio (probably involves centring Subcom.jsx <div className="col-sm-8"> within the parent "row" div)

/merch add check for lack of email

Currently, if pressing "continue to checkout" without entering an email, will redirect to a 404 not found page.

(Also - someone please do #23)

Fix exec descriptions not visible

Descriptions are visible in TeamsData.js and rendered in HTML at coopsoc.com.au/team. However, they appear to be rendered behind each person's image, and are thus not visible.

• Fix ExecCard.jsx so the descriptions are actually show - could be done with a toggle dropdown, a popup, text overlayed onto the image when clicked etc
• Add descriptions for 2023 execs, directors, and first year reps

Migrate payment system to Stripe's low-code solutions

For the 2023 merch rollout, we used Stripe's custom payment flow with it's PaymentIntent API and Stripe’s Web Elements.

This has proven to be a nightmare, so for 2024 we're migrating to Stripe's low-code solutions for the checkout - either a Stripe-hosted page or an embedded form.

My preference would be to use an embedded form to make the experience more visually seamless for users and avoid redirects, but having a fully-functional integration that people trust is the priority (i.e., looks legit & well-tested).

We should also explore ways of making a better storefront - surely there's a solution out there already? Otherwise we could add quality-of-life improvements like #41 and #38 .

• Decide on Stripe-hosted page or embedded form
• Implement backend (see https://github.com/coopsoc/merch-backend)
• Link to existing storefront frontend
• Explore methods of improving the storefront - #41, #38, cleaner UI/UX etc
• Ensure stripe invoices contain all product info necessary for suppliers (item, size, colour, quantity)
• (To be handled elsewhere, perhaps the backend?) Write script to parse exported invoices, collate quantities and present it in a way we can send to suppliers

Create /checkout page

We might steal Stripe's (if we use it) and make it our own, we might build a custom one, we might not even have one and just integrate it with /merch page. Absolutely no clue - it's really subject to how feasible it is to not have a payment microservice.

Fix pubs site

• Add new content
• Remove duplicated / old blog content
• Sync podcast with spotify?

See-also: #54