Full Stack Web App DevOps - From Idea to Cloud - All-In-One

Plan and set up a full-stack dev environment using an Ubuntu virtual machine with VirtualBox, Visual Studio Code, Node.js via nvm, Git and GitHub, and Examp with Apache and MariaDB.

Set up a Linux development environment with Oracle VirtualBox to run an Ubuntu virtual machine on any host machine, enabling guest additions and shared folders.

Optimize your Ubuntu virtual machine by configuring RAM and a shared folder, and enabling bidirectional copy-paste and drag-and-drop. Update packages, install build utilities, verify guest additions, and restart.

Install and verify Node.js as your backend runtime using a node version manager, run JavaScript on the server, and confirm the long-term support version works with node app.js.

Install and configure Visual Studio Code on an Ubuntu virtual machine, explore its basics, extensions, and settings, and test with a downloaded code sample.

Discover essential VS Code extensions for full-stack work, including Prettier, Live Server, HTML/CSS support, REST Client, ESLint, PlantUML, Draw.io, and Markdown preview, with formatter and autosave settings.

Create a local repository, frontend and backend with hello world, and run them to verify operation. Then generate an empty Arc 42 architecture document with top-level chapters.

Install git, initialize a local repository, push to GitHub, and manage version control with core commands, branches, and merges for collaborative full-stack development.

Learn to connect your local project to a GitHub remote repository, rename the default branch to main, and push code securely from Visual Studio Code with authentication and remote setup.

Set up xampp to run a local web stack with Apache, MariaDB, phpMyAdmin, and a Perl interpreter; deploy your front end to the local deployment folder and test on localhost.

Set up a full-stack development environment with VirtualBox and Ubuntu. Install NodeJS via the node version manager, configure Visual Studio Code with extensions, and push the initial project to GitHub.

Explore requirements engineering and software architecture documentation using Arc 42 template, the C4 model, and documentation as code. Create initial architecture documentation with diagrams in PlantUML, Draw.io, and Markdown.

Master requirements engineering to cover 80% of daily tasks by gathering, documenting, validating, and managing functional and non-functional requirements, aligning stakeholders, and applying iterative, agile traceability.

Explore arc 42 essentials, a lightweight, adaptable template to document software architecture, covering 12 chapters from context and scope to quality requirements, decision records, and deployment views.

Explore the C4 model for visualizing software architecture across context, container, component, and code levels, using diagrams as code with PlantUML for Arc 42 documentation.

Learn to implement documentation as code within your workflow using markdown, plantuml, and draw.io. Leverage version control automation and collaborative reviews to keep diagrams and architecture accurate.

Capture functional and non-functional requirements for a full-stack wheel of fortune app, covering software quality dimensions, mockups, REST backend on port 3000, and deployment to local and VPS with storage.

Identify stakeholders and outline goals to shape the Arc 42 software architecture document. Define functional and quality goals, plus constraints, to guide a maintainable full-stack app.

Define the system context with a simple context diagram and identify building blocks: frontend, backend, and file system or database; align deployment views from local to integration with ISO 9126.

Learn version control workflows by staging and committing changes, pushing to a remote repository, and leveraging Git in Visual Studio Code to secure architecture diagrams.

Advance requirements engineering and architecture documentation by defining functional and non-functional requirements, applying quality criteria, eliciting and validating with stakeholders, and using Arc 42 and C4 for architecture diagrams.

Plan and implement front end web development by learning HTML, CSS, and JavaScript basics, practicing in CodePen, and defining data models and backend interfaces for a cohesive architecture.

Explore the basics of HTML, CSS, and JavaScript, and learn how structure, styling, and dynamic behavior shape web pages. Practice with CodePen’s live previews and consult the core front-end documentation.

Master the basics of HTML and semantic structure, covering headings, paragraphs, lists, tables, forms, links, and media, to build accessible pages for search engines and screen readers.

Explore css essentials by using selectors: element, class, and id, to style a form, and master the box model with content, padding, border, and margin for layout control in CodePen.

Explore modern layout techniques with CSS flexbox and grid to center and align form elements, switch between two-column grids and flex rows, and use variables for colors.

Master JavaScript essentials for front-end development, including variables, data types, functions, arrow functions, and control flow, and learn how the DOM and querySelector enable dynamic content updates.

Explore JavaScript essentials by learning how to add event listeners, handle async and fetch API calls with await, and manage errors using try/catch and modules.

Begin implementing the front end by turning the architecture decision record into a functional HTML structure with elements such as a wheel spin button, result message, stats, and reset button.

Style the wheel of fortune front end with CSS, choosing inline or head styles, and apply color, borders, padding, and flexbox centering to create a centered, styled game area.

Style two buttons with green background and white text, add padding, borders, hover effects, cursor changes, and spacing; apply gray styles to the reset button and messages with live preview.

Implement frontend behavior with JavaScript and DOM manipulation to spin the wheel, display and save game state, and reset statistics using mocked backend calls.

Define the frontend-backend REST API interface using a game state data object (wins, losses, last result) and endpoints for get, spin, and reset, exchanging JSON over HTTP.

Turn mocked frontend behavior into real backend calls via rest api, http, and json, using get, spin, and reset endpoints with fetch, error handling, and dto-driven data.

Master front-end fundamentals with html, css, and javascript, define a json game state dto and base url with https, and implement mocked data with basic error handling.

Learn node.js basics, npm, and express to build REST APIs, create architectural decision record, test with curl, and implement a skeleton with endpoints for game state and spin the wheel.

Master REST basics: HTTP protocol, resources in URLs, nouns-only endpoints, get, post, put, delete, status codes, JSON data, and practical testing with curl and REST client.

Implements a Node.js backend and creates an architectural decision record for the chosen technology. Initialize the project with npm, install express, and explain version ranges, package.json, package-lock.json, and local node_modules.

Set up the Express web framework, enable CORS, install Nodemon for automatic restarts, and create three endpoints (GET /, POST spin, POST reset) tested on localhost:3000.

Implement a read game state endpoint in express, persisting state to a json file and testing with curl, ensuring startup reads the file and returns json.

Implement a reset endpoint that clears and saves a game state, returning empty state as JSON; use spread syntax to clone initial state and test via curl post to reset.

Implement a spin endpoint that selects a wheel value by weight, updates and saves the game state, and returns the updated state as JSON; test with curl.

Integrate the backend and frontend, test the interaction, add logging and error handling, fix post and get requests, and use browser dev tools to debug the frontend-backend data flow.

Learn to commit backend changes, create a proper .gitignore to exclude node_modules, logs, and the database file, and push updates while ensuring frontend and backend integrate smoothly.

Learn to build a node.js backend with express, implement rest endpoints using get, post, put, and delete, and handle status codes, parameters, and testing with curl and rest client.

Discover a simple full stack web app with a single HTML front end, a Node.js backend, and REST APIs to fetch, spin, and reset the wheel of fortune.

Learn to deploy a web app locally using an Apache server, configure network access, port forwarding, and a development machine to make your app reachable from anywhere on the internet.

Deploy and serve a full-stack app using a web server as a single entry point, serving static frontend and proxying API requests to backend, with https, caching, and load balancing.

deploys a front-end and node backend on ubuntu with apache, configures host and http access, sets up static frontend, and reverse proxies /api to port 3000 for localhost deployment.

Expose the Ubuntu VM via router and VirtualBox port forwarding, mapping Apache port 80 and the node backend port 3000, then set api to slash api and test.

Set up port forwarding from host to a VirtualBox dev VM, forward 8080 to 80 via the router, and test access from host, mobile, and the internet.

Review up-to-date architecture documentation and track requirements progress while validating front-end and back-end integration, rest communication, and local deployment with the ARC42 deployment update.

Learn how to deploy a full-stack web app locally by configuring Apache as a single entry point, serving static frontend files and forwarding backend API calls to internal backends.

Learn to plan and implement a configurable data layer with the repository pattern, decoupling business logic from data access and enabling MariaDB or file-system backends through a runtime DB type.

Explore MariaDB as a relational database management system, learn SQL with DDL and DML commands, and practice creating, altering, and querying tables like gamestate with primary keys and auto increment.

Update the software architecture to reflect MariaDB in the backend and create a white box view, introducing a repository pattern to decouple core logic from the data persistence layer.

Isolate business logic from data access by refactoring into a file system repository, documenting interfaces, exporting functions, and preparing asynchronous calls for upcoming database integration.

Create MariaDB repository stub from the file system repository and enable data-source switch using a dot env config with a db type to toggle between MariaDB and file system.

Connect to a local MariaDB instance, create database lucky DB and table game state with id, wins, losses, and last result, and implement a MariaDB repository with a five-connection pool.

Implement the DbRepo interface for MariaDB to read and write the game state using SQL queries and insert statements, including wins, losses, and last result, with reset functionality.

Check code quality by validating database integration, error handling and logging across backend and frontend, while updating git workflow and environment practices for portable, platform-independent deployment.

Master repository-pattern data source integration by switching between file system and MariaDB backends, while applying MariaDB SQL (DDL and DML) to support read, save, and reset game state.

Plan and deploy a full stack app to a DigitalOcean Ubuntu droplet, configuring ssh keys, firewall, nginx, and a node.js, mariadb stack with frontend served and backend proxied.

Learn how to choose a virtual private server provider, create a droplet, connect via SSH with a key pair, install a software stack (nginx, nodejs, MariaDB), and deploy using GitHub.

Document architecture ideas before implementation, update deployment diagrams, and select a VPS provider with an architecture decision record, using Ubuntu, Nginx, and MariaDB for development, staging, and production environments.

Register for DigitalOcean and claim $200 free credit after adding a payment method, then create droplets for your cloud deployment.

Create and configure an Ubuntu droplet on DigitalOcean using the free credits, select Frankfurt region, and set up SSH access with a root password and key pair.

Create a secure passwordless login to a cloud instance by generating an SSH key pair, copying the public key to the instance, and logging in with the private key.

Install and configure Node.js on a vps with NVM, verify versions, reload environment variables, and prepare the latest long-term supported Node.js for the backend.

Install and configure nginx as a production web server to serve the front end and reverse proxy the backend api on port 80 and 3000.

After installing NodeJS and nginx, learn to check out code from GitHub using a personal access token for secure authentication, clone the repository, and inspect the front end.

Deploy front end to the deployment folder, install dependencies, and run the backend with node. Configure nginx to serve the app on port 80 and test the API and MariaDB.

Shows cloud deployment on DigitalOcean, securing access with SSH keys, installing Node.js and Nginx, setting up MariaDB, and configuring front-end and API routes for a gamestate database.

Configure MariaDB integration, create and secure a .env file, set a root password and a non-root user, update backend configuration, restart services, and prepare deployment with domain name and ssl.

Perform quality checks before pushing code, create a dedicated database user restricted to localhost, update architecture and deployment diagrams, and commit and push changes for safer, role-limited access.

Deploy a cloud VPS with DigitalOcean, configure SSH keys, install node via nvm, and set up Enginex and MariaDB to run a full stack app accessible over the internet.

Register a professional domain and set DNS with a subdomain for your front end. Enable HTTPS with Let's Encrypt on a DigitalOcean nginx deployment and secure the instance with least-privilege.

Register a domain with Namecheap, configure DNS records including A records and CNAME for subdomains, then enable HTTPS with Let's Encrypt SSL for nginx.

Select a registrar by recording an architecture decision for the domain provider, compare Namecheap, Cloudflare, and GoDaddy, then register with Namecheap and buy the domain.

Register with namecheap, buy a domain name (a .com for €9 per year), and apply a promo code. Then set up DNS records and SSL certificates manually for your site.

Log into Namecheap, configure A and CNAME records to point to the IP address of your droplet, set a wheel of fortune frontend subdomain, and test nginx after DNS propagation.

Configure nginx to serve the wheel of fortune frontend on a subdomain, test A and CNAME records at Namecheap, and implement server blocks for main and subdomains.

Discover tls essentials: secure data over https with certificates from a certificate authority like Let's Encrypt, using certbot to automate certificate signing requests on nginx.

Configure nginx with certbot to enable tls and https for the main domain and the front-end subdomain, install Let's Encrypt certificates, and set http to https redirects.

Apply least privilege by configuring ufw to allow only http, https, and ssh, secure the full stack and vpn, verify TLS certificates, and commit changes.

Register a domain with Namecheap, configure DNS records for subdomains behind nginx, and implement TLS using Let's Encrypt certificates to secure HTTPS and harden the cloud environment.

Review the full stack web development lifecycle, from setting up VirtualBox and Ubuntu, VS Code, and GitHub to deploying on DigitalOcean with Nginx, MariaDB, Apache, and Arc42/C4 diagrams.