bartozzz / offchan.org

WIP: Offchan is a modern, real-time, anonymous cyberpunk image board. The main themes are programming, technology, science, psychology and philosophy.

Hi, I am Bartek 👋

I have excellent knowledge of front-end development. I’m comfortable in technologies such as CSS Modules, CSS Preprocessors, JavaScript inline styling as well as build tools such as Gulp and Webpack. I am confident in understanding documentation when introducing a new framework or library.

I have a deep understanding of component-based frameworks, such as Re​act and Vue​.js. I have a testing mindset and an eye for clean code. I care about code quality, consistency, reusability – that’s why I value functional programming and strong typing (TypeScript, Flow).

Beyond front-end, I am passionate about creating robust, scalable, and secure systems. As a full-stack developer, I can integrate user-facing elements with server-side logic. I adhere to the best infosec and DevOps practices. I always write reusable code and l​i​b​r​a​r​ies.

Social

• Portfolio
• LinkedIn
• GitHub

offchan.org's Issues

Create function for filtering profane images

It shouldn't upload any adult or violent images.

Cannot go back when entering thread via direct link

Transform web URLs into actual links

When user types something like https://google.com, we could transform it into actual link:

<a href="https://google.com">https://google.com</a>

to make it look like:

https://google.com

Create thread module

Possible schema:

{
  "guid": {
    "date": Date,
    "file": String,
    "author": String,
    "content": String,
    "board": BoardEnum
  }
}

Save last loaded threads in local storage

If user is offline, we should load last loaded threads from local storage, so he can continue to lurk till next connection.

Add install prompt

When requirements are meet, we should prompt a "install" banner to add our PWA to the home screen.

Create function for filtering profane words

It should semi-censure profane words, e.g.: replace foo with f*o.

Fix look of thread/comment without photo

It looks pretty ugly:

Name field gets saved only when the user is offline

Handle file upload in comments/threads

Firebase Storage should be used to upload files
Security rules needs to be created
Forms and action needs to be adjusted

Create unread threads counter

It should show how many threads were created since the last visit in a category.

#!/bin/sh vs #!/usr/bin/env bash

Let's look at this line - it would be better to use /bin/sh to ensure portability and security (first variant reduces code injection possibilities).

Add preview for Markdown and KaTeX

After closing #5, we could add preview box, so that user can see how his post will actually look like

Create thumbnails for uploaded images

Add validation & validation errors in comment form

just like in 1d96a24

Work on accessibility – aria tags & stuff

Handle component throws

If a Vue component throws, it should redirect to the error page and send logs via Firebase crash reports.

Glitch effect applies to first 200px of text only

"You cannot enter Offchan" showing up after each visit

Add return button on thread page

This app aims to be a PWA. Once installed on a device, there'll be no browser navigation. We should add a return button on thread page, to come back to the previous position on board.

Create persistent storage for crucial data

E.g. seen threads counter.

Create loading indicators when fetching data

Handle thread not found error

When a thread cannot be found (e.g. /thread/null) it should redirect to the error page.

Add offline information

When user is offline, it should add a small bar on the top/bottom indicating that there's no internet connection.

Add a return button on error page

This app aims to be a PWA. Once installed on a device, there'll be no browser navigation. We should add a return button on error page.

Create offline-first forms

When user is offline, the form state should be saved locally, so user can send it later. Besides saving in local storage, it should disable the submit button and prompt an information, that the form state will be saved till next visit.

Add support for Markdown and KaTeX

Users should be able to use Markdown and KaTeX in their posts, both in threads and comments.

Create comment form component

Give client feedback on Firebase errors

Send notifications on replies in thread

Thread authors should get notifications when somebody adds a comment in their thread. It should be handled locally, not on Firebase, for example by storing the GUID of the created thread in device's memory.

Add TypeScript typings for API responses

We should add TypeScript definitions and keep them up-date with Firebase schemas. Those should be used in components which render data from Firebase.

Create comment module

Potential schema:

{
  "guid": {
    "date": Date,
    "file": String,
    "author": String,
    "content": String,
    "thread": String
  }
}

Add update prompt

If there's a new PWA version available, user should be prompted to reload the app.

Menu on mobile stays open after board change

it shouldn't

Unseen threads counter updates on comments

Handle content overflow in thread/comment content

Change default Bootstrap hamburger

It looks ugly and not native-like on mobile devices (i.e. the orange border).

Save name field in local storage

If user fills the "name" field in board/comment form, it should be saved locally so he can use it on consecutive visits.