DEV Community: Tymur Levtsun

Week 13: User deletion feature

Tymur Levtsun — Tue, 18 Apr 2023 00:21:37 +0000

Overview

As we wrap up week 13, we are inching closer to the launch of StartChart (aka MyCustomDomain) 1.0. Despite a busy week with school submissions, I managed to implement a crucial feature: user deletion, available exclusively for admins.

Problem Statement

Deleting a user in a system often requires cascading deletion of all or most data associated with them. StartChart is no exception; our users have DNS records that need to be deleted as well. However, we decided not to delete SSL certificates for security reasons or other considerations.

Implementation

Surprisingly, I didn't need to write any cascading deletion functionality myself. Prisma handles it automatically by deleting all entities referencing the deleted user, like DNS records in a many-to-one relationship. This revelation was quite impressive for me.

User deletion boiled down to two lines of code:

Deleting the user from the database (it cascades to DNS records)
Setting the reconciler to reconcile the database with Route53

Here's the code snippet:

export async function deleteUser(username: User['username']) {
  await deleteUserByUsername(username);
  return setIsReconciliationNeeded(true);
}

The bigger issue was to integrate it in existing admin page. There were 2 type of actions before I added user deletion:

Searching users
Impersonating users

With the addition of the third action, I refactored the code and assigned an intent to each action, which I believe is the recommended way to handle multiple actions in Remix. I also updated the zod schema and made some fields optional for reuse across different actions.

Review

After I was done, created the PR and few iterations of reviews with minor suggestions it ended up being merged.

https://github.com/DevelopingSpace/starchart/pull/607

Afterthoughts

Last week was tough as I had to catch up with classes and submit various projects. Fortunately, I managed to do so successfully. It was also an Orthodox Easter and even tho I am consider myself as atheist, it was a very great time spent with my family that I really appreciated. I also signed up for the olympic distance triathlon that gonna be in the late July, and I feel like this is gonna be amazing (fun fact: I newer swam in pool for more than 50 meters and don't have a bike yet). Right now I just gotta do a final stretch and school is gonna be done, I am a one week closer to lifestyle I want to have.

Oh, and also the last thing, I tried cold-showering for one minute in the morning (after like 10 mins of the warm shower as I usually have + going out for like 10 minutes right after that = feeling amazing and energetic throughout the day. Good luck with finals, everyone! Peace.

Week 12: DNS records instructions and catching errors

Tymur Levtsun — Mon, 10 Apr 2023 01:45:13 +0000

Overview

Hello, my friends! In this episode of "StartChart," I focused on two main tasks: creating a DNS records instructions page and implementing error boundaries.

DNS Records Instructions

I found this task extremely necessary since our project will be used by hundreds, if not thousands, of students in the next few years (assuming no nuclear war happens tomorrow fingers-crossed). As students, they may be confused about what they're supposed to do, and that's when my instructions will come in handy. This kind of work is perfect for using ChatGPT, which I did, and it really helped me write more understandable and native-like text. Overall, ChatGPT performed well on this task, particularly when I provided enough context about our platform, as its initial responses were quite generic.

https://github.com/DevelopingSpace/starchart/pull/545

Catching Errors

Remix offers a logical and straightforward way to handle both expected and unexpected errors. It essentially has two components that you can export from any route:

CatchBoundary - for handling expected errors, typically thrown with throw new Response("Bla bla", {status: 404}).
ErrorBoundary - for handling unexpected errors, usually thrown with throw new Error("error message").

Interestingly, Remix provides a default CatchBoundary with just the status code text, but it doesn't offer a default ErrorBoundary, which results in a runtime crash. There's probably a good reason for this, but I'm not sure what it is.

I decided to create two components for each boundary type, rendering certain status codes, error messages, etc. One cool feature I implemented is a function that can be passed to the CatchBoundary component, which returns error text based on the status code. This is optional, as CatchBoundary has some built-in status code handling with generic messages. The mapStatusToErrorText function is designed to handle specific status codes and provide users with custom error text. For example, when creating the CatchBoundary for the DNS records page, I wanted to give users custom error messages for 404 and 400 errors, so here's what I did:

 function mapStatusToErrorText(statusCode: number): string {
  switch (statusCode) {
    case 404:
      return 'Sorry we could not find your dns record';
    case 400:
      return 'We got an error processing requested action on your dns record';
    default:
      return getErrorMessageFromStatusCode(statusCode);
  }
}

Nothing special, but felt kinda cool.

https://github.com/DevelopingSpace/starchart/pull/554

Some afterthoughts

You know you're about to release something when you start writing instructions for it, and that's the case with StartChart. Next week will be hectic, with many final submissions and presentations. The struggle will be real, but only two weeks of school remain. I feel a lot of pressure to find a good full-time position, and the current job market isn't great (layoffs don't help). Nonetheless, I remain optimistic and believe that in three months, I'll be living the life I've dreamt of for years: a well-paying job that I enjoy and no more school. Happy Easter to all my fellow Catholics, and good luck with your finals! Peace.

Week 11: Admin and Sheriff

Tymur Levtsun — Sun, 02 Apr 2023 23:14:06 +0000

Overview

This week I was focused on delivering admin page functionality while also trying to cover sheriff's responsibilities.

Admin page

Admin page was an interesting one, at the beginning I was going to delivery only the layout as I said in my previous blog, but after having a second thought about it and my peers who also underlined that I decided to go ahead and integrate as much of the server side as I can. I ended up having everything, except user impersonating and deletion functionality. That stuff requires way more development than it would be reasonable to deliver. To be honest, I feel like sometimes I have this mental limitation that I am this “front-end guy” and I should not touch the back-end because it is not my business, but with Remix and its seamless transition between front-end and back-end to was easier for me to overcome it. After some reviews and minor adjustments, my PR got merged :)

Being a sheriff

In the beginning, I had mixed feelings about being a sheriff even tho I understand that this is a good experience to have. The interesting part of being sheriff that I enjoyed the most was conducting meetings and making sure that everybody is doing okay and on the right path to deliver their stuff.

Afterthoughts

This week was good from the productivity perspective, the admin stuff got landed which was big and I am happy that we did it since this is one of the “core” features of the project. I tried my best to focus on starchart the first part of the week since I had some stuff in the second one.

Week 10: Validation and admins

Tymur Levtsun — Mon, 27 Mar 2023 03:07:06 +0000

Overview

Hello, my friends! I'm delighted to see you again. This week, I tackled two significant PRs: one focused on DNS records validation, and the other on admin page layouts.

DNS Record Validation

To be honest, I found this task more engaging than the other one, as it introduced me to in-depth validation using zod, unlike designing layouts. The objective was to perform comprehensive validation of all required fields with zod, return appropriate messages, and then parse the response on the frontend to display them to the user.

One interesting technique I employed was reusing a single zod schema for both record creation and record editing requests. To make this work, I only needed to extend the base record validation schema with an additional field. This process closely resembles inheritance in interfaces or classes, and it always feels rewarding to reuse functionality. After some follow-ups, the PR was merged.

https://github.com/DevelopingSpace/starchart/pull/416

Admin Layout

This task was more straightforward: our goal was to create an admin page, and the initial step from a frontend perspective was to design layouts for it. I crafted two components: one for the metric card and another for the users table. The result looks quite polished, but the real fun will begin when we delve into server-side development.

https://github.com/DevelopingSpace/starchart/pull/451

The Week Ahead

Next week, I'll be taking on the role of a sheriff, which comes with its own set of responsibilities. Although I can't say I'm overly enthusiastic, it will be interesting to see how the experience unfolds. I'll likely collaborate with Stephan on admin backend development since he's leading that effort. Additionally, I might tackle some smaller issues.

Final Thoughts

My ongoing battle against social media distractions continues. While I'm doing alright, there's room for improvement. I also feel that I could have been more efficient with my work on the StarChart this week and delivered results faster. I'll need to reflect on that. Peace! ✌️

Week 9: record editing and other PR polishing

Tymur Levtsun — Sun, 19 Mar 2023 23:31:14 +0000

Overview

Hello Hello, this week was pretty productive and I got some good stuff delivered. The first thing I was working on was finishing with PR that I created last week, which was about the integration of the DNS record creation workflow into the existing UI. The second thing was a record editing integration and the last small thing was disabling actions if the record is inactive.

Polishing a big PR

It took some time and about 12 extra commits to target all suggestions on the PR I created the last week and eventually it got merged (very good).

https://github.com/DevelopingSpace/starchart/pull/324

Making records editable

Since we already had the DNS records workflow function to update records it was a good time to connect it with the existing UI for record creation, just by pre-populating values of the record that the user wants to edit. I cannot say that I faced any major challenges during development time. The biggest one was probably to keep my changes up-to-date with what was going on in the main branch since some of my peers worked on the adjacent part of the system. I also had a little confusion with David, when I did the same thing in my PR when tried to adjust my changes to the new vocabulary of the project. I ended up closing David's PR and just taking some ideas of his PR in mine (sorry David).

https://github.com/DevelopingSpace/starchart/pull/369

Another small one

After the previous PR got merged I found that I was tagged in one small issue in GitHub, which was about taking away from users' ability to do any actions on records if they are not active. It was a quick 14 lines of code PR that are almost merged with no problem (I just made a typo in the error message, but everything else is good).

https://github.com/DevelopingSpace/starchart/pull/383

The next week

The next week I would like to work on making a server-side validation for records creation and editing that will return users with meaningful error messages for specific fields, where their provided values didn't pass validation. After that it would probably be good to make some layouts for the admin page, it will probably boost brainstorming from server-side people on how it should be implemented on their side.

Some afterthoughts

Even tho during almost the whole week (from the last Sunday to Friday) I was having a cold and was feeling really 💩 I was still more productive than the week ago because I was able to maintain more control over what I was working on by not wasting a lot of time and attention for social media. My war with myself for my attention is still going and I can already see the results of the first battles won. Peace ✌️

Week 8: Admin page design and records server integration

Tymur Levtsun — Sun, 12 Mar 2023 23:25:04 +0000

Overview

This week I have been working on two major things, which are:

UI design for the admin panel page
Records creation, prolonging and deletion flow integration with front end

Design

People from Seneca requested our team to include some sort of admin panel in the startchart and as the first step of doing so, we needed some ideas on its design of it. What I liked about developing design first with the close collaboration of all team members is that it stimulates everybody to think about how certain functionality is gonna work on all layers. I presented my ideas on the design on Wednesday for the team and as I expected we had a very productive conversation on not only the design itself but also on how the admin functionality is gonna be implemented in general. As a result, we got a pretty decent concept of what UI design is gonna include and how it is gonna be done.

Records flow integration

The day has come and I finally created the PR on integrating the records creation flow which includes not only creating the record in DB but also manipulating with Route53. Since the flow was implemented on the back end side I was able to integrate it on the front end. I faced one interesting issue while doing so.

That issue was when I tried to delete records which were created by seeding DB and had an issue with doing so. At a certain point with the help of Won I realized that since we create the fake hosted zone after seeding DB these records are not in fake route53 but only in the database. This made me integrate record creation first, so I could work with other manipulation on them. I also deleted seeding DB with that records, because it provides more confusion than benefits.

UPD: looks like E2E tests are failing because of removing tests, maybe I should do something else

Conclusion

It was a nice week, especially the few last days. I started proactively fighting against my huge social media addiction and it helps to make more stuff done and just feel better in general. My focus is returning to me and I feel like I can start to look deeper into things. Hope the next week is gonna be even better. Peace ✌️

Week 7: Doing some small and big things

Tymur Levtsun — Mon, 27 Feb 2023 03:54:43 +0000

Overview

These week I merged two PRs and each of them were both front-end and back-end related. Additionally, I was doing code reviews for my colleagues.

PR 1

In this PR I implemented fetching of records from server and rendering them in domains table that I implemented the last week.

I faced an issue that Remix serialize and deserializes data sent from the server, but it doesn't deserialize dates, so return them like strings.

I found the solution of using remix-typedjson the most simple and beautiful. Using that lib you need just:

json -> typedjson
useLoaderData -> useTypedLoaderData

Another thing that was included in this PR was making the caution dialog for users who try to delete the record.

https://github.com/DevelopingSpace/starchart/pull/242

PR 2

This PR was resolving the issue of making a real request to the server when user tries to delete record or prolong it's expiration date + it resolves some minor UI issues and adds loading effect for specific record in a table.

https://github.com/DevelopingSpace/starchart/pull/276

Week 6: Time to load some data

Tymur Levtsun — Sat, 18 Feb 2023 20:51:06 +0000

Overview

This week I was working on two tasks + reviewing some PRs.

First PR

This one was nice an easy. It just added a create button on domains screen that redirected to create domain screen.

https://github.com/DevelopingSpace/starchart/pull/207

It was approved and merged with no problem

Second PR

This one was way more complicated. It basically adds fetching of domains (aka records) from server instead of showing them from the local mock file. I faced some problems and find some solutions which you can read about in PR description

https://github.com/DevelopingSpace/starchart/pull/242

I feel like it gonna take some time to merge this PR since it has a lot of controversial things to discuss about.

Code reviews

Also did some code reviews on some Front-end and Back-end pull requests. Tried to get involved in them more this week and review not only front-end code.

Week 5: Certificate design and Domains Coding

Tymur Levtsun — Sun, 12 Feb 2023 03:14:41 +0000

Overview

This week I continued working on StartChart UI Design and Front-end. I also did some code reviewing.

UI Design

In terms of design, my main focus of this week was on certificates, since the design for domains management was pretty much done and approved by the team. Certificates page is going to have 3 states:

user doesn't have certificate
user requested certificate
user has certificate

Each of this states require different design. After having a very productive discussion with a team on Wednesday we got a good concept of the design for certificates.

Front-end

I worked on domains table and created a PR with that, which is currently in review.

Code review

Worked on Mario's PR review that included login page and header, had a good discussion on some parts of that with him and he made some adjustments. Appreciate him for perfect collaboration experience.

Starchart: Designing And Theming

Tymur Levtsun — Sat, 04 Feb 2023 04:17:03 +0000

Overview

This week I put my main effort in terms working on StartChart in two things:

UI Design (and collaborating on design with Mario)
Initialising Theme for the Chakra UI

I also did some code review, but they were side quests.

Designing

This week I kept working on UI design with Mario. We presented our design concept of Domain management screens and had very productive conversation with out team members. They provided us many clarifications on how system is gonna work and we adjusted the design accordingly. For now design of domains management screens look very decent.

Chakra UI init

The one PR I created this week was initialisation of Chakra UI theme. For now it only includes shades of our "brand" color, which is well-known Seneca's red color. This color is now applied as a default one for all UI components such as Button, Checkbox etc. After several iterations of code reviews and updates from my side the PR was merged.

Some thoughts

Hope the next week I will flex with some actual view elements be merged :) Have great weekends everyone

First contributions

Tymur Levtsun — Fri, 27 Jan 2023 19:36:30 +0000

Overview

This is the first week when I finally contributed something to the project and wasn't just digging into some technology. On top of that, I also did some code reviewing (which I guess is also a contribution) and tried to get more familiar with some other technologies that we are going to use.

The week 3 contributions

UI design

The first thing that I did this week for the project and one that took the most effort was creating some initial design for the application. I am not a UI/UX designer myself, but I worked a lot with these guys and I am kinda familiar with their tooling. The way to go for me was Figma since Charka UI (the UI component library that we were going to use) has the Figma template and I used it before. On top of that, Figma has incredible functionality in terms of collaboration and since this is an open-source project, I found this characteristic very important.

I am not the super creative guy, so I ended up with a design that looks kind of plain, but it's way better than having nothing. At least, Since I am a front-end developer myself I know that this design is gonna be easy to implement in code.
Link for the design: https://www.figma.com/file/XAcnMIC1y4qumWinSalHI9/Starchart-UI?node-id=2105%3A2109&t=w4LYaSLX7CLNLfT8-1

Code reviews

We didn't have a lot of pull requests this week, so not many of them to review. It was one, where TD initialized remix project with the Remix Blues Stack template. The second PR I checked was David's, where he removed express-prometheus-middleware since we are not going to use Prometheus and he also did some minor package.json related changes.

Choosing my way in Starchart

Tymur Levtsun — Mon, 23 Jan 2023 07:18:27 +0000

Overview

This week I had to choose my role in Starchart, and what part of the project I want to work on. I find front-end development using Remix, React, and Charka UI as the best field where I could apply my skills and competence.

Background

I have pretty strong front-end/mobile development experience as a student. I have been working on commercial projects for the last 4 years where I was using majorly React, Next.js, React Native and many other side technologies.

Why I find this interesting

The Remix is something that I have never worked with before, even tho I have seen some videos about its potential and power. I have worked with Next.js before which is very close to Remix in terms of what problem it resolves. I see Remix as a technology that might become a replacement for the Next.js if maintainer develops it properly.

Typescript

Another thing that made me excited about the Startchart development is the fact that it is going to use Typescript, instead of Javascript. I have been using typescript for last year in all projects that I worked on and it is just so much better to have static types in your code, instead of getting numerous undefined exceptions when developing with javascript.

Conclusion

I will be happy to work on the Start chat front-end side, even tho I want to participate in other parts of the project to, at least understand how these technologies work on the basic level.