# Project export: Golden Hours This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: CruzHacks 2024 - Tagline: Fast and easy way to check if all athletic facilities are open or closed at the same time. Accounts for operational hours and holidays. Has links to official UCSC schedules. - Devpost: https://devpost.com/software/golden-hours - GitHub: https://github.com/MatthewS678/GoldenHours - Demo: http://goldenhours.us/ - Team: 1 GitHub contributor(s) — MatthewS678 (11 commits) ## Devpost submission (written by the team) ### Inspiration My teammate and I both like to gym and it is a struggle to see whether a facility is open or not due to the official website being more complicated and layered than it needs to be. That is why we decided to make our website a simple and convenient way of checking the status of the facilities. Challenges Some challenges we faced included setting up Node and NVM in order to make our website in React. Another challenge was understanding how to set up the scheduling logic in order to display whether the gym was open or closed. In addition, we were unable to obtain pictures of the facilities over the Cruzhacks weekend so we had to use what we had in our camera rolls. All in all, we were able to overcome these roadblocks and accomplish something we were both proud of. ## README (from the GitHub repository) # About Created by Matthew Streib and Ryan Hui for the 2024 Cruzhacks. This was created using React, Nodejs, HTML, and CSS. This website that tracks whether or not all three athletic facilities at the University of California, Santa Cruz are open by taking into account operational hours for each facility and federal holidays and school breaks. It also features links to the offical school page for each facility for a more detailed schedule. We created this for easier access and visibility to see if our facilities are open or not since using the official school site takes a longer time and is more complicated. The official link to the website can be found [here](https://matthews678.github.io/) ## Notes One of the images does not load on the website. ## Detected evidence (automated analysis) Indexed codebase: 13 recognized source files, 13 KB. - CSS (language) — detected in the code - HTML (language) — detected in the code - JavaScript (language) — detected in the code - React (technology) — detected in the code - Node.js (technology) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (16 of 16) ``` index.html package.json public/index.html public/manifest.json public/robots.txt README.md src/App.css src/App.js src/App.test.js src/EastGymStatus.js src/index.css src/index.js src/Navbar.js src/reportWebVitals.js src/setupTests.js src/WestGymStatus.js ``` ### Dependencies - package.json: @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, react@^18.2.0, react-dom@^18.2.0, react-scripts@5.0.1, web-vitals@^2.1.4 ### Recent commits (newest first) - Update README.md - Add files via upload - Delete westcourt.JPG - Delete westcourt.jpg - Add files via upload - Update README.md - Rename README-TEMP.md to README.md - Rename westcourt.JPG to westcourt.jpg - Update index.html - Rename westcourt.JPG to westcourt.jpg - Rename westcourt.JPG to westcourt.jpg - adding pictures - Update index.html - Update index.html - Update package.json - Updated index.html - fixed name of index.html - adding index.html to root - changing name to avoid build conflict - Delete index.html in root ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "my-app", "version": "0.1.0", "private": true, "homepage": "https://matthews678.github.io", "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ``` ### src/App.js ```javascript import logo from './logo.svg'; import './App.css'; function App() { return (
logo

Edit src/App.js and save to reload.

Learn React
); } export default App; ``` ### src/index.js ```javascript import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import EastGymStatus from './EastGymStatus'; import WestGymStatus from './WestGymStatus'; import Navbar from './Navbar'; import './index.css'; const App = () => { const [isHoveredWestGym, setIsHoveredWestGym] = useState(false); const [isHoveredEastFieldHouse, setIsHoveredEastFieldHouse] = useState(false); const [isHoveredEastGym, setIsHoveredEastGym] = useState(false); return (

setIsHoveredWestGym(true)} onMouseLeave={() => setIsHoveredWestGym(false)}> West Gym

setIsHoveredEastFieldHouse(true)} onMouseLeave={() => setIsHoveredEastFieldHouse(false)}> East Field House

setIsHoveredEastGym(true)} onMouseLeave={() => setIsHoveredEastGym(false)}> East Gym

); }; ReactDOM.render(, document.getElementById('root')); ``` ### index.html ```html React App
``` ### src/setupTests.js ```javascript // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; ``` ### src/App.test.js ```javascript import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); ``` ### src/reportWebVitals.js ```javascript const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); getLCP(onPerfEntry); getTTFB(onPerfEntry); }); } }; export default reportWebVitals; ``` ### src/index.css ```css body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } h1 { font-family: 'San Francisco', sans-serif; } h1 a:hover, h1 a.active { color: white } ``` ### src/App.css ```css .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` ### src/Navbar.js ```javascript import React, { useState } from 'react'; const Navbar = () => { //logic for top part of screen const [isHovered, setIsHovered] = useState(false); return ( ); }; export default Navbar; ``` [3 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]