rstackhouse / frontend-ohack.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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)

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.

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.

git Comand Line Interface (CLI) cheet sheets

Here are a couple git CLI references.

About


Languages

Language:JavaScript 96.0%Language:CSS 3.9%Language:Dockerfile 0.1%Language:Procfile 0.0%