In the foggy harbor, nestled amidst the whispering mist, stands an old and mysterious jellyfish shop known simply as “The Siren’s Glow.” Its dilapidated facade, weathered by time and the salty sea air, beckons intrepid explorers to uncover the secrets lurking within its enigmatic depths. As you approach, the air thickens with an eerie ambiance, an ethereal melody carried on the wind. The shop’s windows, obscured by layers of fog and the passage of years, give only tantalizing glimpses of the mystical wonders held within. An aura of both allure and trepidation surrounds this establishment, as if the very walls hold memories of forgotten tales and unseen dangers.



Ahoy stranger, Welcome to the Jellyfish shop!

This crash course presents how to create fully functional web app composed out of frontend, backend and database. Remember that this is a fast track course. I meant to give you the foundation, and practical example regarding web app. It is meant to be a starting point for those completly new to the topic and want to create very own fully functional web app.

?? Deploying

Web app - Uber, Bank websites and apps, Internet shops

?? What “dynamic” means

?? How it differs from static website

It is designed to equip you with the knowledge and skills necessary to create robust and dynamic web applications.

Web application programming topic is so complex and broad that including information is simply impossible Thats why this course takes different approach. It focueses on what is important - just meat, no potatos. It will show all necessary steps, 1 by 1, provinding just a brief explanations so you can understand what is going on to give you minimal working example and understanding how such projects are composed and working, all the fundmanetal concepts.

However for those who are seeking even wider the knowlege. I will provide a links to the great articles, tutorials and docs that helped me understand the smallest details.

Task description

We will create and add custom context menu buttons that will appear when we right-click on VEXpression and Python code fields in Houdini nodes. Pushing these buttons will trigger different actions defined in the tool’s Python code. (Contents of fields will be sent to the model as a prompt and the model’s answer will be put back into the fields)

Origins

Back in times when I was a student, I had a pretty advanced knowledge of programming Back then I was already programing multithreaded linux programs and video games, however I had no idea how web app are working. That was an unexplored realm for me.

Fortunately, at the 3rd year of my Computer Science studies we had one-semester-long course dedicated for creating webapp in the team. We were supposed to create system for reserving a parking spots via mobile application and internet website with backend system handling the requests and database storing all this data.

Project components

Our project will be composed out of four key elements:

  • Proxy server (we will add in later)
  • Frontend (web app and mobile app)
  • Backend
  • Database

Of course there are tones of useful ready solutions, frameworks, libraries, and kits to streamline the development process, provide reusable components, and enhance the overall developer experience. They were created so you don’t need to write everything from scratch (and believe me you really don’t want to do this) Jellyfish Shop in this course will be based on the tech stack that I was composing throughout the years. I find it the most safe, stable, universal and what is crucial - pleasant to use.

Here is a system diagram: ??

Looks scarry? Don’t worry everything will be explained step by step. By the way, some jellyfish that brave fisherman bring to the shop from time to time are much more terrifying

You can notice that:

  • Every element runs in its own container (What does it mean will be explained later).
  • Elements communicate with each other, by exchanging data via requests and responces.
  • End users (web apps 🖥️, mobile apps 📱) are linked with the frontend.
  • Other internet traffic 🌐 (other programs, bots, etc) is linked directly to backend.
  • Frontend does not have access to the database (it is a good practice)

Frontend

Frontend refers to the client-side of a web application, which is the part that users interact with directly.

💡 In the case of Uber, the frontend is an application installed on your smartphone where you can order a ride, as well as the application installed on the driver’s smartphone.

Frontend development focuses on ensuring a seamless user experience and effective presentation of data, as well as exchanging this data with the backend.

For Jellyfish shop frontend we will create both website and mobile app.
Tech stack we will use in frontend looks as follows:

  • HTML - Markup language that defines the structure and content of web pages. It uses tags to mark different elements of a web page, such as headings, paragraphs, images, links, tables, and forms. It is a foundation of 99% of websites in the internet.
  • CSS - Style sheet language used to describe the presentation and styling of HTML elements. It allows web developers to control the layout, appearance, and visual properties of web pages.
  • JavaScript - High-level, interpreted programming language primarily used for web development in order to create dynamic content, and manage the behavior of web applications. While HTML is serves as a structure, JS is utilized for handling everything what is interactive: user event handling, data fethching from the backend, dynamic content generation or data validation.
  • React - JavaScript framework used to build user interfaces, making it easier to create interactive web pages with reusable building blocks called components. It helps developers efficiently update and manage the display of data, resulting in faster and more responsive web applications.
    Popular alternatives to React would be: Flutter, Angular, Svelte, Vue, Mithril, Vanilla, and more. Great comparision of those can be found here
  • Next.js - React extension framework that provides support for server-side rendered and statically generated React applications. It simplifies the development of performant and Search-Engine-Optimizatized applications by offering features like automatic code splitting and client-side routing.
    Popular alternatives to Next.js (designed for alternative frameworks) would be: Gatsby, Nuxt.js, Angular Universal
  • Tailwind CSS - UI framework that offers a comprehensive set of pre-defined classes to style elements in a flexible and efficient manner. It offers a highly customizable and rapid development experience by allowing developers to quickly apply styles using intuitive class names without the need for writing custom CSS. What is more, there are planty of UI components and ready page sections kits available for free in the internet.
    Popular alternatives to Tailwind CSS are UI frameworks for React like: Bootstrap, Grommet, MUI, Chakra UI, Ant Design, Blueprint UI, and more.

Backend

Backend refers to the server-side of a web application or system. It is the home of all the components, processes, and functionalities that are responsible for handling data storage, data processing, and communication with the frontend. It is responsible for managing the business logic, database operations, user authentication, API integrations, and other server-side operations that enable the functioning of a web application.

💡 In the case of Uber, the backend is the system running on the server that gets your ride request from the app (frontend) and is responsible for connecting you do the driver, calculating the price, sending request to the frontend of the driver, and tracking your location while you are commuting. Additionaly it handles communication with the database. For example to store users and drivers ratings, trip histories, etc.

Tech stack we will use in backend looks as follows:

  • C# -
  • ASP.NET -
  • Swagger -

Database

  • MongoDB -

App deployment

Contenerization

🐋 Whole system will be deployed as a stack of Docker containers in one container network.

A container is a lightweight, standalone, and executable software package that includes everything needed to run an application, including the code, runtime, system tools, and libraries. It provides a consistent and isolated environment, making it easier to deploy and manage applications across different systems. Each container is an environment hosting a separate operating system (OS), usually very minimal distribution of Linux, with some storage space with our program loaded, then the only thing this OS does is running and hosting our program.

The benefits of using Docker containers include enhanced portability, as containers can run consistently across different environments, improved scalability, as containers can be easily replicated and deployed, efficient resource utilization, as containers share the host system’s kernel, and simplified application management, as containers encapsulate the application and its dependencies in a self-contained unit. You can run Linux programs in those containers while they are hosted on Windows, everything is system-agnostic.

💡 Imagine you have a program that uses 50 different dependencies. If you want to run it you would need to download all of them to your local machine what makes it cluttered. However when you have a container - a separate, abstract environement - everything happens there and your machine is clean and intact.

💡 Also imagine that you are creating a program that handles 1k user requests per second. That’s already a lot, but what if your bussiness in one-milion-dolar idea and requests grew to 10k requests in one month!? Well, one machine may be not enough to handle such traffic. Here conteneriazarion shines. You can just spawn more container instances with a copies of your program and split the trafic between them! (Scalling is a sophisticated field with sophisticated tools that won’t be covered here. You can read about Kubernetes if you are interested)

Containers load system using docker image - a file containing whole OS + your program. In comparison to running the program locally, in container setup there is one more additional step. You need to prepare a Dockerfile - a special set of instructions defining how the image should be generated: specifying the base image, the dependencies to install, environment variables to set, files to copy, and commands to execute during the image building process.

Each of Jellyfish shop elements will be running in its own container, which means that each needs to have its own Dockerfile. With specific base image (eg. React uses different one than ASP.NET due to the fact that they have very different dependencies)

Each container can be run separately with command docker start <IMAGE> and stopped with docker stop <CONTAINER_ID>. Currently running containers can be listed using docker ps.

Launching each container one by one is not very handy approach, it is rather painful. Luckily we can laverage the power of docker-compose! Docker Compose is a tool that allows you to define and manage multi-container applications. It uses another instruction file to define the services, networks, and volumes required for your application, making it easier to orchestrate and deploy complex, interconnected containers.

When you have your compose file you can start all your containers at once using docker compose up command, and stop using docker compose down.

If you are hungry for docker knowledge, there is a dead whale storage in the basement of the shop here is a nice resource.

Closing words

If you reached this very bottom section of the post, you should know what we will be building. Are you ready to delve deeper? Then gather your gear, polish your lanterns. Shopfront building adventure awaits in the depths of this blog.
Local citizens and fishermen are getting impatient.

🐡 🐡 🐡