Hack on the Hill (HOTH) Website

This repository contains the code for ACM Hack’s Hack on the Hill website! Hack on the Hill (HOTH) is a 12-hour, beginner-friendly hackathon hosted by ACM Hack @ UCLA. This event is designed to give beginners a taste of what a hackathon looks and feels like. During HOTH, there are workshops and mentors available to provide technical support and help beginners get started on their projects.

This website is developed by ACM Hack’s Dev Team:

• James Wu (@jamesmwu)
• Arnav Roy (@aroy23)
• Daniel Zhou (@danielhzhou)
• Hannah Kendall (@hannahkendall04)
• Jaewook Cho (@dcho-jaewook)
• Jenna Wang (@ariyin)
• Kayla Hamakawa (@kaylahama)
• Nishant Ray (@Nishant-Ray)

Past contributors:

• Aazel Tan (@aazeltan)
• Alex Xia (@khxia)
• Anakin Trotter (@AnakinTrotter)
• Andy Lewis (@datowq)
• Brooke Jiang (@jiangxuann)
• Chandra Suresh (@curesh)
• Christina Tong (@christinatong01)
• Eric Yang (@eric8yang)
• Galen Wong (@GalenWong)
• Jakob Reinwald (@jakobreinwald)
• Jamie Liu (@jamieliu386)
• Jody Lin (@jodymlin)
• Jonathan Si (@jsi19)
• Katelyn Yu (@katelynsyu)
• Kaylin Chung (@kaylin-chung)
• Lillian Gonick (@lilliangonick)
• Maggie Li (@maggieelli)
• Max Lee (@maxywaxyy)
• Miles Wu (@milesswu)
• Nathan Zhang (@nathanzzhang)
• Samuel Perrott (@sperrott22)
• Satyen Subramaniam (@SubramaniamSatyen)
• Shiyu Ye (@Monicaaawa)
• Sneha Agarwal (@snehaagar2023)
• Thomas McGall (@tmag1)
• Timothy Gu (@TimothyGu)
• Timothy Rediehs (@Timthetic)

ACM Hack is a subcomittee of ACM @ UCLA, the largest Computer Science student organization in Southern California. Check out our website to learn more about who we are and what we do!

Getting Started

You’ll need:

• Git
• Node.js – we are currently using v20.

Running the Project

Type the following lines in your command line:

$ git clone https://github.com/uclaacm/hoth.uclaacm.com.git
$ cd hoth.uclaacm.com
$ npm install
$ npm run dev

You can then navigate to http://localhost:8000/ in your browser to see the website!

Notes

• Be sure to run npm install every time there are changes to package.json. Usually you’ll want to run npm i in the following scenarios:
  • after pulling from main
  • after merging main into your branch
  • after switching branches (that may have different dependencies)
• This project uses ESLint to ensure code style compliance. ESLint is automatically run when you try to make a Git commit, though this can be overridden in exigent circumstances with --no-verify. To run ESLint manually, do npm run lint.

Troubleshooting

If something breaks in a weird way, try the following in order:

• run npm install
• delete the node_modules directory entirely and reinstall dependencies by running npm install

Gallery

The main Gallery Page is implemented in src/pages/Gallery.jsx, which utilizes the components in the src/components/Gallery directory. The Gallery Page opens up to the winners of the most recent HOTH, with the option of seeing the winners of the other HOTHS as well. The winners data for each HOTH is located in the src/components/Gallery/Winners.jsx file. There is a constant list for each HOTH, which contains JS objects for the winners in each category. An example of the data for HOTH 5 is shown below:

    const hoth5 = [
        {
            year: '5',
            appName: 'BelpDining',
            description: 'Yelp for UCLA Bruins!!!',
            category: 'Best Overall Hack',
            image: 'belpdining',
            link: 'https://devpost.com/software/belpdining'
        },
		...
	];

Images for the Winners Carousel are located in the src\images\gallery-carousel directory, and images for the Winners blocks on the page are located in the src\images\gallery-winners directory. To add a new HOTH to the Gallery Page, follow these steps:

1. Create a new folder in the src/images/gallery-carousel directory with the name hoth-$(hoth number) and add the images of the winners of the new HOTH to this folder. a. Follow the naming convention of the other HOTH folders - images should all be .jpg files, with the name of the image being image{number}.jpg.
2. Create a new folder in the src/images/gallery-winners directory with the name hoth-$(hoth number) and add the images for the winners projects of the new HOTH to this folder. a. The images can have any name, but should be .png files to allow for dynamic import
3. Navigate to the src/components/Gallery/Winners.jsx file and create a new list for the new HOTH. Make sure to follow the format of the other HOTH lists.
4. In the Winners.jsx file, add the new HOTH to the winners object.
5. In the src/pages/Gallery.jsx file, add a new MenuItem to the return statement and change the default value of the year state to the new HOTH number.