greatunihack/2021-greatunihack

The online platform for GreatUniHack 2021.

GreatUniHack 2021

The online platform for GreatUniHack 2021, allowing participants to sign up to the hackathon, create or join a team, view sponsors & challenges, and submit their projects.

Getting Started

These instructions will get the hackathon platform up and running on your local machine.

Prerequisites

You need node and npm installed globally on your machine. You will also need to make a Firebase account.

Installing

Cloning the repository:

git clone https://github.com/greatunihack/2021-greatunihack.git
cd 2021-greatunihack

---

Environment variables:

Duplicate the .env.example file to create a .env file.

Windows

copy .env.example .env

MacOS/Linux

cp .env.example .env

Replace the placeholder values with the credentials for your Firebase project.

---

Installation:

npm install

---

Starting the project:

npm start

Built With

• React
• Material-UI
• Firebase

Contributors

• Aryan Agrawal
• Nadine Abdelhalim
• Sam Hirst
• Varun Shankar

License

This project is licensed under the MIT License - see the LICENSE file for more details.

2021-greatunihack's Issues

Implement Discord bot

Create profile page

View info personal info, change user info

Feature Request: Timer

I saw the google slides mockup, a great start. Can we get a timer to day 1 of GUH on the landing page?

Improve landing page

• Make the countdown date an environment variable and update .env.examples
• Use shared sponsor data
• Make footer text centred, with the social buttons on the top, under which should be the contact email ([email protected]) and then finally the copyright text (from the copyright component)
• Make the social icons bigger in both footer and header
• Make the navbar buttons scroll to the top of each section rather than the middle
• Fix home and sponsors buttons
• Fix footer social icon links
• Make the logo for the hero section take half the horizontal space, with the date, countdown etc. taking up the other half
• Make imports absolute
• Make page mobile friendly
• Use assets (e.g. images) from public folder
• #94
• Show "applications have closed popup" when applications close

Create wrapper to make all dashboard pages the same width

Restrict pages before hackathon begins

Submissions, challenges

Create application form

Include:
Name
Email (use yup to validate)
Discord username (use yup to validate)
Gender (optional)
Ethnicity (optional)
Resume (optional)
T&C

Useful links:
Custom details in Firebase
Upload files to Firebase
Formik file upload

Redirect user to "Thanks for registering, you can log in once the event begins" page?

Improve login & apply page

• Using <Link to=""/> to swap between the apply and login pages rather than href
• Replace vanilla signup & login form with formik (remove error state variables as formik handles this) - use profile page as reference
  • Add form validation for apply and login pages using yup regex (emails, password strength, discord tag, etc.)
  • #85
• Add material UI dialogs for developer error messages (dialog docs)
• Add material UI dialogs after signup linking back to home page
• Add confirm password field to signup
• Make ethnicity dropdown
• Add cv upload with FirstnameLastname.pdf in cv folder in firebase
• Make dropdown titles show inside the box, not above (profile page for reference)
  
  

Create dashboard page

Link to other subpages - sponsors, challenges, contact, submissions, profile, Join Discord
Show pop-up/message if user hasn't joined a team yet

Add "deploy to netlify" button

Create challenges page

Blank page with placeholders for sponsor challenges

Create sponsors page

Showcase sponsors of different tiers with a short description

Create landing page

Include:

• Hero section
• Login/apply button
  • Show "applications have closed popup" when applications close
  • Switch from apply to login button when event begins?
  • Restrict user from accessing dashboard (aka login) before event
• About section
• FAQs
• Sponsors
• Footer

Create contact page

Contact form
Contact details

Fix public folder files & properties

• Replace favicon
• Replace logo
• Correct names in manifest.json
• Add correct names to header in index.html

Create footer

Update Devpost and Discord links

Devpost and Discord links on home page, Discord link in App.tsx
Link to Devpost hackathon submission/home page & discord server join link

Set up Firebase Security Rules

App Check
Security Rules

Create consistent title component for each dashboard page

Create global Material-UI theme

Useful links:
Creating custom themes
Dark mode with user preference

Colour palette: TBD

Make "remember me" on login functional

Move Discord server link to topbar

Remove all console.logs

Embed Twitch stream into page

Docs

Fill out Devpost hackathon

Rename CV file to FirstnameLastname when uploading to cloud storage

Load user information into contact page through userid

Get userid
Make firebase request
Parse data
Set data to correct fields in contact form (state vars)

Update README.md

Include short description + how to get set up & running locally

Create page for join/create team

Add back button to each page to go back to dashboard

Add error and succes dialogs to contact form

https://material-ui.com/api/dialog/
redirect user to dashboard home page when dialog is closed
create styled dialog component for the whole project

Restrict dashboard routes to logged in users

Redirect non-logged in users to login page when they visit any dashboard page
Redirect logged-in users to dashboard when they visit the login page

Replace tsx data files with json

Replace "any" types with actual types

Copy project to hacker_suite and create documentation on how to get set up for a new hackathon

hacker-suite-reborn
hs-reborn

Use env vars for any data modifiable for future hackathons

Add linting

Adding linting would be beneficial to keep code consistent between members of the team

Link Discord accounts using Discord login service

Create login page

Use env var for firebase config

NPM Audit Fails

Running npm audit shows several moderate security vulnerabilities.

Modify dashboard status bar to display user progress dynamically

Signed up, joined team, submitted project, etc.

Create topbar

Set limit for number of team members

Implement teams logic

Prevent the creation/joining of a team without Discord account linked
Limit number of team members
Filter bad words

Store Firebase userid securely throughout app

Create 404 page

Use React environment variable to reference hackathon name

Create submissions page

Cards with GitHub link, description, images/video embed
Allow for edits
Lock after deadline
Create submission/edit submission button
Use URL with unique submission ID to allow users to go to specific submissions directly

Fix 404 page padding