Micheal-Earl/mitwi

Mitwi

Mitwi is a Twitter clone built with Deno and Fresh.

You can view a demo deployment on Railway or Render
The Railway deployment should be fast, but my free hours mean it might be down
The Render deployment will take a while to spin up after visiting, so give it a few minutes, then refresh

View Railway Demo . View Render Demo

I am looking for work! Check out my blog.
Or contact me on Linkedin.

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Post Mortem
Contact
Acknowledgments

About The Project

Check out a video!

I decided to undertake this project because I wanted to prove to myself and possible employers that I can quickly adapt to new tech stacks and create working prototypes.

Ultimately, I think I accomplished that goal.

Unfortunately, I failed to see just how detrimental some of the choices I was making would be when actually creating a working web app.

Here's why:

Deno is an incredible javascript runtime. It even support npm modules. However, it barely supports npm modules. Many of the things I tried simply did not work.
Many Node.js libraries and frameworks that appear to function end up having issues down the line This meant that I had to redo entire sections of the app when a specific things suddenly wouldn't work in my Deno environment.
Database drivers, query builders, and ORM's are still kind of underdeveloped for the Deno runtime. My initial plan was to use Prisma and Postgres, but for reasons stated above, it didn't work out. Instead, I opted for Mongoose. I've never used MongoDB and still have very little idea how it actually works.
Preact is awesome, and this project only made me love it even more. The problem is that when I use a React based library, I am now using it through two compatability layers: Deno's npm support, and Preacts compat layer.
Deno Deploy is an awesome service for deploying your deno based apps. Unfortunately, it does not support Deno's npm: specifier. The feature that allows you to load commonjs npm modules.
Because Deno Deploy did not work, and I wanted a live demo of my web app, I had to spend countless hours researching and testing alternatives. This was not productive.

Of course, even with all of the above roadblocks, I perservered and stubbornly pushed my way into creating a working web app.

Does this web app scale? Absolutely not. There is no recommendation algorithm for posts. There is no pagination. I have no idea how to scale a MongoDB database, but the way I'm interacting with it right now is for sure not going to scale.

The web app is stateless, and I could load balance between servers without too much concern, but that's about it.

Is this a good example of a Deno Fresh project? Again, no. This code base is filled with repeated code, too much interactivity, and not enough thought towards its architecture. If I were to start over with Deno Fresh and only Deno based modules, I think I could do a much better job of leveraging Deno's "ship no javascript by default" approach. As it is now, almost every component is an island. That's definitely not using Fresh as intended.

(back to top)

Built With

These are the major components of the web app.

Deno
Typescript
Fresh
Preact
Twind (A Tailwind clone without a buildstep)
JWT Auth
MongoDB with Mongoose

(back to top)

Getting Started

Make sure to clone or download the repo and follow the instructions in the next sections.

Prerequisites

Because this app uses Deno, the only real prerequisite is deno itself.

Learn how to install Deno on your machine here: Deno Install Manual

Installation

Again, because this app uses Deno, all the code dependencies will automatically install when running the start task.

However, the app does expect a .env file to be present in the root directory.

The .env file should define a DATABASE_URI field with an older MongoDB URI. The newer style of MongoDB URI's do not work with Deno.

When getting your URI from MongoDB atlas, select the Node.js driver, but specify the version as 2.2.12 or later

This will generate an older style MongoDB URI that should work. Rule of thumb, if your URI starts with mongodb+srv:// instead of mongodb://, it's probably not going to work.

(back to top)