Hack@Brown 2022

The front-end for the 2022 Hack@Brown website (URL yet to be setup), written in React + TypeScript. For the back-end API, see hackatbrown/api-2022.hackatbrown.org.

New to Development?

We will be using:

• Git (install)
  • Git & GitHub Crash Course
  • What is this?
    • Git is a version control system for managing a code repository. It allows us to track changes and revert to old versions of our project.
    • GitHub is a platform online that lets us host our code.
  • To verify that it works, open the terminal and type git.
    • If it works, you should see a help menu printed out for you.
• Node (install)
  • Pick the version "Recommended For Most Users"
  • What is this?
    • Node is a "JavaScript runtime." JavaScript was initially built solely for the browser. Node allows JS to be run on a computer (in a script for example).
    • We will be using it to install other libraries and modules we'll need for our React app.
  • To verify that it works, open the terminal and type node --version.
    • If it works, you should see the version number appear
• For your text editor, we recommend VS Code. It's not necessary, but it has handy features that will help us during the development process.

Installation and Usage

For this repository, make sure your node version is either 8.x, 10.x, or >=11.10.1.

In your terminal, move to the directory you want the repo to be in and run git clone https://github.com/hackatbrown/2021.hackatbrown.org.git.

Then, run:

cd 2021.hackatbrown.org/client
npm install

This will change directories into where the app lives, then install all dependencies.

Then, run npm start and navigate to http://localhost:3000.

If you run into any setup issues, please let the Dev leads know, and we will address it accordingly. Of course, always try to spend some time debugging first—it's the best way to learn!

Repository Layout

.
├── src: where all the code lives
    ├─── assets: where images and data, are stored
        ├─── data: local data
            ├─── PageSpecificName: ex. Sponsorship
        ├─── images: contains all the images we use
            ├─── PageSpecificName: ex. Sponsorship
    ├─── components: where shared components between pages are stored
            ├─── ComponentName: ex. VideoComponent
    ├─── pages: where we specify each of the pages we are building
        ├─── PageName: ex SponsorshipPage
            ├─── components: the component for this specific page
                ├─── ComponentName: ex. SponsorHome
            ├─── PageName.tsx: where the page's content and logic lives
            ├─── PageName.css: where the page's style lives
    ├─── utils: where we store common functions used
        ├── UtilName: ex. CalculateArea
└──

Try to stick to the above layout and reference it.

Deployment

The front-end is deployed using Netlify, a convenient platform for deploying static sites like this one. This allows us to trigger deploys automatically from new commits.

Branch
master	TBD	user-facing site
develop	TBD	test production implementation before going live