Forem: Thanawat Yodnil

Write Letter Submission - DigitalOcean App Platform Hackathon

Thanawat Yodnil — Sun, 10 Jan 2021 12:27:22 +0000

What I built

Write Letter - where you can write and talk about anything freely openly and anonymously.

Category Submission: Random Roulette

App Link

https://write-letter-ay2j8.ondigitalocean.app/

Screenshots

Description

Write Letter is web app that allow anyone to write and talk about anything openly and anonymously

Write Letter has difference from other is that Write Letter have no grouping for each letter (except hashtag) the idea is to get peoples start talking.

Features

No Sign-Up required
Write anything, just be polited
2 types of writing (see below)
Dark/Light mode

Writing Types

Post: just normally posting it visible publicly to anyone
Paper Plane: unlike normal posting, it get send to randomly to one stranger !

Link to Source Code

Client: https://github.com/littleboycoding/write-letter
GraphQL (Apollo): https://github.com/littleboycoding/write-letter-apollo

Permissive License

MIT License

Background

I'm gonna be honnest, at first I was meant to create app for those who looking for people with same interested.

Why ? because at college I was unable to talk to anyone, they are unlike me, I want to have a team or group with same interested in web development to start developing some stuff !.

But I found out that there are many great tools for that out there.

Then it turn out became Write Letter !

How I built it

I used DigitalOcean as Static Site hosting and as GraphQL API server with MongoDB Atlas as Database. Along the way I learnt a lot of new stuff ! the list are

GraphQL with Apollo
MongoDB with and not with MongoDB Atlas
React (with typescript)
YAML syntax

Additional Resources/Info

There are GraphQL API for developer to integrated with my app !

You can deploy to your own DigitalOcean's App Platform with one click button below

For client

For server

I also created timelapse of creation progress, playlist are here

I've used small script which I wrote myself, it can record and compile into timelapse video check it out here

Thank you very much for this hackathon I learn a lot along the way, Sorry for my bad english, I'm still learning it.

Write Letter #4 Finally theming, hashtag system, tweaking UI/UX

Thanawat Yodnil — Sun, 10 Jan 2021 12:27:12 +0000

This is final part of Write Letter retouching welcome page, added light and dark theme and hashtag system !

First, I'm glad to say that this gonna be the final part of series !

Developer love dark mode isn't it ? So I implemented dark/light theme into my app.

Gonan be honest at first I was meant to add more theme or even custom color (you choose it !).

Also at first I also want to add background changing system too but that make it look strange somehow...

Alright enough for theming, now hashtag system, just like hashtag system on facebook or twitter it allow anyone to look up for letter with matching hashtag.

And lastly just some minor tweaking to UI like better loading spinner, animationing

Remark what we've archived

Theme
Hashtag
Better UI/UX
Minnor bug fixed

That's it for this series, Thanks for reading along here ! I've deployed this app to DigitalOcean which is lived here

Source code can be found here

Client: https://github.com/littleboycoding/write-letter
Server: https://github.com/littleboycoding/write-letter-apollo

Timelapse

Check out my timelapse tool https://github.com/littleboycoding/timelapse

Write Letter #3 Pagination, Paper Plane mode, Commenting !

Thanawat Yodnil — Sun, 10 Jan 2021 12:27:04 +0000

In this part I'm implmenting pagnination to reduce data overload add new writing mode (paper plane) and finally commenting !

I have to say pagination is very important for app like this one, because if user load all data from database at once, that's gonna be big problem

So, I decied to create pagination for letter and comment to help to reduce data overload

Before went for Paper plane writing type I want to implement comment system first

What is paper plane ?

As described in first part of this series, paper plane is writing mode that is not publicly visible to anyone but randomly one stranger will catch it !

Remark who do we got in this part

Pagnination
Comment
Paper Plane

Timelapse

Check out my timelapse tool https://github.com/littleboycoding/timelapse

Write Letter #2 Database, GraphQL, Basic CRUD Operation

Thanawat Yodnil — Sun, 10 Jan 2021 12:26:54 +0000

In this part I continued to implement Database, GraphQL and get start with some basic CRUD

Andddd this is my first time with Apollo and MongoDB.

But surprizingly the process is very straightforward. Such a nice tool !

I also tweak some UI/UX and responsiveness !

At the end I got basic posting working !

Let's remark what we've got this part

MongoDB Setup
Apollo
Responsiveness of app

That's it for this part, Thanks for reading !

Timelapse

Check out my timelapse tool https://github.com/littleboycoding/timelapse

Write Letter #1 Prototyping

Thanawat Yodnil — Sun, 10 Jan 2021 12:26:44 +0000

In first part, I'm going to setup my project for Write Letter, but first let me explain you what is Write Letter.

What is Write Letter ?

well, write letter is little web app which allow anyone to write anything openly and anonymously no sign up required

Features

No Sign-Up required
Write anything, just be polite
Comment (ofc)
2 type of writing types "post" and "paper plane" (detail below)
Dark/Light Mode !

Type of posting

Post is just normally post to writing board so anyone can see
Paper plane is not publicly see by anyone but randomly stranger will catch it

Technologies stack

ReactJS
TypeScript
MongoDB
GraphQL (Apollo)

In first part I start my React project with create-react-app (typescript template) (cuz is good)

Mostly I just prototyping my app in this part and created basic name input

That's all for first part, thanks for reading !

Timelapse

I also created timelapse tool which I called "timelapse" you can use it to captur screen and compile it for timelapse, check it out !