Git Product home page Git Product logo

penn-clubs's Introduction

Penn Clubs

Build and Deploy Clubs Coverage Status

Official platform for club discovery, recruitment, and events at Penn. React/Next.js frontend and Django-based REST API.

Installation

You will need to start both the backend and the frontend to develop on Penn Clubs. Clubs supports Mac and Linux/WSL development.

Questions? Check out our extended guide for FAQs.

Backend

Running the backend requires Python 3.11 and Pipenv.

In production, you will need to set the following environment variables:

  • NEXT_PUBLIC_SITE_NAME (optional, defaults to clubs)
  • SECRET_KEY
  • SENTRY_URL
  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY
  • AWS_STORAGE_BUCKET_NAME
  • LABS_REDIRECT_URI
  • LABS_CLIENT_ID (from Platform)
  • LABS_CLIENT_SECRET (from Platform)

To run the server, cd to the folder where you cloned penn-clubs. Then run:

  • cd backend

Setting up psycopg2 (this is necessary if you want to be able to modify dependencies, you can revisit later if not)

  • Mac
    • $ brew install postgresql
    • $ brew install openssl
    • $ brew unlink openssl && brew link openssl --force
    • $ echo 'export PATH="/usr/local/opt/openssl@3/bin:$PATH"' >> ~/.zshrc
    • $ export LDFLAGS="-L/usr/local/opt/openssl@3/lib"
    • $ export CPPFLAGS="-I/usr/local/opt/openssl@3/include"
  • Linux/WSL
    • $ apt-get install gcc python3-dev libpq-dev

Now, you can run

  • $ pipenv install to install Python dependencies. This may take a few minutes. Include the --dev argument if you are installing locally for development. If you skipped installing psycopg2 earlier, you might see an error with locking -- this is expected!
  • $ pipenv shell
  • $ pre-commit install
  • $ ./manage.py migrate OR $ python3 manage.py migrate
  • $ ./manage.py populate OR $ python3 manage.py populate (in development, to populate the database with dummy data)
  • $ ./manage.py runserver OR $ python3 manage.py runserver

Use $ ./manage.py test to run unit tests.

Frontend

Running the frontend requires Node.js and Yarn.

Please ensure you are using Node 20. Our codebase does not support other versions of Node (v20.11.1 is stable).

You will need to set the following environment variables on the frontend:

  • NEXT_PUBLIC_GOOGLE_API_KEY
  • NEXT_PUBLIC_SITE_NAME (Optional)
    • Specify clubs to show Penn Clubs and fyh to show Hub@Penn.
  1. Enter the frontend directory with a new terminal window. Don't kill your backend server!
  2. Install dependencies using yarn install in the project directory.
  3. Run application using yarn dev.
  4. Access application at http://localhost:3000.

Use $ yarn test to run Cypress tests.

Development

Click Login to log in as a test user. The ./manage.py populate command creates a test user for you with username bfranklin and password test. Go to /api/admin to login to this account.

Ticketing

To test ticketing locally, you will need to install mkcert, enter the frontend directory, and run the following commands:

  • $ mkcert -install
  • $ mkcert localhost 127.0.0.1 ::1
  • $ export DOMAIN=https://localhost:3001 NODE_TLS_REJECT_UNAUTHORIZED=0

Then, after the frontend is running, run yarn ssl-proxy in a new terminal window and access the application at https://localhost:3001.

penn-clubs's People

Contributors

01jongmin avatar alnasir7 avatar alxkp avatar armaant avatar aviupadhyayula avatar aydangoon avatar cphalen avatar cx-lu avatar davish avatar dependabot[bot] avatar dfeng6789 avatar esinx avatar evakill avatar ezwang avatar joyliu-q avatar julianweng avatar kelvin-hui avatar kirubarajan avatar lantingchiang avatar leonero avatar mureytasroc avatar owlester12 avatar pawalt avatar porcupine1 avatar rm03 avatar rohangpta avatar sigmachirality avatar snie11 avatar valenciafu avatar xiayufeilucy 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

penn-clubs's Issues

Allow admins to resend acceptance/rejection emails to applicants

Admins can only send acceptance/rejection emails to club applicants once. If an acceptance/rejection email template is initially incorrect and emails are sent, applicants cannot be re-notified.

For reference, the logic for this is implemented in Backend/clubs/views.py under ClubApplicationViewSet's send_emails().

Proposed fix: add an option for admins to force renotification for all applicants. Ideally, this would show up as a checkbox when sending emails, with a warning upon toggle that confirms whether admins mean for applicants to be re-notified.

Screenshot 2023-09-23 at 9 07 53 PM

Add a `ticket_drop_time` to control ticket visibility and editing

create_tickets currently deletes and recreates tickets / other parameters around the event every time it is called

This could be very problematic if a bought ticket is deleted since the organizer decides to go in and add a few more tickets.

We should:

  • Add a parameter to events specifying a ticket_drop_time
  • Make tickets publicly available for purchase only after this time
  • Freeze ticket offering editing after this time

Found a possible security concern

Hello ๐Ÿ‘‹

I run a security community that finds and fixes vulnerabilities in OSS. A researcher (@deleterepo) has found a potential issue, which I would be eager to share with you.

Could you add a SECURITY.md file with an e-mail address for me to send further details to? GitHub recommends a security policy to ensure issues are responsibly disclosed, and it would help direct researchers in the future.

Looking forward to hearing from you ๐Ÿ‘

(cc @huntr-helper)

Enforce cart limits

Enforce max # of tickets that can be checked out at once on a per-event basis

Create reporting mechanism for ticket sales

  • Add a report to view all tickets sales for specific clubs, date range
  • This should default to: all clubs, monthly

Very important for payouts, need to display this at a transaction level?

Last names get displayed twice in settings

Reproducible by logging in with a Penn Key and navigating to account settings. I observed this behavior across multiple browsers for my account -- might just be something wrong with with my specific Penn profile? Would love to know if other people are running into the same issue.

Screenshot 2023-09-27 at 12 05 28 AM

Process and authorize transaction using transient token

Once we have the transient token, after the <iframe> loads in all the card information and related details, we can display a confirmation page.

On this confirmation page, we need to display metadata for the frontend to allow confirmation. Invoke this API: https://developer.cybersource.com/api-reference-assets/index.html#unified-checkout_transient-token-data_get-transient-token-data_liveconsole-tab-request-headers to use this token and return metadata.

Ticket checkout flow

Replace multi-event cart functionality with an event-specific ticket purchase / checkout page (aligning with original designs) for simpler UX.

Users first select number of each ticket class for a given event to purchase (and are shown price of current "cart"), then are shown payment details drawer from Cybersource UI library. Upon successful receipt of details and creation of payment, user receives ticket (or a momentary hold), has payment authorized, and is redirected to owned tickets page.

Cart + holds on checkout will be brought back due to UX concerns.

Search bar

<SearchBar
   onSubmit={() => doRequestEtc()}
   onChange={options => this.setState({ options })}
   options={this.state.options}
/>
options = { q: '', size: 12, tags: ['', '', ''], etccccc}

Create an interface for Wharton Council admins for fine grained control over applications

Create an interface for WC admins to add/delete club applications (likely a view for them to run the wharton_council_application script?)

  • An interface visible to admins of Wharton Council only (using Django permissions)
  • Control centralised application start_time, end_time, application_cycle and result_release_time, checkbox of clubs to include, and control over whether these applications are editable (currently, Wharton apps are not editable when submissions are open)
  • Changes to applications need to be approved by Wharton Council (includes edits and deletions)

Frontend - Julian
Backend - Rohan Moniz / Avi

Revamp owned tickets page

TicketsTab tasks:

  1. Align design with Figma
  2. Implement transfer ownership functionality (between PennKeys for now)
  3. Group displayed tickets by event and link to relevant /tickets/[event.id] page. Display count of each ticket class by event.

Admin Page Access

Unauthorized users can access /admin. Backend check will prevent any actions from being executed, but we would still want to prevent people from accessing this page in the first place.

Distinguish club applications (external vs. internal)

We currently provide the option of either using:

  • Penn Clubs as application submission management system, allowing the user to send acceptance / reject emails through Penn Clubs as well as customizing many more aspects of the application
  • Some external provider (Google Form, Airtable, etc.) by providing a link to the application

The application creation form still asks for templates for external providers, we should eliminate the use of templates.

Screenshot 2023-09-23 at 11 26 59 PM

Pages that require authentication render VERY slowly

See title. I discovered this when trying to edit a club's application questions -- haven't validated it across other pages that require auth. My hunch is that renderPage.tsx is causing this. L164 implements a wrapper for any page that requires authentication, which queries the backend with an "is the current user == auth" upon any state change. Obviously, this is horrible when a user's inputting text.

Proposed fix: query once upon auth-locked page load and don't do it again?

Screen.Recording.2023-09-27.at.1.17.52.AM.mov

Home Page Reorganization

Currently, the frontend page structure and general design choices put Clubs' directory function first and other features (e.g. events) second, displaying a list of clubs in the homepage. This leads to high usage at the beginning of each semester with heavy drop-offs, as events are underutilized and most users solely use the directory/application features of the website (unfiltered search is also very expensive for something loaded by default, especially during peak application time). Ideally, Clubs should be a 4-year holistic platform for the club ecosystem at Penn, and currently has the features to be one: with the planned rollout of events ticketing, this is a great time to revamp the homepage.

This involves the re-organizing of the current home page (club directory) and /events page into the following:

  • Homepage for unauthed users: Standard landing page with login call-to-action and potentially some marketing print.

  • Homepage for authed users: Social media-style feed featuring 1. events/content from subscribed/bookmarked clubs and 2. upcoming events, potentially ranked by relevance to user and/or popularity.

  • Events page: current events page, full directory for all events at Penn with search functionality.

  • Clubs page: current homepage. Would have its own header link. Should probably put a banner on homepage that leads to this at the start of each semester ideally.

EDIT: Homepage for authed users will now be more differentiated from events page. Will have

  1. Google.com-like search bar with autocomplete based on club title (redirects to club search page with relevant query param on enter)
  2. Featured events (some selection where upcoming events from bookmarked/subscribed clubs are at top followed by other popular events on campus)
  3. Featured club (optional, could be cool to showcase some clubs, especially less pre-professional ones, could be themed for certain holidays as well)

Support free tickets

in the view initiate_checkout, we exit early if cart total is 0.

Let's instead make it check individual tickets: all(t.price == 0 for t in cart.tickets.all()) and then simply "sell the tickets" to the person and then exit.

This also should be accompanied with a refactor. We have "sell the tickets" logic in complete_checkout. Move this to a separate helper function so that both the free ticket purchase path and paid ticket purchase path can use this shared function.

We also need one more refactor: the response returned should indicate that the tickets have been sold and the frontend doesn't need to call complete_checkout. This will require changing the response schema.

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.