
TypeMD is my most recent project & was built to improve on my React skills while also hopefully being able to teach people about how great the developer experience is while working with libraries like [Firebase](https://firebase.google.com) & [SWR](https://swr.now.sh). I wrote about the entire process in [a blog post](/writing/react-firebase-swr) so that people can learn about them.

It does however fill a gap in my workflow as well. I prefer WYSIWYG markdown editors and the ones that I find online are larger products while all I wanted was a very simple markdown editor. Which is why I feel great having an app that I created which I use a lot as well. I know that a lot more people are using it as well, after my blog post & a tweet, a few people found abouot it and it has a tiny active community.

Since then I've written all my blog posts & even this project explanation in TypeMD & it also taught me a lot about cleaner React coding while making use of libraries like SWR for a fast & fluid user experience. Feel free to check out the code on [GitHub](https://github.com/kartiknair/typemd) or visit it [live](https://typemd.now.sh).


TypeMD is a simple & beautiful markdown editor built using React, Firebase, & SWR. It syncs your data using your Google/GitHub account so you can access your files anywhere.

TypeMD


Noize.ml was a web app that I built last summer when I had a lot of free time. While working on something else I was looking for a website that has relaxing sounds and music to listen to and found a few but felt they were overkill and that their UI was distracting. So I decided to build something very simple and also added GIFs so people can experience full chill.

Noize was built using plain React, this was before I discovered Next or Gatsby so I didn't take advantage of the project being relatively easy to make static however it's still pretty fast so I'm not very upset.

This project mainly taught me about important web concepts relating to large files as all the audio files were 1 hour long and all the GIFs were massive. After a lot of research finding out about how large files should be handled I decided to use [backendless](https://backendless.com) (initially it was firebase but I ran into their limits very quickly). Now once the user goes to the page with the music player the ausio file is sourced dynamically from a backendless file database.

For the GIFs I decided to use videos instead as that's what many big companies like gyfcat and reddit use. However this led to a strange issue where on chrome on mobile the videos rendered as black boxes. After some research I found that this was a bug in chrome android and could be fixed by changing a few settings. Sadly that responsibility wold be on the user.

However this was a very fun project to build and surprisingly once I posted it to [ProductHunt](https://www.producthunt.com/posts/noize-ml) and found that people were genuinely interested and I still get a few visitors daily who spend hours on the website which makes me very happy. What else is the purpose of building stuff other than bringing joy and peace to other people.


A web app that I built last summer. It helps people relax by letting them choose from a range of relaxing music/sounds and watch animated GIFs while listening. It’s open source and built with react.

Noize.ml


Grotesk is a project I mostly built for myself. I've noticed that almost every single website I start out building I'll always style the typography first, this meant especially for content-based sites I ended up repeating the same styles many many times. So I built Grotesk, it's a CSS library and react component that makes web typography simple and themeable.

The way it works for the CSS library is using Scss and their variables. The reason I chose Scss instead of CSS custom properties is so that those few people who would like to support legacy browsers like IE 11 can still use the library. The theming for Scss is very simple and since the library only deals with typography it comes out at only 2kb (once minified) which is pretty awesome.

When I first started out building websites I didn't care about performance or accessibility, my attitude was basically if it works on my system it's good enough. After a few months I realized how ignorant I really was, and now I feel like I've become the total opposite, I notice myself visiting [BundlePhobia](https://bundlephobia.com) and running lighthouse before every commit (yes I know there's a GitHub hook for it, I'm currently working on setting that up). This has maybe pushed my design to be more brutalist so that it runs quick however perhaps that's how the web was meant to be.


Grotesk is a CSS library and react component that aims to make web typography a bit more simple. It uses Scss and once minified comes in at a a tiny size of only 2kb.

Grotesk.css


Moji was a fun little project that I built in an afternoon to learn a bit more about FaunaDB and Next.js. It was very interesting to see how easy and well designed the FauanaDB api is and I will surely be using it for projects with a much bigger scope.

> Warning: I know that this is not the best way to build a URL shortener and that something server-side will be much better and quicker. However this program was not built to be the best but rather as an educational project

The code for Moji was surprisingly simple, all that happens is that when a user is on any page that is an alias (a dynamic url page in Next.js using a [alias].js file) the website makes a request to the the FaunaDB database and checks if the alias is in the database. If it is, then we redirect the user to the URL attached to that alias, if not then we redirect the user back to the home page.

That's it, honestly this project was surprisingly easy to build because of the way Next.js and FaunaDB are designed. I also remade the whole project using Vanilla.js (still client-side so not the fastest) and it was still not that difficult and I found it very rewarding. I'll be rebuilding many more simple projects in Vanilla.js to test the limits.


Moji is a delightfully simple URL shortener for emoji lovers. It was a fun project that I built to learn more about the usage of FaunaDB. It uses Next JS and FaunaDB for fast & short URLs.

Moji 👋👉


The most recent branding project I've worked on was Chesster's brand identity. The guys over at Chesster approached me a few weeks ago looking for a fresh new identity for their amazing non-profit. We worked together for a couple of weeks before arriving at this. I'm pretty proud of the end result, even though the logo is not the best or the most creative idea (the knight idea is pretty overdone) I was happy about how cohesive the entire branding turned out with a very distinct idea.

![Logo in black and white](chesster-2_shftgv.png)
![Brand colours](chesster-3_zjttgk.png)
![Brand typography](chesster-4_vstn89.png)
![Brandin usage and examples](chesster-5_zsmlia.png)


Chesster is a Non-Profit based in India that organizes chess tournaments to raise money for charities. They approached me looking for a fresh new identity for their organization and after a few weeks of working together with them I created this modern & minimal visual identity.

Hi! I’m Kartik Nair, a software engineer and designer. Currently specializing in frontend web development & typeface design.

TypeMD

Noize.ml

Grotesk.css

Moji 👋👉

Chesster's Branding