hackthevalley/hack-the-front

Hack The Front - HTV5 Landing Page

Overview

The landing site for Hack The Valley 9. Sign up today @ https://hackthevalley.io

Want to be up to date with our development? Check out https://next.hackthevalley.io

Get Started

1. Clone the repository - git clone [email protected]:hackthevalley/hack-the-front.git.
2. Install dependencies - npm ci.
3. Run the app - npm start.

Issues? Have a suggestion?

Create a ticket under our issues.

---

hack-the-front's Issues

Unable to apply as level of study is not selectable

Browser: Safari

Create Splash Section

• We can leave the button for now (Use a placeholder until the component is ready in ui kit)
• The assets for background + side can be downloaded from figma (feel free to ping me for more info)
  • Let's have each "island" it's own asset, and the background lines broken up into groups (That you believe would work well responsively)

Create Login form

• Manually modify the button on the spot to have similar dimensions
• Use placeholders if input is not done
• Mock API request, assume auth is getting a JWT back - store in localstorage
• Use a form element >:c

Create About Section

• Should be pretty straight forward
• Let's have the terminal card as a shared reusable component

Create dashboard main page

• Similar style as login for how the files are connected
• I would suggest making the status component separate to keep the root component relatively clean and only specific to layouts

Create Factions Section

• The interactions can be done later (I want to talk to design a bit more about this)
• Make sure you use gatsby-image! (or not and use svgr.macro if you're loading svgs)

Create Footer Section

• Straightforward enough, make sure it's responsive! owo

Add forget password section

• Make sure to link it to the login page

Create custom button

To better match the style in the dashboard and extend to include the google/facebook login ones (make those as separate components if you see fit)

Create Sponsors Section

Make actual section when we get sponsors

Create Register Form

Create Input field

• Make sure it has fancy :hover, :focus, :active stuff owo

Create file upload component

Create dropdown field

• Make sure to add integration with native dropdown, helps with mobile awesomeness

Create checkbox component

This is fairly easy compared to dropdown, just use a normal checkbox sitting ontop of some divs and stuff

Keep in mind to remap values from checked to value if possible

hackthevalley8 twitter link doesn't exist

Footer link indicates hackthevalley8, but links to hackthevalley6, and hackthevalley8 twitter (I guess now X) account doesn't yet exist.

Create FAQ Section

• Create accordion in this project, we can keep it isolated in the sections/Home/FAQ folder, and ported forward later to ui kit
• The data for storing the FAQs themselves are predone alittle to get you started

Create Navigation

• Get the logo from @htv/ui-kit/assets/logo.svg and use svgr.macro to load it
• If possible, let's make the underline animated and would slide around owo (That is cool beans stuff)
• We'll deviate from the design slightly and have the spacing from the edge of the screen and banner/icon same (This is much better and easier for us to deal with)

Setup Application page

• Add to /pages/application