Session 5 WebApp Intro

Session 5: Ready to Build a WebApp?

Overview

Welcome to Session 5! Now that you have a solid foundation in programming, version control, and web technologies (HTML, CSS, and JavaScript), it's time to put these skills together to build a complete web application. In this session, we'll introduce the concept of a web application and its components: database, backend, and frontend.

Learning Objectives

• Understand the architecture of a web application
• Learn about databases and their role in web applications
• Understand backend development and server-side programming
• Get familiar with frontend frameworks for building user interfaces
• Prepare for building a complete web application in the coming sessions

Topics Covered

1. What is a Web Application?

A web application is an interactive program that runs on a web server and is accessed through a web browser. Unlike static websites, web applications are dynamic and can process user inputs, store data, and provide personalized experiences.

Examples of Web Applications:

• Gmail
• Facebook
• Trello
• Google Docs
• Slack
• Spotify (web player)

2. Web Application Architecture

Most modern web applications follow a three-tier architecture:

┌───────────┐    ┌───────────┐    ┌───────────┐
│  Frontend │    │  Backend  │    │ Database  │
│  (Client) │◄──►│  (Server) │◄──►│           │
└───────────┘    └───────────┘    └───────────┘

• Frontend (Client): What users see and interact with in their browser
• Backend (Server): Processes requests, handles business logic, and communicates with the database
• Database: Stores and retrieves application data

3. Introduction to Databases

A database is an organized collection of structured information, or data, typically stored electronically in a computer system.

Types of Databases:

1. Relational Databases (SQL):

   • Structured with tables, rows, and columns
   • Examples: PostgreSQL, MySQL, SQLite
   • Use SQL (Structured Query Language) for queries

2. NoSQL Databases:

   • More flexible data models
   • Examples: MongoDB, Firebase, Redis
   • Good for unstructured or semi-structured data

Basic Database Operations (CRUD):

• Create: Add new data
• Read: Retrieve data
• Update: Modify existing data
• Delete: Remove data

-- SQL example for CRUD operations
-- Create (Insert)
INSERT INTO users (name, email) VALUES ('John Doe', 'john@example.com');

-- Read (Select)
SELECT * FROM users WHERE id = 1;

-- Update
UPDATE users SET name = 'Jane Doe' WHERE id = 1;

-- Delete
DELETE FROM users WHERE id = 1;

4. Backend Development

Backend development involves creating the server-side logic that powers a web application.

Key Backend Technologies:

• Programming Languages: Python, JavaScript (Node.js), Ruby, PHP, Java, C#
• Web Frameworks: Django (Python), Express (Node.js), Ruby on Rails, Laravel (PHP)
• APIs (Application Programming Interfaces): Allow different software systems to communicate

What Backend Developers Do:

• Implement server-side logic
• Create and maintain databases
• Ensure security and data protection
• Optimize applications for speed and scalability
• Create APIs for frontend or mobile apps

# Simple Python (Django Ninja) API example
from ninja import NinjaAPI

api = NinjaAPI()

@api.get("/hello")
def hello(request):
    return {"message": "Hello, world!"}

5. Frontend Development

Frontend development focuses on the user interface and user experience of a web application.

Modern Frontend Technologies:

• JavaScript Frameworks: React, Vue.js, Angular, Next.js
• CSS Frameworks: Bootstrap, Tailwind CSS, Material UI
• State Management: Redux, Vuex, Context API

What Frontend Developers Do:

• Build responsive user interfaces
• Consume APIs from the backend
• Manage state and data flow
• Create interactive experiences
• Ensure cross-browser compatibility

// React component example
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

6. Full-Stack Development

Full-stack development refers to working on both frontend and backend aspects of a web application.

Advantages of Full-Stack Development:

• Better understanding of the entire application
• Ability to work on all parts of a project
• More efficient communication between teams
• Greater flexibility in development roles

Popular Full-Stack Combinations:

• MERN Stack: MongoDB, Express, React, Node.js
• PERN Stack: PostgreSQL, Express, React, Node.js
• Django + React/Vue.js
• Laravel + Vue.js

7. What We'll Build in This Course

In the next few sessions, we'll build a complete web application with:

• Frontend: Next.js (React framework)
• Backend: Django Ninja (Python API framework)
• Database: PostgreSQL (Relational database)

Our application will be a To-Do List app with the following features:

• User authentication (sign up/login)
• Create, read, update, and delete tasks
• Categorize tasks
• Set priorities and due dates
• Mark tasks as complete

Practice Exercises

1. Research and explore different database systems (PostgreSQL, MongoDB)
2. Set up a simple backend API using Python and Django Ninja or JavaScript and Express
3. Create a basic frontend using a framework like React or Vue.js
4. Design a database schema for a simple application (e.g., a blog or todo list)

Additional Resources

• Django Documentation
• Django Ninja Documentation
• Next.js Documentation
• PostgreSQL Tutorial
• Full Stack Open - Free full stack course

Next Steps

Now that you understand the fundamentals of web application architecture, you're ready to move on to Session 6: WebApp - Frontend where you'll learn how to build a modern frontend application using Next.js.