From Design to Deployment: Teaching App Development with Vite and React

If cybersecurity teaches students how to protect digital systems, app development teaches them how to build them.

In our sequence, students do not jump straight into React. They begin with Human-Computer Interaction design principles and a foundational web app build using HTML, CSS, and JavaScript. Only after they understand users, structure, layout, and basic interactivity do we move into modern app development with Vite and React.

This progression matters. React is powerful, but without design thinking and foundational web knowledge, it becomes copy-and-paste programming. The goal of this unit is not just to use a framework. It is to understand how modern web applications are structured and why.


Learning Goals: What Are We Trying to Teach?

A Vite and React unit should help students understand four core ideas.

First, how modern front-end applications are structured. Students learn what React is and why it exists, and how Vite provides a fast development environment.

Second, component-based thinking. Instead of writing one long HTML file, students build reusable components and pass data between them using props.

Third, state and interactivity. Using the useState hook, students learn how data changes drive what users see.

Fourth, deployment and version control. Students push code to GitHub and deploy live applications using GitHub Pages.

By the end of the unit, students are not just running a local development server. They are building, structuring, and deploying real applications.


Preparation: HCI and Foundational Web Apps

Before React, students complete an individual web app project using HTML, CSS, and JavaScript. They create multiple pages, use Flexbox or Grid for layout, and implement at least two interactive features.

This phase reinforces:

  • Semantic structure
  • Navigation and usability
  • Visual consistency
  • Basic JavaScript interactivity
  • GitHub repository management
  • Deployment to GitHub Pages

Equally important, this stage connects directly to HCI design. Students consider:

  • Who is the user?
  • What problem does the app solve?
  • How should information be organized?
  • What makes an interface intuitive?

By the time we introduce React, students already understand how interfaces function. React becomes a tool for scaling those ideas, not replacing them.


My Step-by-Step Teaching Approach

We begin with setup and tooling.

Students learn how to create a React project using Vite, install dependencies, run npm run dev, and open their local development server. This step demystifies modern tooling. Students see that frameworks are structured environments built on JavaScript.

Next, students build a simple React app. They modify App.jsx, change text, and confirm that the browser updates instantly. This immediate feedback loop reinforces that the browser reflects the component tree.

Then we introduce props. Students create a second component and pass at least two pieces of data from App.jsx. This is often the turning point. They realize React is about composition and data flow.

After props, we introduce state using the useState hook. Students create a counter, toggle a message, or build a simple score tracker. They connect user interaction to state updates and visible UI changes. This is where the reactive model clicks.

Finally, students complete an individual React mini project. The project must include:

  • At least two components
  • Props passed correctly
  • useState implemented
  • Clear content and structure
  • Proper Git commits and pushes

To close the loop, students deploy their apps to GitHub Pages. Seeing a live URL changes the stakes. The project is no longer just code. It is a published product.


Benefits of Teaching App Development with React

It introduces industry-relevant tools. React is widely used in professional environments. Students gain experience with real workflows: npm, dependencies, configuration files, and build processes.

It strengthens abstraction. Components force students to think modularly. Props reinforce data flow. State introduces reactive programming.

It builds confidence with tooling. Many students initially fear the command line and configuration files. By the end of the unit, they are comfortable running dev servers, installing packages, and deploying builds.

It reinforces version control habits. Every assignment requires commits and pushes. Students begin to see Git not as a requirement but as part of the development lifecycle.

It scales naturally. After mastering components and state, students can extend into routing, APIs, authentication, or backend integration.


Barriers We Should Anticipate

The first barrier is cognitive overload. Modern JavaScript tooling can feel overwhelming. Students encounter npm, configuration files, node_modules, and build scripts all at once. The solution is pacing. Each concept is introduced incrementally, with a working example before abstraction.

The second barrier is framework confusion. Students may not fully understand how HTML, CSS, and JavaScript work before React abstracts them. That is why the prior HTML, CSS, and JavaScript project is essential. React makes more sense when students already understand the fundamentals.

The third barrier is debugging frustration. Errors in JSX or imports can stop an app from compiling. Teaching students how to read terminal messages and browser console output is a necessary part of the unit.


Interdisciplinary Connections

App development is not just computer science.

In design and visual arts, students apply principles of layout, hierarchy, contrast, and usability.

In business and entrepreneurship, they consider product-market fit, audience targeting, and minimum viable products.

In writing and communication, they craft content that is clear, concise, and user-focused.

In mathematics, they reason about logic, state changes, and conditional rendering.

In psychology, they analyze how interface design influences behavior and attention.

The interdisciplinary nature of app development reinforces that building software is not purely technical. It requires design thinking, communication, and empathy.


What Matters Most

Teaching React and Vite is not about memorizing syntax. It is about helping students understand how modern applications are structured and how ideas move through a system.

Students begin with HCI design and foundational web development. They then move into component-based architecture, state management, and deployment. By the end, they have built and published something real.

App development teaches students how modern software is organized and scaled. In today’s world, that understanding is essential.

Designing a Safer Digital World: Teaching Cybersecurity in K–12

When we teach computer science, we often focus on building things: apps, games, websites, robots. Cybersecurity asks a different question. How do we protect what we build and the people who use it?

From ransomware attacks on hospitals to phishing scams targeting everyday users, cybersecurity is no longer optional. It is foundational digital literacy. If we truly believe in computer science for all, then security must be part of that foundation.

In this post, I outline the learning goals of a cybersecurity unit, the steps I take when teaching it, the benefits of including it in a CS curriculum, the barriers we should anticipate, and how cybersecurity connects to broader justice-centered and interdisciplinary conversations.


Learning Goals: What Are We Trying to Teach?

A strong cybersecurity unit should help students understand four major areas.

First, personal digital responsibility. Students should know how to create strong passwords, why password length matters more than simple symbol substitution, how multi-factor authentication works, and how to identify phishing attempts. They should be able to evaluate URLs carefully and recognize deceptive domain structures.

Second, core security concepts. This includes the CIA triad: confidentiality, integrity, and availability. Students learn about malware types such as viruses, worms, Trojan horses, and botnets. They examine distributed denial-of-service attacks and discuss how and why systems fail.

Third, cryptography foundations. Students explore symmetric and asymmetric encryption, public and private keys, hashing, salting, and why one-way functions are powerful. They connect these ideas to HTTPS and Transport Layer Security.

Fourth, ethical and justice dimensions. Students consider the difference between white-hat and black-hat hackers, the role of surveillance, and who is most affected when systems fail. As discussed in Introduction to the Special Section on Justice-Centered Computing Education, computing education must grapple with power, history, and systemic impact. Cybersecurity provides a natural entry point into those conversations.


My Step-by-Step Teaching Approach

I begin with the real world.

Students examine current events involving data breaches, ransomware attacks, and identity theft. We discuss what went wrong, who was harmed, and whether the incident could have been prevented. This immediately reframes cybersecurity as a human issue, not just a technical one.

Next, students conduct a personal security audit. They reflect on password length, password reuse, and whether they use multi-factor authentication. We examine phishing examples and compare legitimate domains with deceptive ones. Students quickly realize how easy it is to be misled.

After that, we move into classical encryption. Students encrypt and decrypt messages using the Caesar cipher, substitution ciphers, and the Vigenère cipher. They discover how patterns can be exploited and why key length matters. This historical progression makes modern encryption easier to understand.

From there, we explore hashing and password storage. Students compare plaintext passwords with hashed values and see how even small changes produce dramatically different outputs. We discuss why simple hash functions such as SHA-256 are not ideal for password storage and why algorithms like bcrypt are preferred. Salting becomes a concrete solution to rainbow table attacks rather than an abstract concept.

We then simulate public key encryption. Using physical analogies such as padlocks, students model symmetric and asymmetric systems. They understand why sharing a secret key across long distances is risky and how public key systems solve that problem. This leads naturally into discussions of Diffie-Hellman, RSA, digital certificates, and TLS.

Finally, we connect everything back to larger questions. Who controls encryption standards? Why do governments debate encryption policy? How does surveillance intersect with civil liberties? Justice-centered computing emphasizes examining systemic implications. Cybersecurity gives students the vocabulary to participate in those debates.


Benefits of Teaching Cybersecurity

Cybersecurity builds critical thinkers. Students learn to question links, attachments, data requests, and authority.

It builds digital agency. Students move from passive users to informed participants who understand how systems protect or fail them.

It strengthens mathematical reasoning. Concepts such as modular arithmetic, exponential growth, and computational hardness become meaningful when tied to encryption.

It is immediately relevant. Every student has online accounts and a digital identity. Security education protects all of it.

It deepens ethical awareness. Students see that technology is never neutral. Security failures often disproportionately harm vulnerable communities. Justice-centered computing reminds us that participation alone is not enough. We must also examine how systems distribute risk and protection.


Barriers We Should Anticipate

One barrier is the perception that encryption is too advanced. Words like RSA and Diffie-Hellman can intimidate students. The solution is to start with analogies, physical simulations, and classical ciphers before introducing formal terminology.

Another barrier is fear-based framing. If cybersecurity is presented only as a series of threats, students may feel overwhelmed. Instead, the emphasis should be on empowerment. Students leave knowing what they can control.

Accessibility is another concern. Cryptographic ideas can be cognitively demanding. Applying principles from Universal Design for Learning, as described in Increasing Access, Participation, and Inclusion within K–12 CS Education through Universal Design for Learning and High Leverage Practices, helps ensure instruction is flexible, multimodal, and inclusive. Security education should be accessible to all learners, not reserved for a technical elite.


Interdisciplinary Connections

Cybersecurity does not belong solely in computer science.

In mathematics, students explore modular arithmetic, prime factorization, and exponential functions.

In history, they study Alan Turing and the Enigma machine.

In civics, they debate privacy versus national security.

In psychology, they examine why phishing and social engineering are effective.

In social justice discussions, they analyze how surveillance and data collection can disproportionately affect marginalized communities.

Justice-centered computing education encourages us to situate technical knowledge within larger historical and political contexts. Cybersecurity offers a powerful opportunity to do exactly that.


What Matters Most

Cybersecurity is often described as a cat-and-mouse game between attackers and defenders. In the classroom, however, the goal is not to train professional penetration testers.

The goal is to develop digitally literate citizens, ethical technologists, critical thinkers, and empowered users.

If computer science teaches students how to build, cybersecurity teaches them how to protect and question.

In today’s world, both are essential.