Welcome! This is the GitHub repository for Oklahoma State University's (OSU) Association for Computing Machinery (ACM) chapter's website.
This is a web-application that contains information about OSU's ACM chapter. It uses the Next.js React framework.
This website is intended for prospective and current OSU students, alumni, and employers looking for information about OSU’s ACM chapter.
At the time of writing, the setup instruction are targeted towards Windows 10, Windows 11, and the Ubuntu-based Linux distributons.
This project will require you to use Git and GitHub. If you do not have Git installed:
- Install Git for from the official Git website.
You will need to connect Git to your GitHub account in order to utilize Git. This is done by setting your username and email in git. Your username would be the username of your GitHub account. Your email would be the email associated with your GitHub account. To set your git username and email:
- Go to the GitHub documentation to set your git username.
- Go to the GitHub documentation to set your email.
This project runs on Node.js version 18.18 or later. Make sure you have the correct version installed before proceeding. To install Node.js 18.18 or a newer version:
- Go to the official Node.js website and download Node.js 18.18 or later.
To get the project on your computer and set it up:
- Clone this repository. You can find instructions on how to clone a repository from the GitHub documentation.
- Open your terminal.
- Navigate to the
OKStateACM.github.iodirectory. Do this by typingcd ./OKStateACM.github.io/in your terminal followed by pressing theenterkey. - Type
npm install nextjsinto the terminal.
To run your project and see changes you make:
- Open your terminal.
- Navigate to the
OKStateACM.github.iodirectory. Do this by typingcd ./OKStateACM.github.io/in your terminal followed by pressing theenterkey. - Start the development server by typing
npm run devfollowed by pressing theenterkey. - After running the command, you’ll see a local and network URL (e.g.,
http://localhost:3000). Open one of them in your browser to view the site.
To view the site from your mobile device:
- Follow the steps in the “How to Run the Project” section above.
- Ensure the device running the development server and your mobile device are on the same Wi-Fi/network.
- On your mobile browser, enter the IP address and port shown in the terminal after running npm run dev.
- Example:
-
If your terminal shows the following:
Local: http://localhost:3000 Network: http://123.456.789.012:3000 -
Then type this into your phone's browser:
123.456.789.012:3000
-
- Example:
Below are a list of files and explanations of what they are.
OKStateACM.github.io
|----📁.github
| |----📄nextjs.yml (This file is used to deploy this project to Github.io/GitHub pages.)
|
|----📁custom-images (This folder consists of images that are worked on in Photoshop/GIMP.
| It is not meant to be used as a folder to refer to in code. The "public"
| folder serves that purpose.)
|
|----📁public (This folder has images stored in it.)
|
|----📁src
| |----📁about
| | |----📄page.jsx (This is the file used to render the about page.)
| |
| |----📁calendar
| | |----📄page.jsx (This is the file used to render the calendar page.)
| |
| |----📁components
| | |----📄Accordion.jsx (This file was created as a reuasable component to render an accordion in the FAQ page.)
| | |----📄Footer.jsx (This file was created as a reuasable component to render the website's foter.)
| | |----📄Header.jsx (This file was created as a reusable component to render the website's header.)
| | |----📄OfficerCard.jsx (This was created as a reusable component to render "cards" of each officer for the officer page.)
| | |----📄UnderConstruction.jsx (This was created as a reuasable component that can be placed when a page or section
| | | of a page is under construction.)
| | |----📚README.md (This README file consists of useful information about the components including parameters they take in.)
| |
| |----📁faq
| | |----📄page.jsx (This is the file used to render the FAQ page)
| |
| |----📁hackathons
| | |
| | |----📁acm-hackathons
| | | |----📄page.jsx (This is the file used to render the page that consists of the ACM's annual Spring hackathon.)
| | |
| | |----📄page.jsx (This is the file used to render the page that consists of hackathons the ACM
| | is involved with such as our annual Spring hackathon and Hack OKState.)
| |
| |----📁officers
| | |----📁2022-2023 board
| | | |----📄page.jsx (This page renders a former executive board.)
| | | |
| | |----📁2023-2024 board
| | | |----📄page.jsx (This page renders a former executive board.)
| | | |
| | |----📁2024-2025 board
| | | |----📄page.jsx (This page renders a former executive board.)
| | | |
| | |----📁previous-boards
| | | |----📄page.jsx (This page renders information about the FORMER executive boards.)
| | |
| | |----📄page.jsx (This is the file that renders the page of information about the CURRENT executive board.)
| | |----📚README.md (This README consists of a description of what the officers page is about and how it is structured.)
| |
| |----📄globals.css (This is a global css file that you can edit to make universal changes throughout the website.)
| |----📄page.jsx (This is where the MAIN HOMEPAGE is located.)
|
|----📄next.config.mjs (This is a file that contains custom configuration settings for next.js.)This project was deployed to Github.io by going to the settings of this repository, going to the "Code and automation" section and clicking on "Pages." The "Source" was set to "GitHub Actions" where a nextjs.yml file was suggested by Github to use. Deploying webapps will differ as time goes on given that the foundation of a webapp may change.
- How to clone a GitHub repository
- Git Branching - Basic Branching and Merging
- Next.JS course
- Tailwind cheatsheet
- Static vs Dynamic websites
- How to test a local website on your phone
- What is Tailwind?
- What is a React use state (via React)?
- What is a React use state (via Geeks4Geeks)?
- What are React components?
- What are React props?