|
1 | | -# OKStateACM.github.io |
| 1 | +# 👋 Welcome |
| 2 | +Welcome! This is the GitHub repository for Oklahoma State University's (OSU) Association for Computing Machinery (ACM) chapter's website. |
| 3 | + |
| 4 | +<br/> |
| 5 | +<br/> |
| 6 | +<br/> |
| 7 | + |
| 8 | +# 💼 Project Overview |
| 9 | + |
| 10 | +## ❓ What is this project? |
| 11 | +This is a web-application that contains information about OSU's ACM chapter. It uses the Next.js React framework. |
| 12 | + |
| 13 | +## ❓ Who is this for? |
| 14 | +This website is intended for prospective and current OSU students, alumni, and employers looking for information about OSU’s ACM chapter. |
| 15 | + |
| 16 | + |
| 17 | +<br/> |
| 18 | +<br/> |
| 19 | +<br/> |
| 20 | + |
| 21 | +# 🔨 Setup Instructions |
| 22 | +At the time of writing, the setup instruction are targeted towards Windows 10, Windows 11, and the Ubuntu-based Linux distributons. |
| 23 | + |
| 24 | + |
| 25 | +## 📦 Dependencies/Pre-Requisites |
| 26 | +### Git and GitHub |
| 27 | +This project will require you to use Git and GitHub. If you do not have Git installed: |
| 28 | +1. Install Git for from the official [Git website][Git Download Link]. |
| 29 | + |
| 30 | +#### Connecting Git to GitHub |
| 31 | +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: |
| 32 | +1. Go to the [GitHub documentation][Connecting Git to GitHub] to set your git username. |
| 33 | +2. Go to the [GitHub documentation][Connecting Email to GitHub] to set your email. |
| 34 | + |
| 35 | +### Node.js |
| 36 | +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: |
| 37 | +1. Go to the official [Node.js website][Node.js Download Link] and download Node.js 18.18 or later. |
| 38 | + |
| 39 | +<br/> |
| 40 | + |
| 41 | +## ⚙️ Configuring Project |
| 42 | +To get the project on your computer and set it up: |
| 43 | +1. Clone this repository. You can find instructions on how to clone a repository from the [GitHub documentation][How to clone a repo]. |
| 44 | +2. Open your terminal. |
| 45 | +3. Navigate to the ```OKStateACM.github.io``` directory. Do this by typing ```cd ./OKStateACM.github.io/``` in your terminal followed by pressing the ```enter``` key. |
| 46 | +4. Type ```npm install nextjs``` into the terminal. |
| 47 | + |
| 48 | +<br/> |
| 49 | + |
| 50 | +## 💻 Running the Project (Locally) |
| 51 | +To run your project and see changes you make: |
| 52 | +1. Open your terminal. |
| 53 | +2. Navigate to the ```OKStateACM.github.io``` directory. Do this by typing ```cd ./OKStateACM.github.io/``` in your terminal followed by pressing the ```enter``` key. |
| 54 | +3. Start the development server by typing ```npm run dev``` followed by pressing the ```enter``` key. |
| 55 | +4. 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. |
| 56 | + |
| 57 | +<br/> |
| 58 | + |
| 59 | +## 📱 Running on a Mobile Device (Optional) |
| 60 | +To view the site from your mobile device: |
| 61 | +1. Follow the steps in the “How to Run the Project” section above. |
| 62 | +2. Ensure the device running the development server and your mobile device are on the same Wi-Fi/network. |
| 63 | +3. On your mobile browser, enter the IP address and port shown in the terminal after running npm run dev. |
| 64 | + - Example: |
| 65 | + - If your terminal shows the following: |
| 66 | + |
| 67 | + Local: http://localhost:3000 |
| 68 | + Network: http://123.456.789.012:3000 |
| 69 | + - Then type this into your phone's browser: |
| 70 | + |
| 71 | + 123.456.789.012:3000 |
| 72 | +⚠️ Note: If you are having difficulties with connecting, you may need to adjust some firewall and port settings. |
| 73 | + |
| 74 | +<br/> |
| 75 | +<br/> |
| 76 | +<br/> |
| 77 | + |
| 78 | +# 📁 Key Files & Directories (Work in Progress) |
| 79 | +Below are a list of files and explanations of what they are. |
| 80 | + |
| 81 | +<pre lang="md"> |
| 82 | +OKStateACM.github.io |
| 83 | +|----📁Public (This folder has images stored in it.) |
| 84 | +| |----📁officer contacts (This folder has images related to social contacts.) |
| 85 | +| |----📁officers (This folder contains images of ACM@OkState board members.) |
| 86 | +| |
| 87 | +|----📁src |
| 88 | +| |----📁calendar |
| 89 | +| | |----📄page.jsx (This is the file used to render the calendar page.) |
| 90 | +| | |
| 91 | +| |----📁components |
| 92 | +| | |----📄Header.jsx (This is file was created as a reusable component to render the website's header. |
| 93 | +| | | Instead of copy and pasting the same header code into multiple pages.) |
| 94 | +| | |----📄OfficerCard.jsx (This was created as a reusable component to render "cards" of each officer for the officer page.) |
| 95 | +| | |
| 96 | +| |----📁officers |
| 97 | +| | |📄----2024-2025 board (This is a folder that consists of files that renders information about the FORMER executive boards.) |
| 98 | +| | |📄----page.jsx (This is the file that renders the page of information about the CURRENT executive board.) |
| 99 | +| | |
| 100 | +| |----📄globals.css (This is a global css file that you can edit to make universal changes throughout the website.) |
| 101 | +| |----📄page.jsx (This is where the MAIN HOMEPAGE is located.) |
| 102 | +| |
| 103 | +|----📄next.config.mjs (This is a file that contains custom configuration settings for next.js.) |
| 104 | +</pre> |
| 105 | + |
| 106 | +<br/> |
| 107 | +<br/> |
| 108 | +<br/> |
| 109 | + |
| 110 | +# 📚 Some Useful Resources on Git |
| 111 | +* [Git Branching - Basic Branching and Merging][Git Branching Link] |
| 112 | + |
| 113 | +[Node.js Download Link]: https://nodejs.org/en/download |
| 114 | +[Git Download Link]: https://git-scm.com/downloads |
| 115 | +[Connecting Git to GitHub]: https://docs.github.com/en/get-started/git-basics/setting-your-username-in-git |
| 116 | +[Connecting Email to GitHub]: https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/setting-your-commit-email-address |
| 117 | +[How to clone a repo]: https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository |
| 118 | +[Git Branching Link]: https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging |
0 commit comments