acmutd / hackutd-org-site

HackUTD's Organizer Site

HackUTD Organizer Site

Design

• Figma (if you have access)

Code

This is a Next.js project bootstrapped with create-next-app.

Run Website Locally

Run the development server:

yarn && yarn dev

Open http://localhost:3000 with your browser to see the result.

Storybook

Storybook has been configured to help facilitate component development for this website. To run storybooks:

yarn storybook

Technologies & Packages Used

• Styled Components for CSS.
• Lottie for dynamic SVG animation, namely the logo at the top of the Hero.

This site's philosophy is to use as little external packages as possible. Custom CSS is given priority over Tailwind, MaterialUI etc. Even with what little packages are used, we still get obscure deprecation warnings and browser complaints. If you'd like to contribute, please heavily consider before installing a new Node package.

Contributions

1. Make or pick an issue to work on. If you'd like to contribute on a problem or feature you've thought of yourself, first make an issue, and wait until it receives approval from a site adminstrator. Otherwise, you're free to pick up an existing issue.

2. Make a branch. Create a git branch with a descriptive name to work on your specific code.

3. Work on the issue on your branch. Try to modify only files relevant to your issue, and stay away from important folders like /pages if possible. Furthermore, try to adhere to the existing site structure. For example, place raster images in the relevant folder or base level in assets/img, and SVGs in public/svg. If you're working on a discrete component, a great way to preview your component is to make a storyboard to work in.

4. Ensure there are no errors. An easy way to do this is running yarn build and ensuring no errors prevent the app from building.

5. Make a pull request. This way, site administrators can look at & test your code before merging it to the main branch to be included on the deployed site.

And of course, contact the main site administrator Nathaniel Brown if you have any questions!

Credits

Special thanks to:

• Abdullah Hasani for providing technical advice and helping to host the website.
• Dylan Nguyen for providing design advice.

hackutd-org-site's Issues

Add More Past Hackathons

So far we have VIII, VII, and GameJam. The reason I started with these is because we have the sites up, but since we have supplementary statistics for most of the rest of them we maybe could work on adding them to the carousel. We could make the site link an optional that only shows up if we actually have it up.

A challenge with that is that it might be hard to find the marketing assets for these hackathons to style the bubbles well. We could look into the archived website GitHub repositories for assets like the title, etc.

@abdullah50053 do you know if there are plans to deploy previous sites (VI, V etc.) to hackutd.co subdomains? I could maybe work on that when the time comes

Change wording in Hero to "Texas' largest hackathon"

Add link to HackUTD IX site somewhere

Fix challenges in image sizing in hackathon carousel & need for extra variables to counter this in hackathon_data

Make headers left-aligned on mobile view?

The hamburger menu icon obscures right-aligned header on mobile view. We should consider moving headers to the left using the default breakpoint when you hit mobile so this doesn't happen.

static to relative size units for dark mode toggle & mobile hamburger icon, consider making them smaller

Suggestion per @MichaelZhao21 and @syl15 who see buttons as a bit large.

Code for Cool iMessage Preview Thing

Custom 404 Page

• Would want to prototype in Figma

Switch some of the officers with "funny pictures" with the row of officers without them

Feel like it harms the user experience to be delighted with changed photos until you get to a row without them on the 3rd grid, can probably intersperse some officers from the 4th grid into there to keep the user experience more consistent.

Further SEO Optimization

https://www.w3schools.com/tags/tag_meta.asp

Submit successful new official HackUTD wikipedia page that links to the site

This will help a lot with SEO.

Fix "Dark Mode Flash"

When you have previously set the site to dark mode and reload it, you see a brief flash of light mode before it applies the styles.

The navigation bar and Hero triangular button navigate to different section through the use of # ids, which might lead to unexpected behavior when sharing the website.

Steps to Recreate: Jump to a section by clicking on its link in the navigation bar. Though jumping to the section is successful, it adds that section's id to the URL bar of the user's browser. If they then try to share the site, they will likely copy the hashtag along with the base site link, leading the site to also jump to that section on another user's device instead of providing them with the default flow.

Dark Mode

• Would like to use Browser API to automatically detect which setting the user might prefer. Would need a clean switch near the top to switch between the two and be able to store this preference using some sort of Cookie.
• Would probably want to use React's Context to provide the dark/light state to different components whose looks need to differentiate.
• Would want to centralize styles (common gradients, etc.) and provide corresponding light/dark mode values.
• Ideally would want some sort of clean opacity transition for major components (namely: Hero background) so the transition is not too abrupt.
• Furthermore, we would want to prototype at least some things out in the Figma.
• Would likely want the theme color (currently a Purple to Orange gradient) to be a bit different in dark mode; I was thinking dark purple to blue, but some other ideas might work.

Remove track color from scrollbar

it looks very ugly tbh

Restore parity with the Figma

Change HackPortal button to reflect the new image.

• New logo can be found here: https://www.figma.com/file/BSOPrukZwW5erkftrHb30y/HackPortal-(Default)?node-id=2015%3A1122
• Might have to update styles/colors to reflect these new ones if it looks off

Waht do we do about former officers?

Do we want to keep them on the carousel? Nix everyone except former directors?

Add Analytics

Probably Google Analytics for tracking site visitors, etc. Needs to be done in a way preferred for NextJS and probably using environment variables that will need to be injected in the production environment.

Add More Peripheral Shapes

In a similar vein to the background shapes present behind the HackPortal button as well as the grey logo in the background of the "Mission" section, we might benefit from adding some cute friendly shapes to the whitespace that surrounds the "core" of the website, especially the dominant white areas above/below the officers section.

There's already some prototyped in the figma; would likely just be simple SVGs that add some atmosphere to the website. They will probably need to be the muted grey color present in the figma. Another idea is having some cute/familiar designs in addition to shapes: for example, an outline of TEMOC or a crane. Kind of like the idea of a chill crane somewhere, hehe.

Loading screen / solution before styles are applied

When you load the site from the CDN or locally, there's a brief flash with unstyled HTML before our styled-components are applied. There should be some loading mechanism or way of obstructing this so we don't give the user a flash of a negative user experience.

Add E2E testing before deployments to main

Want some basic UI testing (possibly unit tests, but that's not as important to me atm) to ensure stuff can be loaded and tapped, etc. before deployments.

Mention Dallas somewhere for SEO

Fix visual problems in Hero