Updates Tutorial Journey Website Updates (Gsoc 2020 - TheShubham99)


New Member
Find the proposal here - https://docs.google.com/document/d/1myJvbXrCGrauTRa_tBm8zJ4wKnIq0b6MUapZ84GMPcQ/edit?usp=sharing

(Basic) - Basic Goals to Achieve.
Extended/Stretched Goals to achieve.

Abstract about the Project -

Goals: (Basic)

Aiming to build an interactive web experience for the contributor/player which will take them through all the possible paths according to his/her interests in the terasology project.

By this project, the new visitor/player/contributor should get an idea about-
  1. All domains included in the MovingBlocks world.
  2. All possible roles in the project.
  3. All possible paths to start contributing (for contributor)
  4. All Modules in each project. (Terasology/DestinationSol)
Expected Product: (Basic)

  1. The Final Product will be an interactive web application.
  2. The user will select his/her approach to start the journey. i.e. Either to dive into one of the projects or based on users Interest (Role-based)
  3. The overall web app will be a conversation based experience. (i.e. An agent will be helping the user throughout the journey)
  4. The user's input will be treated as a command to our agent & the agent will do respond with an appropriate response & will help users to complete the journey.
(Consider the following gif just as a reference)


  1. The user will be navigated to a resource (eg.docs).
  2. The overall journey will be tracked by the web app in the local-storage.
Last edited:


New Member
Summary of Tutorial Journey Discussion on 17th May 2020 @Discord

The discussion started with some suggestions on proposed Wire-Frame.

Inputs from the community on wire-frame-
  1. Design and Theme :white_check_mark:
  2. The ending is not mentioned in the WF.
  3. The last screen can be visually more simplified. (Nodes and Paths)
Discussed Topics:
Scope for GSoC period:
Building the tutorial Journey Site with the following features [Basic]-

  1. Interactive UI
  2. Dynamic Adaption of paths.
  3. Local progress tracking
  4. Mobile-friendly view
Theme : Conversational Theme as designed in Wire Frame.
Color scheme : - Similar to the Wire-Frame
Flow(s)/Storyline - After visiting landing page user will ..
  1. start with interest
  2. Browse the roles
  3. Learn about sub-roles.
  4. Select a sub role path to follow.
  5. Visit Each node and learn via resources.
  6. After completion of the path (ending [Needs Suggestions]-
1. Simple optional exercises will be given to the user based on the role he/she followed.
2. Also, exercises like find the bug or other simple GCI tasks will be given to the user.
3. For player [Not discussed]
7. Other relevant roles/paths will be suggested to the user.

Tech Stack to use :
Front End :ReactHtml/CSS
Logics :Vanilla js-
Data Structure :JSON-
Hosting :GH pages-

-x x x-
Last edited:


New Member
Summary of Tutorial Journey Discussion on 24th May 2020 @Discord

Nature and Purpose of the meeting.
  1. Project Initialization.
  2. Non-Technical.
  3. Pre GSoC Work-Period Discussion.
  1. The board setup is done.
  2. Basic work period information (availability, meetings, etc.)
  3. Discussed progress tracking and sessions.
  4. UX discussions - about wikis/resource linking or fetching the data inside the web app. (Will be decided according to community opinion during the work period.
To do (in progress):
  1. Decomposing task on board
  2. Setting up a Blog.


New Member
Post Type - Update

Tasks Completed :
✅ Setup A New React Project
✅ Added dependencies
✅ Created a GitHub a Repository (Update - It's now in the Moving Blocks Organization)
✅ Translated the front-end [Html/css --> React jsx]
✅ Optimized styling and Replaced pure JS functions('s working) into jsx and stylsheets.
✅ Setup gh-pages (on origin repository)
✅ Implemented the basic Layout.


New Member
Post Type - Update
(2 Updates Combined)

Tasks Completed :
✅ Collapsing Message with read-more.


Read more button appears when message length goes beyond a certain number of chars.
This length can be modified in Constants.jsx
✅ Responsive Gooey and User Message section.
Last edited:


New Member
Post Type - Update

Tasks Completed :
User section with user message having dynamic responses fetched from the JSON file.
✅ Scrollbar for a longer message in gooey/user messages (Responsive)
Placeholder User Image and Username.
✅Other bug fixes and styling.