2021

Marugo Class Web App & LINE Chatbot

Marugo Class Web App & LINE Chatbot

Marugo Class Web Application and its LINE Chatbot aim for improving teaching and learning experiences of tutorial classes in Taiwan. While web application has a complete set of features for students and teachers to manage their materials on web, LINE Chatbots is built for students to quickly access the core features they needed for their studies with only a few clicks on their phones.

  • URL

    Work in progress
  • My role

    • Front-end development
    • Planning SQL database on ER digram and writing API doc for back-end developer
    • UI/UX design
  • Technologies

    Vue.js, Express.js, Redis, Adobe XD
  • Source code

    -

Marugo Class LINE Chatbot

Marugo Class LINE Chatbot focuses on few core features that helps students to manage their learning materials:

  • Check course schedules or date and time of the next lesson
  • Submit or review assignments records
  • Create notes
  • Send reminder of the next lessons to students
LINE chatbot features
Connect with Web App through LIFF browser

Marugo Class Web App

Compared to chatbot, Marugo Class Web App provides more advance features for students and teachers to manage their learning materials.

Features for students:

  • Register course
  • Check lesson schedule
  • Review handouts
  • Submit assignments and review assignment records
  • Create and review notes

Features for teachers:

  • Create courses and lessons
  • Create handouts with hashtags
  • Create and review assignments submitted by students
  • Check lesson schedule

Common features for both teachers and students:

  • Create courses and lessons
  • Create handouts with hashtags
  • Create and review assignments submitted by students
  • Check lesson schedule

Common Features

Review all material
work image
Schedule of all lessons
work image

Features for teachers

Create, edit or delete lesson
work image
Create, edit or delete course
work image
Review student's assignment
work image
Review all lessons
work image

Features for students

Submit assignment
work image
Review lesson's handout
work image
Enable or disable reminder
work image
Register course
work image

Responsive design

work image
work image
work image
work image

Remote collaboration with back-end developer

My role

  • Design ER diagram for SQL database
  • Plan chatbot development with flowchart
  • Write API documentation on Apiary
  • Communicate with back-end developer through Discord and manage all materials together on Notion
ER diagram for Web App and LINE Chatbot
Flowchart of how to send reminder to student by pushing message on LINE chatbot