Web technologies

Web technologies are constantly evolving, offering developers powerful tools to create dynamic and responsive applications. This course leverages open source technologies to build dynamic web applications with React and Next.js, leveraging Supabase for backend services, and crafting stylish, responsive interfaces with TailwindCSS.

Best-pratices principles and tools including Git, unit tests, security and database modeling are covered. Most important, you will learn how to search, assess and integrate new ideas, libraries, and concepts from the Open Source community.

Prerequisites

Follow the requirements for the course.

Modules

Module 1: Introduction to Web Technologies

CM:

• Class presentation / Evaluation
• Syllabus
• Languages used for the web
• Stack/architecture definition
• Architecture of the webtech project

TP: get basic skills

1. Computing fundamentals: Linux, networking, shell.
2. Basic usage of the most common tools: SSH, SFTP, Git, password managers.
3. Confortable in JavaScript, CSS, HTML.
4. Master the Markdown format, be ready to respect its syntax with care.

Module 2: Getting started with JavaScript, Node.js, and Asynchronous Programming

CM:

• Structure of a web application (Back / Front / Microservices)
• Node.js / Server-side JavaScript
• JSON / JS types / YAML
• NPM / Yarn / package.json
• CommonJS / ECMAScript
• SemVer
• Javascript event loop
• Asynchronous JavaScript (async/await)
• Routing

TP: getting started with Node.js & Git

• Getting up and ready with Node.js
• Project and repository initialization
• Web server in Node.js

Module 3: Web API | with REST and Express.js

CM:

• What’s an API?
• REST API and its methods
• GraphQL
• Express and request routing
• Unit testing and assertion

TP:

• Server-side programming with Node.js
• Web server with Express
• Practice unit tests and learn about GraphQL

Module 4: Libraries and frameworks | with React and Next.js

CM:

• Library / Framework
• Points of using a framework
• Common libs and frameworks for the web
• React
• Next.js
• Demo: Next.js abstractions (basic HTML file > manual package import > NPM > Webpack > Babel > React > Next.js)

TP: getting started with React and Next.js

• Next.js application initialization
• Build a website skeleton for blogging
• Build dynamic routes

Module 5: Styling in React | with Tailwind

CM:

• Problems with CSS and solutions
• CSS-in-JS
• Inline styling, with an object, with CSS modules
• Mixing multiple classes with conditions
• Tailwind CSS, ecosystem and examples

TP: getting started with TailwindCSS

• CSS usages
• Tailwind usage and customization

Module 6: Data Fetching and rendering | with Next.js

CM:

• Rendering at Build-time and Run-time
• Re-hydratation
• CSR - Client-Side Rendering
• SSR - Server-Side Rendering
• SSG - Static Site Generation
• ISR – Incremental Static Regeneration
• CI/CD GitOps demo

TP: data fetching and rendering with Next.js

• Understanding the various fetching strategies
• Practicing React and Next.js

Module 7: State and form management | in React

CM:

• About state
• State in React
• Local component state with useState
• Application state with useContext
• Prop drilling
• Context API and examples
• Form management in React
• Native elements
• Controlled elements

TP: user local and application state, form manipulation

• Form manipulation
• State management in react

Module 8: Storage and databases | with Supabase

CM:

• What is a database and types
• PostgreSQL
• Row-level security (RLS) and its usages
• Supabase

TP: install and use Supabase

• Supabase installation and integration
• PostgreSQL and row-level security

Module 9: OAuth and OpenID Connect | with OAuth & Supabase Auth UI

CM:

• OAuth basics and actors
• OAuth flows and scopes
• Tokens and JWT
• Usage of OAuth and OpenID Connect
• PKCE

TP: Supabase Auth UI, Dex and OAuth integration

• Setup authentication with login/password and OAuth
• Learn and practice the AOuth flow

Module 10: Deployment

CM:

• Ways to deploy to the web (Bare metal / VPS, PaaS, etc.)

TP:

• Project: Next.js deployment on Vercel
• Project: API deployment on Heroku
• Have fun