Are you here for Opportunity Hack 2022?

• Hacker Signup on DevPost
• Arizona In-person RSVP form
• Mentor signup and more about OHack mentorship
• Follow us on Instagram, LinkedIn, YouTube

Opportunity Hack Developer Portal (Frontend)

• 📝 ohack.dev backend code is here
• This code is the frontend ohack.dev and makes calls to the backend api.ohack.dev along with some calls to Auth0
• Like most things we build, to keep it simple, this runs on Heroku.
• We borrowed the code from Auth0 here to bootstrap our development (always a good practice)

Quickstart

• Use this doc to setup GitHub Codespaces: you won't need to download anything on your computer

• Once you have Codespaces running, install the project dependencies:

npm install

• Copy the env_template file to a .env file under the root project directory and update the <TODO> portions with your values (these are listed in our doc and will get everything running with our test backend)

• Run the application:

npm run dev

References

React UI Tools

We're using Material UI (MUI) as much as possible, check out their website for more information.

Heroku Custom Domains

It's not obvious here, but we had to upgrade our account to Hobbyist in order to get the SSL cert capability, without this, we could not make a HTTPS call nor serve HTTPS traffic on our custom domain https://devcenter.heroku.com/articles/custom-domains

We have 3 CNAMES:

• www.ohack.dev: we want everyone to land here
• api.ohack.dev: for any API calls to
• frontend.ohack.dev: the same thing as www.ohack.com, but more for completeness

Tips and Tricks

CSS Color gradient tool

We have a couple of these, and it was super easy to make with this tool.

Google's Font/Icon Collection

As learned from the Udemy course, this is a pretty easy way to get fonts and icons. Right click on the SVG button to copy the link for any icon.

IDE

If you don't want to use GitHub Codespaces, we perfer to use VSCode to do our development. Grab VSCode as your IDE, we'll use this for both frontend and backend.