x CS241002 Software Studio

CS241002 Software Studio

From ideas to projects to real impact.


This course presents hands-on labs for students to be familiar with the software development process, techniques, and tools. Students are asked to build real, useful applications (websites and/or mobile apps) accessible to the public.

The classes are divided into three parts. First, we give a primer to common web technologies such as HTTP, HTML, CSS, and Javascript. We cover different programming paradigms, including the OOP and functional programming. Handy tools such as Git are covered to get students familiar with the project-based and team-based development. In the second part, we introduce modern web development techniques such as React, Redux, Node.js, and Firebase and some reusable templates from Bootstrap and Reactstrap that speed up the development process. Last, we extend our horizon to the mobile development landscape by introducing the React Native. We also give case studies on how to leverage Machine Learning and Data Mining algorithms to convert raw user data into the app intelligence.


Teaching Assistants

Time & Location

  • Video lectures: announced at Thur. afternoon
  • Labs: Tue. 3:30-5:20pm at EECS 326/328
  • Office hour: Thur. 1:00-3:00pm at Delta 723/724

Grading Policy

  • Idea + market survey: 10%
  • Labs: 30%
  • Midterm project: 30%
  • Final project: 30%


This course is intended for junior students who understand

  • Data Structure,
  • Programming (in C or C++)
We use Javascript as the main programming language throughout the course.



If you have any feedback, feel free to contact: shwu [AT] cs.nthu.edu.tw

Lecture 00


About This Course... | FAQ


General Rules and Introduction to Git

This lab guides you through the main idea of version control systems, the basic usage of Git, and how to submit on our GitLab.


Git Command-line Tool Installation

This appendix guides you how to install Git command-line tool.


Lecture 01

Web Development and HTML

Web Development | Basic HTML | Idea Generation | Lean Canvas

Video Slides

Lecture 02


Basic CSS | Selector | Layout | Stacking order

Video Slides

My First Blog

This lab quiz asks you to build a simple blog page.


Starting Up Your Project: A Lean Approach

Idea Generation

Here are some tips that help you to generate Good Idea.

Video Slides

Product Design

Here are some basic entrepreneur concept you can use in your Final project.

Video Slides

Lecture 03

Landing Page and Bootstrap

Product Design | Landing Page Demo | Basic Bootstrap | Layout | Flexbox | Media Queries | Containers | Grid sysem | Components | Tools

Video Slides

Lecture 04

Javascript - the Basics

Primitive Types | Object Types | Primitives v.s Objects | Expressions | Control Flows | Methods | DOM | Event Handling

Video Slides

Color Game

This lab quiz asks you to improve the Color game by adding two extra modes.


Lecture 05

Modern Javascript

Node.js | Webpack | Vendor Bundling | Packing CSS | Babel | Block Scoped Variables | Arrow Functions | Default Rest Spread | Destructuring | Template String Literals | Enhanced Object Literals | Classes and Inheritance | Symbols | Iterators and Generators | Property Initializers | OOP vs. FP

Video Slides


This lab quiz asks you to build a Tic-Tac-Toe.

GitLab Slides




Lecture 06


React | Components | JSX | States and Data flow | Form Elements | More JSX | Client-side Routing | AJAX | Debugging | Weather mood project

Video Slides


Lab to study how to run tests in our applications.

GitLab Slides

React Review and Cookie

Review React and introduce cookie.

GitLab Slides


Improve weathermood project by adding one page which can show 5 days forecast.


Lecture 07


Redux | Why Redux | Action and Reducers | Splitting Reducers | Async Actions and Middleware | React+Redux | Remarkers | DevTools

Video Slides

Tracing Weathermood

Tracing the post function of Weathermood project.

GitLab Slides


Use Redux to re-write post function.


Lecture 08

Node.js and Backend Developement

Node.js | Events and Asynchrnonous I/O | NPM and Yarg | Debugging | RESTful API | Express | Nodemon and Postman | Cloud Computing | Docker | AWS Elastic Beanstalk

Video Slides

Deploy your app to AWS

Lab to guide you how to deploy your app to AWS.

GitLab Slides

Lecture 09

Database Systems

Data Modeling | SQL Language | Surviving Big Data | Text Indexing | AWS RDS and Deployment

Video Slides

Data Model

Introduce the data model.


Advanced SQL

Introduce some advanced SQL operation.


Web Security

Introduce web security.



Improve weathermood todo function by using AWS RDS (relational database system).


Midterm project - Web app

Grading policy

Here is the grading policy of Midterm project.


Lecture 10

React Native

React Native | Styling | Event Handling | Images and Icons | Data Access and Persistence | NativeBase | ScrollView and ListView | Navigation

Video Slides

React Native Setup

Lab to guide you setting up React Native.

GitLab Slides

Final project - Mobile app

Learning Roadmap and Grading Policy

Here are the Learning Roadmap and the Grading Policy of Final project.

Slides Slides


Other Course Materials

For more course materials (such as assigned reading, quiz, etc.) please refer to the GitLab.


For online forum please refer to the iLMS system.

iLMS System

Reference Books

  • Alexander Osterwalder, Business Model Generation: A Handbook for Visionaries, Game Changers, and Challengers, 2010

  • Eric Ries, The Lean Startup: How Today's Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses, 2011

  • Peter Thiel, Blake Masters, Zero to One: Notes on Startups, or How to Build the Future, 2014

Online Tutorial