Rank-a-thon Milestone 3

Rank-a-thon Milestone 3 === ## Table of Contents [TOC] ## Note to Milestone 3 Reviewers Rankathon is NOW LIVE at https://rankathon.io Also, do watch our milestone 3 demo video at: https://youtu.be/RQk5vQnAklw NOTE: Only the **mobile-optimized version of the webapp is available**. We chose to work on mobile first because at Hackathons, people will most likely be moving around with their phones. There are plans to include a desktop version as users will probably prefer to submit their projects on a computer. ## GitHub Link https://github.com/rank-a-thon/rank-a-thon ## Demo Video Milestone 3: https://youtu.be/RQk5vQnAklw Milestone 2: https://www.youtube.com/watch?v=eU2yFXLwfN8 ## User Testing Tested with 4 users creating submissions and 1 judge evaluating and ranking submissions User feedback is used to make improvements to UI ## Project Log ### Yitao **Role:** Backend developer, DevOps | Tasks | Duration (hours) | |-|-| | Learning Golang| 15 | | Learning Gin | 5 | | Meetings | 15 | | Writing README and Documentation | 15 | | Wireframing on Figma | 10 | | Making Poster and Video | 10 | | Setting up Gin backend | 5 | | Setting up Postgres and Redis | 5 | | Setting up docker and hot reload | 10 | | Setting up Postman API testing | 5 | | Write backend authentication | 10 | | Create models and controllers for user, team and team invite | 15 | | Create models and controllers for submission and evaluation | 10 | | Write logic for normalising judges scores per category and ranking | 15 | | Write image upload to backend | 5 | | Configuring SSL for production using Lets Encrypt | 5 | | Configuring Nginx | 5 | | Fixing bugs | 15 | | Writing go tests | 10 | |**Total**|**185**| ### Chris **Role:** Frontend developer, DevOps | Tasks | Duration (hours)| |-|-| |Learning about TypeScript|5| |Learning about React|3| |Learning about Next.js|2| |Preparing writeup, poster, video for M1|4| |Setting Up Development Environment|2| |Bootstrapping Webapp with Next.js|3| |Meeting with mentor|2| |Initial wireframing|10| |Interviewing users about app concept|3| |Designing project graphic assets|5| |Exploring UI frameworks|3| |Setting up initial webapp landing page|10| |Learning about Docker and docker-compose|10| |Dockerise all parts of the stack for dev build|5| |Setting up webapp authentication|4| |Authentication UI flow|3| |Designing post-auth UI components|4| |Write user dashboard|2| |Write Explore page|2| |Write Map page|2| |Write Schedule page|2| |Write Announcements page|2| |Write logging out flow|2| |Write first static draft of teams page|2| |Write logic for team creation|2| |Learn about GCP and deployment on Google Compute Engine|5| |Dockerise all parts of the stack for prod build|5| |Create a GCP server and download all dependencies|5| |Fail to deploy because the instance I chose was too inadequate (did not have enough memory) to build the prod build|1| |Remake larger GCP instance and retry deployment|2| |First prod deployment complete!|1| |Preparing writeup, poster, video for M2|4| |Add more logic for team creation|5| |Add logic for project submission|2| |Attempt to upload files to a REST endpoint (spent super long because we were trying to fix an annoying backend bug)|10| |Complete logic for project submission|5| |Add data fetching for Explore page|5| |Working on Judges UI|10| |Fix weird bugs related to Judges authentication|5| |Add logic to judging UI|10| |Write tests|20| |Preparing writeup, poster, video for M3|4| |**Total**|**193**| Tech Stack --- 1. HTTPS-Secured with Let's Encrypt CA 2. Server-rendered React frontend 3. Golang Gin and GORM backend 4. JWT web tokens for authentication 5. Semantic UI design system 6. PostgreSQL database 7. Redis for database caching 8. Jest, `react-testing-library` and `go test` for Testing 9. Deployment infra uses Docker and `docker-compose` 10. Deployment on Google Compute Engine  ### End of Milestone 3 Updates ## Motivation In large-scale hackathons such as Hack&Roll (a hackathon organised by NUS Hackers which has over 500 participants), it is always a challenge to ensure a fair and transparent judging process within time constraints due to the sheer number of judges and participants involved. Rank-a-thon is a web application that facilitates large scale judging by providing judges with a platform to rank their assigned submissions using smart and efficient pairwise comparison algorithms. ## Figma Prototype Click [here](https://www.figma.com/file/9iEO7VrMaJvtcWYQ82XQCp/Prototype?node-id=27%3A406) to view the prototype. User Stories --- ### Hackathon Participants ```gherkin= Feature: Making hackathon submission Scenario: Participant wants to make a hackathon submission Given Submission details have been filled (Team name, GitHub link, project description etc) When I click on submit Then My submission should be recorded Feature: Explore (and vote for) other projects Scenario: Participant wants to check out other projects in the hackathon When I click on explore tab Then I should be able to view other hackathon projects (and vote for them) Feature: Be informed of announcements Scenario: Participant wants to be informed of hackathon announcements When I click on "View Announcements" Then I should be able to view important announcements Feature: View amenities near me and event schedule Scenario: Participant wants to know where amenities are and view event schedule When I click on "Map" / "Schedule" Then I should be able to view the event map / the event schedule accordingly ``` ### Hackathon Judges ```gherkin= Feature: View assigned teams for judging Scenario: Hackathon judge wants to view his/her assigned teams Given I'm a logged-in User When I go to the "View assigned Teams" page Then I should be able to see the teams assigned to me to judge Feature: Assign scores to a team Scenario: Judge visits an assigned team's booth to check out their project Given I have checked out the assigned team's booth When I rate the submission on different criteria Then The application will record my scores Feature: Easily ask judging related questions Scenario: Judge has questions about judging / cannot find team Given Certain queries / problem faced with the event When I click on the "Get Help" button Then I should expect to be contacted by an organiser soon Feature: Browse other projects Scenario: Judge has finished judging his assigned teams and wants to browse other teams Given Completion of judging When I click on the "Explore" tab Then I should expect to easily browse and locate other projects Feature: View amenities near me and event schedule Scenario: Judge wants to know where amenities are and view event schedule When I click on "Map" / "Schedule" Then I should be able to view the event map / the event schedule accordingly ``` ### Hackathon Organisers ```gherkin= Feature: Generate list of winning teams Scenario: Judges finished judging and time for prize presentation Given all the judges have finished judging When I click on "Generate winners" Then I should be able to get a list of the winning projects for each category ``` Project Timeline --- ```mermaid gantt title Timeline section Milestones MVP :a1, 2020-06-01, 30d Additional features :after a1 , 30d section Features Site skeleton :2020-06-01 , 12d Core features : 18d Venue Map and booth location: 10d Event schedule page: 5d Participants voting: 10d ``` ## Appendix and FAQ :::info **Find this document incomplete?** Leave a comment! :::