React-based frontend for the Hispanic Association of Computer Scientists website. We allow our members to be able to contribute to the website and gain experience with industry tools.
Refer to the below Quick Start guide first to get set up!
This project is only intended for students at The University of Texas at Austin! We appreciate any offers of help, but please do not try to contribute if you are not a member of the Hispanic Association of Computer Scientists (HACS) at UT Austin.
IMPORTANT: Prior to anything, you must ensure the following steps are complete:
NOTE: Step 1 must be completed in order to be sent an invite for steps 2 and 3.
You will need:
homebrew (macOS only)Intro to the Command Line in our guidesIf you aren't familiar with git, please be sure to check out this tutorial or this video before working with the site, and reach out to the current web development officer for more help.
Bonus Tip: Follow the Great Environment Setup guide for a good starter development environment.
Please make sure you have completed the Pre-Setup Setup steps above on your current machine.
Open up your terminal of choice. Change into a good directory for all things HACS web dev! (i.e. hacs-webdev/)
cd hacs-webdevClone the hacs-frontend repository:
git clone https://github.com/texas-HACS/hacs-frontend.gitNavigate into the project:
cd hacs-frontendAnd install the npm dependencies:
npm install --legacy-peer-depsOR
npm i --legacy-peer-depsThis installs all packages/libraries you currently needed for this project locally.
Request the environment variable file (.env) from the current web development officer.
Save this file to the root of the hacs-frontend project. This means that .env should be located at .../hacs-webdev/hacs-frontend/.env
IMPORTANT: Please do not share the file or any of its contents with anyone. You won't be doing any good to us and this will just be a nuisance.
MAC USERS: You may not be able to rename this file properly using just Finder. Once you have placed the env file in the correct location, open up the terminal, navigate to hacs-frontend, and perform the following command:
mv env .envThis will rename env to .env, which is able to be done at the terminal level, but not in Finder.
You can then start the development server for our frontend:
npm startThis is a script in the package.json file (hacs-frontend/package.json). Its function is to start up webpack and a developer server where your changes will be watched and automatically recompiled so you can see them live.
If a tab isn't opened automatically, you can go to http://localhost:3000/ in either Chrome or Edge.
Feel free to mess around with the code and see what happens. This will not change anything except for the code on your machine!
You will also be able to see these changes occur in your browser whenever you save your files (since it will recompile if npm start is left running).
NOTE: Please reach out to the current Web Development Officer if you have trouble with any of these steps.
The best way of learning is by doing. Head over to the hacs-frontend repo in GitHub and assign yourself to an issue. Reach out to the current Web Development Officer if you need help with this or would like to be assigned an issue.
Of course, feel free to collaborate on issues!
IMPORTANT: Please be sure to follow the conventions for our site found below.
Refer to this readme and the guides found in hacs-frontend/guides first for further setup or quick references.
Watch this React Tutorial for Beginners and these videos about react hooks: useState, useEffect, useRef. This aligns pretty well with our site, and goes through a fairly simple tutorial to get started. Try and relate the concepts discussed to what you see inside of our own codebase.
There are also a few guides (and more to come) found in hacs-frontend/guides.
Here are the topics covered:
Introduction to Website Development
git, GitHub, and Version Control
Check out the "Issues" tab at the top of the page! These are features or bugs that we want to work on. Feel free to assign yourself to any issue that hasn't been claimed, or message the current web dev officer in the Discord if you want to work on something different.
If there is an issue that you want to work on that someone else is working on, feel free to message them and see if they want any help!
With any questions, feel free to reach out to Alexander Valdez!
In order to have a consistent flow with developer branches we need to implement a naming convention on new branches, as well as a step by step approach to merging and pull requests.
developerName-feature
# Example
mydevname-admin-panelmaster and the compare branch to your personal branchFinish fleshing out the how to contribute section
Add in current web dev team
In the project directory, you can run:
npm startRuns the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm testLaunches the test runner in the interactive watch mode.
See the section about running tests for more information.
TODO: Add some helpful scripts to hacs-frontend/scripts and outline them here.
TODO: Finish the command line intro guide and put some helpful bash commands and their usage here