Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat/improvement: add intro and blurbs #11

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat/improvement: add intro and blurbs #11

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7ea0126
improvement: backend blurb
akevinge Aug 6, 2023
abb95bb
improvement: frontend blurb
akevinge Aug 6, 2023
5a74fad
feat: add intro
akevinge Aug 6, 2023
d58e863
perf: improve wording and move frontend and backend pages into accordian
akevinge Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion docs/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,16 @@ sidebar_position: 1

# Intro

A hacker's guide to hackathons, made by the HackUTD Team.
akevinge marked this conversation as resolved.
Show resolved Hide resolved
Most hackathon projects will want some sort of user interface - after all, you want the judges to be able to visualize your idea, right? Many projects also contain some sort of system that deals with data, whether that be user data or data from external sources. This guide explains and provides resource to learn about user interfaces and data driven systems.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lololol saying "after all, you want judges to visualize ur idea, right?" could come off lil condescending. Since this is the first introduction of top level concepts u can consider replacing this blurb w -> "Web apps can seem super scary and complicated, but after reading our guide, you can be confident to making one of your own! \n Let's think about YouTube. When the website loads in, all the videos on your homepage are presented super cleanly and you can click on any one of your choosing. We call this the frontend and all the data of what each video is we call the backend. Keep scrolling to learn more about each!" Sm like this (but prob shorter) so it's very example based and they can make connections to things they're familiar with.


## The User Interface (Frontend)

User interfaces and the software behind them are also known as the **frontend**. Frontends are what users see and interact with. When you go to a website and log in, you're interacting with the **frontend** of that website. The term **frontend** describes the text, buttons, links, input fields, etc. on a webpage and the software that goes into creating and composing them.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can prob also include what languages are included in frontend so the reader can make more connections to what is associated in frontend. So you can add "Technologies include HTML, CSS, JS and nowadays React, Tailwind, Material UI" or whatever u wanna say.

<Docs items={[{type: 'link', href: '/frontend', label: 'Frontend'}]}/>

# Data Driven Systems (Backend)

In most hackathon projects, this comes in the form of a **backend**. Imagine you are building the Google search website. You have the search bar, buttons, etc., but how do we actually get the search results? This is where a **backend** comes in handy. **Backends** usually process data and perform calculations on a remote computer (server). The **backend** may be a server or many servers that send and recieve data from a database, run expensive algorithms, control user security and login, or all of these.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing, you can also say technologies like MongoDB Firebase Spring. Just so the reader can make more connections to what technologies are associated with this.

<Docs items={[{type: 'link', href: '/backend', label: 'Backend'}]}/>