nemathew / frontend-ohack.dev

This is the front-end for ohack.dev which is tied to our main branch, the develop branch auto-deploys to test.ohack.dev.

Opportunity Hack is a 501c3 nonprofit and is a public good. We encourage you to fork and help us write code for social good!

Follow us on Instagram, LinkedIn, YouTube.

For OHack'22, ReactLovers greatly improved our UX by working on #13 update our UX. Running the code can be done similarly as outlined in Quickstart.

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
• Like most things we build, to keep it simple, this runs on Vercel.
• We borrowed the code from Auth0 here to bootstrap our development (always a good practice) we've migrated over to use PropelAuth to keep our costs down.

Quickstart

See the Development Setup instructions to get up and running quickly.

References

React UI Tools

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

DNS

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.

git Comand Line Interface (CLI) cheet sheets

Here are a couple git CLI references.

• From GitHub
• From Atlassian