rocicorp/repliear

Repliear

A high-performance issue tracker in the style of Linear.

Built with Replicache, Next.js, Pusher, and Postgres.

Running at repliear.herokuapp.com.

Prerequisites

1. Get a Replicache license key
2. Install PostgreSQL. On MacOS, we recommend using Postgres.app. For other OSes and options, see Postgres Downloads.
3. Sign up for a free pusher.com account and create a new "channels" app.

To run locally

Get the Pusher environment variables from the "App Keys" section of the Pusher App UI.

Note: These instructions assume you installed PostgreSQL via Postgres.app on MacOS. If you installed some other way, or configured PostgreSQL specially, you may additionally need to set the PGUSER and PGPASSWORD environment variables.

export PGDATABASE="repliear"
export NEXT_PUBLIC_REPLICACHE_LICENSE_KEY="<your license key>"
export NEXT_PUBLIC_PUSHER_APP_ID=<appid>
export NEXT_PUBLIC_PUSHER_KEY=<pusherkey>
export NEXT_PUBLIC_PUSHER_SECRET=<pushersecret>
export NEXT_PUBLIC_PUSHER_CLUSTER=<pushercluster>

# Create a new database for Repliear
psql -d postgres -c 'create database repliear'

npm install
npm run dev

Credits

We started this project by forking linear_clone. This enabled us to get the visual styling right much faster than we otherwise could have.

repliear's Issues

partial sync should be in order of issue last modified

kanban dnd off-by-one bug

If you drag an item down in the same column it ends up off by one.

sub-16ms mutations

Right now with the full React dataset, toggling issue status/priority takes ~100ms.

Add coming soon to search input box

Remove issue ids from the UI

The currently show up on kanban and detail views. For issues from github they have short reasonable numbers. For issues created through repliear they are a nanoid... and do not look good in the UI.

Create a github importer

I think what we want is to populate the postgres database (initially, at schema construction time) with a snapshot of some popular github project's issue database.

https://github.com/facebook/react/issues has 11k-ish issues. Let's use that one.

So what we need is a program that imports all those issue into maybe a JSON file we can slurp in at schema construction time and use to initially populate the database.

Thinking like:

npm run import-issues facebook/react > foo.json

Then https://github.com/rocicorp/repliear/blob/main/backend/data.ts#L29 would load this json file at use it to populate the database.

Could perhaps use https://github.com/linear/linear/tree/master/packages/import as a basis.

See https://www.notion.so/replicache/Repliear-An-Impressive-but-Minimal-Subset-of-Linear-as-a-Replicache-app-cb4a4fd66c034a84beae6e140669f3b4#d78dff3a8d9b4761a9ac3cdb4bbdf318 for the data from the issues we need to capture.

Update to use non-test replicache license

Right now using test license, need to update to real license without leaking the license.

We will want to use some pluggin that allows using environment variables inside the code compiled by webpack.

Remove "View original issue in GitHub" from detail view

fix overflow issues on detail and comment

Emoji for author in detail view

Remove or improve left nav animation

Often janks or glitches

Placeholders for virtual scroll

When we virtual scroll, can we please have the row dividers stay visible. It gives you more of a sense that motion is happening than when the entire grid goes blank.

improve layout on mobile phones

display comment created time in "x minutes ago" format

Dark. Mode.

Sync issue bodies

Requires implementing some solution for "partial sync".

fix color pallet

Compound filters

Text search

This needs a plan. Or should be removed from the UI :(.

Update to use mousedown rather than click

This will improve perceived latency particularly on mobile.

Reimport dataset day before launch, as it is a month old now

Missing "all issues" UI in left nav

Compare linear to repiiear in this movie:

Screen.Recording.2022-04-13.at.11.01.42.AM.mov

The "issues" item in the left nav should not be collapsible. It should instead show all issues without filters, as opposed to the two other items which show a filtered view.

Kanban board UI

Note: implementing the drag/drop requires adding a new "sort" or "manualSort" field to items. Use https://www.npmjs.com/package/fractional-indexing.

wrap in progress in kanban column title

Restore scroll position when going back from detail

Currently your position in list is lost.

Issue Detail UI

Scroll to top on filter / sort change

"Loading..." text for descriptions and comments not yet loaded

Simple filters

Clicking "active", "backlog", and "issues" in left sidebar should filter appropriately. See also #19 .

Make detail title bar less fatter

keyboard shortcuts

j/k to navigate list
enter to open

Write sql functions for deleting old spaces

mouse over colors are not clear

some mouse overs on icons / text are not using the correct color.

move github syncer to https://github.com/rocicorp/react-issues-snapshot

next/prev buttons in detail view

This will really help illustrate load speed

Import linear_clone UI

https://github.com/tuan3w/linearapp_clone

Initially we will just have it render static data like it is now.

Don't use all cap enum values in UI

These are used in

1. filter ui

2. sort ui

Use camel casing instead.

Change "Github" / G branding at top to "React" + R logo

Have some info on the page about what repliear is

Show modal on page load.

Describe what this demo is.
Link to replicache website.
Link to video showing off repliear.
Give some hints on what to try.

Have button in bottom of left nav to re-show this modal.

Improve sort menu ui

1. Get rid of select/unselected state (currently select state shows an x). Just use selected ui (without x). Defaulting to Modified sort).
2. Fix alignment (it is a little too high right now).
3. Its a bit weird to just have to options in a drop down menu. Lets add a couple more (say priority and status). Also lets bold the currently selected one in the menu.

hole in kanban on drag and drop

There is a double size hole for the item being dragged.

bug: updating priority on kanban card is not working

Remove api/init-spaces, replace with sql function we can call from supabase console

lazy-load drag n drop and markdown libraries

drag-n-drop is only used in kanban
markdown is only used in detail
don't load these libraries until user navigates to these pages

center text in issues navigation

remove empty issueid space in issue list view

bug: editing issue in detail view, incorrectly deletes title

Sort

Sort by either last modified or last updated.

add replicache favico

Improve UI for selected filters

We should improve UI for statuses/priorities currently selected for filters.

1. We should have some indication that they are selected (can be simple like bolding the text)
2. If you select them again we should remove them from the filter set.