Spying on Starchart
Tags: opensource, starchart
Published: 2023-01-18 00:21:12

It's been a year since I was supposed to work on [Telescope](https://github.com/Seneca-CDOT/telescope) for a class. When the war in Ukraine started in February 24th, 2022, I almost fully stopped contributing. Now, this year I am trying to do more, even though it's not my class anymore. Because I wish that I did more back then.

This year, we have 2 open source items on the menu! [Telescope](https://github.com/Seneca-CDOT/telescope) 4.0, and [Starchart](https://github.com/Seneca-CDOT/starchart).

# What is [Starchart](https://github.com/Seneca-CDOT/starchart)? #

Firstly, it's a fresh project. It has NOTHING done. That sounds super exciting. People are free to do what they want! Well, people actually enrolled in the course, that is. I will try to fill in the gaps that people leave behind.

Secondly, it's supposed to be a service for students to host their own projects. Starchart is supposed to provide a subdomain. Note, that Starchart is an actual needed service that will be used. Even though Telescope is cool and all, the blogging platform is used just by Seneca Open source students. Starchart, however, will be used by college faculty and students of other classes.

### Why do we need this? ###
Firstly, hosting consts money. It's not much, but it is a cost. Many classes which we take teach us to set up our own project somewhere. It used to be [Heroku](https://www.heroku.com/), which now has become paid. We still need a solid space to host things in.

Secondly, using external services doesn't ensure enough safety. Using a Seneca specific service allows students to trust handling their own data. Otherwise, they might have to post their private information on a public space, which leaves people vulnerable to doxxing. Some students might have stalkers… (it's not fun, believe me.)

---

## Technology ##

I've used this [tech stack list](https://github.com/Seneca-CDOT/starchart/wiki/Tech-Stack) to make a visual representation:
![Starchart architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fs3ktt6hmb339gr7zu0.png)

Basically, we will have some parts that are the same in Telescope. Such as:
- _[TypeScript](https://www.typescriptlang.org/)_, _[node. js](https://nodejs.org/en/)_
- _[Express](https://expressjs.com/)_ + [Satellite](https://github.com/Seneca-CDOT/telescope/tree/master/src/satellite)
- _[React](https://reactjs.org/)_
- [Seneca SAML2](https://blog.humphd.org/not-so-simple-saml/)
- _[Jest](https://jestjs.io/)_
- [Playwright](https://playwright.dev/)
- [GitHub actions](https://docs.github.com/en/actions)
- [Docker](https://www.docker.com/)
- _[ESLint](https://eslint.org/)_ + _[Prettier](https://prettier.io/)_
- [Prisma](https://www.prisma.io/)

Now, most of those I already know. I've dealt with ones that are marked with _italic_. And here's a list of tech that is new now:
- [Remix](https://remix.run/)
- [Chakra UI](https://chakra-ui.com/)
- [AWS Cloud Route53](https://aws.amazon.com/route53/)
- [Azure Active Directory](https://azure.microsoft.com/en-us/products/active-directory)
- [Let's Encrypt](https://letsencrypt.org/) + [node-acme-client](https://github.com/publishlab/node-acme-client)
- _[MySQL](https://www.mysql.com/)_

Now, this looks like enough overlap of new and familiar. Even in the first list, however, there are still untouched topics.

Specifically, I am interested in learning Satellite, SAML2 and Docker from the older tech; And in Remix, Chakra UI, and AWS for newer. But, again, it will all depend on which of those will be left for me to work on, it's really up for grabs by actual students enrolled in the course. So, we'll see what I'll end up doing.

---

## My role ##
_So, concretely, I have already been interested in the following:_
- Design (color schemes, logos, branding)
- Documentation (explaining how things work for people that haven't learned it yet)
- Architecture (discussing tech decisions, code design solutions, planning)
- Docker (setting up containers for all the moving parts we will have)


### Consistent design ###
We currently have multiple open source services. Telescope, Satellite and Starchart. Design wise, this needs to be highlighted. 

Common themes of our open source creations — tools for space exploration. Themes to take a note of are — curiosity, creation, exploration, knowledge, excitement, sharing, connection, awe, scale.

#### Color scheme ####
We have common elements, and then we have differences. The way I think to implement it design wise, is to use same colors and a different accent color. The space theme should be outlined with some darker, blue-toned neutral color. Space is a dark environment, with rare solid objects in it. Therefore, we should have a deeper undertone that unites all of our products, with an accent color that differs which represents those rare findings. 

Starchart, as a service used by Seneca students and faculty, should also use Seneca's accent color. Therefore, we are already constricted to 2 colors. Main background color of open source themes, and the red Seneca accent color. Every other colors we decide on has to work with those 2.

#### Logos ####
Here's what I thought about logos… It's not just the colors, themes should also be represented with design elements within logos.

We have 3 things: Telescope, Satellite, and Starchart so far. Here are questions to ask:

- If there will be a united theme for the logos, we would need to adjust Telescope's too. 

- Is Satellite a separate enough product? Does it need a logo, is it considered its own tool, or is it just a part of Telescope?

- Ideas for Starchart. So far I imagine stars which have connecting lines between them, which would form some shape, to represent a constellation. Do we use letter S, same as we use T for Telescope? How much angle do we add to the S? Do we keep it symmetrical? I have a feeling, such a logo is already used somewhere… Like, cmon, it's an S that's in a hexagon.

I played around with some ideas, and I need to create more.
![Logo drafts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk19927mjllozqel2lfe.png)

If you noticed, I thought we could unite our style with a strong diagonal line that is formed by the object we have at the front, and another diagonal line that counteracts it, which will divide the space into 2 colors.

I've also thought, if we were to use a hexagon, perhaps we should continue the theme of shapes. However, it seemed to not go anywhere, and is probably too common of a solution.

### Documentation ###
It's not that I'm especially interested in documentation, I have been doing it last year too. It's just that I see an opportunity to document the tools people will have to relearn this year. And when they collect the knowledge, we can record it.

There's been some gaps in our Telescope documentation. Such as: SAML2 SSO, Satellite, general architecture. I also wonder, if we could just add our new docs to Telescope's Docusaurus service. 

Mostly, I just want to make sure to document the progress that students make as they do it, so that I can ask questions right away, and get all the information that I need while it's still available.

### Architecture ###
Even though making my architecture chart helped me understand some of it… I still don't fully get it. 

So, we will have a web part — that one I get. Now, actual functionality is where I struggle. 

We will need a DNS. Then, we will need encryption. We will also need authentication. All of those mentioned need to be a separate microservice encompassed in a docker container. And then we will need to have it all connect to each other. 

Well, maybe I do get… some… a bunch… of it… but. How exactly does that DNS part work? And where do we encrypt? And what do we encrypt? And how? And what's that Azure active directory part?

Also… Starchart will be using React too… nooo! I tried to steer people to try a new front end framework which is not React, but nobody seems interested. Well, at least I found these cool charts on this [cool website](https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/).

![Front end frameworks chart sorted by awareness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzj4vwkahgjy0zlj9akc.png)

![Front end frameworks chart sorted by retention](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q84bi8hi9o5my3kpz7so.png)

### Docker ###
Now, I have a personal challenge with Docker. I wanted to learn it and use it last year, but I have struggled with installation until I figured out that my Win10 version was too old for WSL. So, I have decided to postpone it until I can upgrade my Windows on my laptop. Then, last semester I had to use virtual machines, so I didn't want to reinstall everything.

I just installed Win11, which should finally have WSL. And so far, the installation process, even with some problems, seems to be going well! I went around not using MS store, and having to install distributives manually, but I'm not stuck. Haven't managed to use Telescope containers yet, but I don't see any roadblocks so far.

---

## The class ##
So far, people have been researching topics, presenting them in meetings and adding them to the wiki. I think what is needed to figure out our work - is to figure out our team first. What people are familiar with, what they want to work on, and what is a must have requirement. 

I can access the meetings, but I can't figure out how much I can actually participate to be reasonable. I'm excited, but I wonder at what point Dave will just tell me to ~~shut the fuck up~~ stop :D