Dashboard
McHacks dashboard
Overview
The McHacks Dashboard is an innovative and user-friendly platform designed for McHacks, Canada’s beloved hackathon held at McGill University. This dashboard serves as a centralized hub for participants, staff, and organizers, streamlining the experience for all involved. Its robust features help manage registrations, applications, and check-in processes efficiently, making it a vital tool for a successful hackathon experience.
Features
- User Account Management: Participants can easily create and edit their accounts, allowing for seamless updates and personalization when engaging with the platform.
- Application Management: The dashboard enables users to create or edit their hackathon applications quickly, promoting an intuitive process for participants.
- Hacker Dashboard: An organized space for hackers to view their progress and access important information effectively during the event.
- Team Viewing Options: Staff can gain a comprehensive view of teams participating in the hackathon, enhancing oversight and facilitating communication.
- HackPass QR Code Check-In: A convenient check-in feature using QR codes, streamlining the arrival and verification process for participants.
- Advanced Search Capabilities: Users can utilize filters and fuzzy search to find specific hacks or teams quickly, ensuring easy navigation through the entries.
- Detailed Hacker View: Users can access a single hacker view modal for in-depth insights about individual participants, fostering better engagement.
- Staff Dashboard: A dedicated interface for staff members to manage various aspects of the event, promoting effective organization and support throughout the hackathon.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Formik
Formik is a popular form library for React that helps with form state management, validation, and submission handling. It provides a declarative approach to building forms with support for complex validation scenarios and easy integration with validation libraries like Yup.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.