FullStackOpen (University of Helsinki)

This course is an introduction to modern web development with JavaScript. The main focus is on single-page applications implemented with React and supporting them with RESTful and GraphQL web services implemented with Node.js. The course also has parts on TypeScript, React Native, and Continuous integration.

Other topics include debugging applications, container technology, configuration, managing runtime environments, and databases.

Course Description

Source: https://studies.helsinki.fi/courses/course-unit/otm-7f2015a3-2003-44af-984b-c80df2cfab0f/CSM141081

COURSE UNIT CSM141081

Full Stack Web Development (5 cr)

Responsible organisation: Master's Programme in Computer Science, Bachelor's Programme in Computer Science

Responsible teacher for course unit: Matti Luukkainen

Course unit level: Advanced studies

Course unit type: Regular course unit

Possible attainment languages: English, Finnish, Swedish

COURSE UNIT INFORMATION

Tweet text

Deep Dive Into Modern Web Development

Prerequisites

Participants are expected to have

• good programming routine,
• basic knowledge of web programming and databases,
• mastery of basic use of the Git version management system,
• perseverance, and
• a capacity for solving problems and seeking information independently.

Previous knowledge of JavaScript or other course topics is not required.

RECOMMENDED PREREQUISITES

Recommended prior knowledge 1

• TKT20019 Databases and Web Programming 5 cr
• TKT10003 Advanced Course in Programming 5 cr
• TKT10004 Introduction to Databases 5 cr

Learning outcomes

Fluency in architecting and building robustly tested Single page applications with React, Redux and Express libraries.

In the learning, emphasis is put on building modular software applying the functional programming paradigm.

Content

• Fundamentals of HTML and CSS for structuring browser based apps
• Building and structuring component based frontend code with React
• State management with React hook store and Redux (using the Flux architecture)
• HTTP protocol and RESTfull APIs
• Building RESTfull services with Node/Express
• Data modelling with Document databases
• Unit, integration and End to End testing with Jest and Cypress.io libraries
• Build configuration using WebPack-library

Learning materials

The course material is available at https://fullstackopen.com/en/

Additional info

Target group

The course is suitable for

• Computer Science and Data Science students,
• those working on the field, and
• advanced amateur programmers.
• Suitable for students in any degree programme.

The course may be offered among the university’s continuous learning courses.

Completion methods

Self-paced mandatory programming exercises and a course exam.

Open University and degree programme completion methods may be different.

Assessment practices and criteria

The final grade is determined by the number of submitted exercises, including those that are not marked with an asterisk.

The course exam which does not count towards your final grade, but must be passed.

The course is graded on the scale 0-5.

Activities and teaching methods in support of learning

A self-study material, online tutoring in Discord, example solutions for completed exercises. The campus version has also weekly tutoring groups.

Timing

The campus course in 3rd period, Open university version is open round the year.

Recommended optional studies

Full Stack extensions:

• Full Stack Web Development, extension 1 (1 cr)
• Full Stack Web Development, extension 2 (1 cr)
• Full Stack Web Development: GraphQL (1 cr)
• Full Stack Web Development: TypeScript (1 cr)
• Full Stack Web Development: React Native (2 cr)
• Full Stack Web Development: Continuous Integration (1 cr)
• Full Stack Web Development: Relational Databases (1 cr)

Content of Each Part and My Certificates

Detailed information can be found in their own repositories.

Part10-12 has their own repositories.Links are put in the readme file.

Core 0-7 (7 credits)

part0 Fundamentals of Web Apps ✅

part1 Intro to React ✅

• Intro to React
• JavaScript
• Component state, event handlers
• More complex state, debugging React apps

part2 Communicating with server ✅

• Rendering a collection
• Forms
• Getting data from server
• Altering data in server
• Adding styles to React app

part3 Programming a server with NodeJS and Express ✅

• Node.js and Express
• Deploying to internet
• Saving data to MongoDB
• Validation and Eslint

part4 Testing Express servers, user admin ✅

• Structure of backend application, intro to testing
• Testing the backend
• User admin
• Token authentication

part5 Testing React App ✅

• Login in frontend
• porps.children and proptypes
• Testing React apps
• End to end testing

part6 State mgt with Redux ✅

• Flux-architecture and Redux
• Many reducers
• Communicating with server in a redux application
• connect

part7 React Router, Custom Hooks, styling apps with CSS and webpack ✅

• React-router
• Custom hooks
• More about styles
• Webpack
• Class components, Miscellaneous
• Exercises

GraphQL (1 credit)

part8 GraphQL ✅

• GraphQL-server
• React and GraphQL
• Database and user admin
• Login and updating the cache
• Fragments and subscriptions

TypeScript (1 credit)

part9 TypeScript ✅

• Background and intro
• First steps with TypeScript
• Typing the express app
• React with types

React Native (2 credits)

part10 React Native ✅

• Intro to React Native
• React Native basics
• Communicating with server
• Testing and extending our application

CI/CD (1 credit)

part11 CI/CD 🚀...20/22

• Intro to CI/CD
• Getting started with GitHub Actions
• Deployment
• Keeping Green
• Expanding further

Containers (1 credit)

part12 Containers 🚀...12/22

• Intro to Containers
• Building and configuring environments
• Basics of Orchestration