A Quickstart Guide to Hackathons

The web technologies that were originally developed for the creation of Geocities pages and mailing list address forms eventually broke containment and infiltrated every single facet of the modern graphical user interface-based world.

Generally, to use them, you need to create a backend server application that can store data, make itself available on a network, and usually do most of the actual work that the thing you're making needs to do. When a web browser (aka a client) connects to it, the backend server will send client-side code to the browser that will tell the browser what to display to the user. The server application is known as the backend; the client-side code is called the frontend.

Here is a list of some of the more currently popular backend/frontend combos in very approximately escalating order of complexity:

Flask with Jinja templates is popular and highly recommended for fairly straightforward static websites.

Next.js is popular and highly recommended for somewhat more polished and complex user interfaces, if you're willing to deal with writing JavaScript for the frontend and backend at the same time.

Follow-up points:

• Yes, there are several zillion web development frameworks. We'll come up with one that leaves your sanity intact eventually.
• Note that you need to download Node.js to run JavaScript outside of the browser just like you need to download Python to run Python.
• Backend code can be written in any language that has a library that lets you communicate over a network. Even C++! But usually not C++.
• You don't need backend code if you just stick frontend code in HTML files and open them with your web browser, but that does make it pretty much impossible to do things like persist data or communicate with an API over the Internet.
• Frontend code must be written in HTML, CSS, and JavaScript because those are the languages web browsers understand.
  • Unless you're using a language that can be transformed into one of those languages, like TypeScript.
  • Or you're compiling code from other languages into WebAssembly. Look, I might be getting too detail-oriented here.

API stands for Application Programming Interface and it is a very broad term that can refer to any agreed-upon system for enabling two computer programs or libraries to interact in a constructive way.

A lot of the time, though, an API is going to turn out to be a service that provides structured data over the Internet. A classic example is the OpenWeather API. You can create an API call, which in this case requires you to identify yourself using a unique API key that you got by making an account with the service, and your program will get back data in some specified format like JSON or XML that informs it what the weather is, was, or is predicted to be in a certain area. It will handle a certain amount of requests for free, and then expect you to pay up for more. You can create a program that uses that data to do things like critique picnicking schedules.

This is essentially a backend web server (see the section above) that responds to network requests with raw data, instead of with client-side code that creates a graphical user interface. It is often useful to use an API to interact with fancy tools that you can't build yourself, like large language models (see the section below.)

Often, libraries exist that provide pre-programmed ways to request data from any given API, like this Python library that lets you get weather data with simple function calls. Keep an eye out for libraries like this, because they can be helpful.

Here is a big list I found that encompasses many web APIs.

Artificial intelligence is a highly technical field replete with functions with weird names like softmax and sigmoid and the promise that it'll replace us all (humans) any minute now, but the basic ideas are actually pretty approachable, and there are a lot of tools out there right now that package up the last few decades of the field's progress so you don't have to redo it.

Here are a few ways to delve into this fertile territory, from least to most hands-on:

Using existing tools via APIs

• As covered in the section above, APIs let you request data from other people's computers and use it in your own endeavors. The OpenAI API, which you can use to get freshly generated text or images or transcribed audio or various other things, is the basis of tons of products and projects. However, as such, it's not free.
  • If you haven't opened an OpenAI account before, you are granted $5 of free credit for signing up, which expires after three months; $5 doesn't sound like a lot, but if you look at OpenAI's pricing, it can go a fairly long way.
• Google offers a lot more free credit for its AI tools, including Gemini, its large language model. You can use Gemini 1.0 Pro for free at a maximum rate of 15 requests per minute - that won't let you deploy a product to hundreds of thousands of users, but it can be useful for a hackathon project here and there.
• Cohere, which has recently released a new large language model called Command R+ that has climbed the ranks on the Chatbot Arena Leaderboard, also offers free trial access to their API.

Using existing tools through libraries

• There are also many options for those ambitious enough to want to install a mechanical soul into their own actual computer. llama.cpp is a library that lets you run a variety of large language models locally for text completion and chat, although you'll be expected to have pretty decent specs to run the high-end ones.
• Hugging Face provides a vast array of models for different use cases that involve handling text, images, and audio, most of which can be downloaded and utilised in a few lines of code using their transformers Python library. Again, you might have to be a little bit patient to get results on an ordinary computer, but it is more exciting to see things like speech recognition happen right there in front of you.
• Also, there exist higher-level libraries that can make use of local and non-local machine learning models, like LangChain, which is a popular framework for building applications around large language models using techniques like retrieval-augmented generation (RAG), where the AI is given the ability to skim through text that you provide to identify relevant information and answer your questions. (Basically.)

Training brand new models

Although getting new machine learning models working takes quite a bit of ambition and patience, it is interesting to see how computers can turn data into the appearance of intelligence, and there are two whole extremely popular Python libraries to do it with.

• TensorFlow has more stars on Github so I'm putting it first. It is a machine learning library created by Google and later integrated with another library called Keras that provides a high-level interface to the problem of turning e.g. a gigantic number of pictures of birds into a machine learning model that can recognize species of bird. It also provides access to TensorFlow Hub, which provides many models pre-trained for things like image recognition, which can be customized to recognize specific kinds of images, like those of birds.
• PyTorch is used more by academics and is also perfectly capable of being used to create a bird recognizer. Although it seems to me like a lot of generalist usage of these libraries is centered around recognizing pictures of things, here is a YouTube video where a former OpenAI engineer uses PyTorch to build a GPT-style LLM, which is something.

Note that Google Colab and Kaggle both provide Jupyter Notebook-based Python environments that are commonly used to test out AI projects.

Native, installable apps can benefit in speed, look, and feel from being built to run on a specific kind of device. There are usually relatively straightforward recommended ways to build apps for a specific platform; there aren't a huge number of different ideas for how to deploy things crowding into the field. How you create your app depends largely on where you want it to run, so let's go through the possibilities:

Windows

If you want to create an app for Windows, you should probably use the Windows Presentation Foundation (WPF) framework. It lets you create apps using XAML, which is like HTML but for Windows, and C#. The simplest way to use WPF is to create a new project with it in Microsoft Visual Studio.

MacOS/iOS

Apple's devices currently use the SwiftUI framework for creating apps, which is build around the new-ish programming language called Swift.

Android

Android apps are currently usually built in Android Studio using a new-ish programming language called Kotlin.

Cross-Platform for Desktop

Qt is a C++ library that is mostly used to make desktop apps for MacOS, Linux, and Windows by projects ranging from Maya to VLC Player. It also has a Python version.

Cross-Platform for Mobile

Guess what, React Native is a popular way to create apps for phones that are not on the web but somehow still use JavaScript. God why.

Cross-platform in General

Flutter is a new-ish framework created by Google that I've seen work well on desktop and on mobile.