Semester: Summer semester 2022

Lecture language: English

Exam language: English

Exam type: Project work + Oral examination

Maximum number of participants: 30

Notice

The course will start on April 4^th, 2022 and will take place in a Blended Learning format (online + in person). More information will be provided in the Moodle courseroom for the registered students. Registration is possible until March 28^th, 2022 (see the registration section below).

About this course

The World Wide Web and its underlying technologies are increasingly gaining importance for the development of interactive Web applications. This course introduces concepts, principles, and methods in current client and server-side Web technologies. Basic Web technologies such as HTML, CSS, JSON, JavaScript, etc. are a prerequisite to take this course. The focus of this course is rather on advanced topics in emerging Web technologies. These include extensions of Web standards, Web toolkits and development environments, current backend Web frameworks (e.g. Node/Express, Flask), frontend Web frameworks (e.g. Angular, React), and combination of different Web technologies (e.g. MEAN/MERN Stack, Dash). This course follows a student-centered and project-based learning approach. Web technologies will be presented in the lecture by student groups. The presented technologies are further investigated and applied in hands-on sessions as well as small student projects carried out throughout the course.

Getting credits for this course requires a successful completion of all assignments, project, and oral exam at the end of the semester. The final grade will be calculated as follows: assignments and project (40%), student presentations including hands-on sessions (15%), class participation & group management / collaboration (12%), and oral exam (33%). 

Target audience

• Master ISE CE
• Master Applied Computer Science
• Master Komedia

Date and location

Lecture / Hands-on sessions:

• Mon, 12:00 - 14:00
• Online / LK 052
• Starts on April 4, 2022

Lecture / Hands-on sessions:

• Wed, 14:00 - 16:00
• Online / LB 117
• Starts on April 6, 2022

Prerequisites

• Knowledge of basic Web technologies such as HTML, CSS, and JavaScript is required
• Knowledge of Python is helpful
• High motivation and commitment
• Good teamwork skills

Registration

Due to didactical methods, we have a limit of 30 students for this class (first come first serve). To register, please send an email to Mr. Shoeb Joarder  by  March 28^th , 2022 with your matriculation number, study program, and knowledge / experience in Web technologies. If the maximum number of participants is reached, we will use a waiting list.

Organization

• Course material in Moodle
• Show in course catalog (LSF, Module Database)

Lecturers

Prof. Dr. Mohamed Chatti (Lecturer)

M. Sc. Shoeb Joarder (Teaching Assistant)

Group name: 5HeadLabs

Group members: Roshan Asim, Alexander Hochhalter, Malte Josten, Julien Lukasewycz, José Antonio Sánchez Suárez

Project description:

The idea of the project was to develop a website to search for tutorials. The application consists of useful features such as creating new tutorials and searching by filtering tutorials, and users can vote and write a comment on the tutorials.

Main features:

• Registration / Login
• Search for tutorials and filter
• Vote and comment tutorial entries
• Create tutorials

Technologies used:

• Frontend: React, Material UI
• Backend: Node.JS, Express.JS, Passport.JS, MongoDB

Links: GitHub, Deployed version, Demo

Group name: CassandraSpark

Group members: Jean Qussa, Nave Wibowo, Nurmalita Manggal

Project description:

The idea of the project was to develop an educational website for students to search for a suitable project for bachelor’s, master’s, and personal projects as well as theses. This project allows students to also find for potential group members to work in a group

Main features:

• Add new project
• Search for projects
• Join/apply to a project
• Delete a project
• Accept/decline a join request

Technologies used:

• Frontend: React.JS, TailwindCSS, Next.JS
• Backend: Node.JS, Express.JS, MongoDB

Links: GitHub, Deployed version, Demo, Advertisement Video

Group name: NAXY

Group members: Arsalan Harouni Komitaki, Nicodemus Aprianto, Xueyao Ma, Yuning Zhu, Jordy Hendrix Zeufack Assongmo

Project description:

The idea of the project was to develop an educational website for students to search and gather learning materials such as videos and books and provide students a discussion platform and share learning materials

Main features:

• Search function of topics
• Discussion platform
• Share learning materials with community

Technologies used:

• Frontend: Angular, Bootstrap
• Backend: Node.JS, Express.JS, MongoDB, YouTube API, Google Books API

Links: GitHub, Deployed version, Demo, Advertisement Video

Group name: NewHorizons

Group members: Mahdyar Safarianbarmi, Nahid Hosseininezhad, Nikolas Gur, Tian Sun, Ali Elhag

Project description:

The idea of the project is to develop a social web application aimed at facing the hardship of making new connections between students and finding group members for specific courses

Main features:

• User profile
• Search for relevant events
• User authentication/authorization
• Recommend events according to users' interests

Technologies used:

• Frontend: Angular, Angular Material
• Backend: Node.JS, Express.JS, MongoDB

Links: GitHub: Frontend, GitHub: Backend, Deployed version, Demo

Group name: SmartFinder

Group members: William Kana Tsoplefack, Fan Ouyang, Yasmine Taha Mokhtar, Julius Tietenberg, Lukas Holtbrink

Project description:

The idea of the project is to develop an educational website aiming to help students choose, rate, and add anonymized comments to the courses. It provides useful features such as a course overview page, course ratings and comments, and a user dashboard

Main features:

• Login, registration & session management
• Course overview (filtering & search)
• Rating system
• User dashboard/profile

Technologies used:

• Frontend: React.JS, Material UI
• Backend: Node.JS, Express.JS, MongoDB

Links: GitHub, Deployed version, Demo, Advertisement Video