• This repository has been archived on 28/Mar/2023
  • Stars
    star
    943
  • Rank 48,473 (Top 1.0 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Ritual app for ending the work day inspired by Deep Work

Jobs Done!

Live demoHacker NewsRedditProduct Hunt

Ritual app for ending the work day inspired by Deep Work

Screenshot Screenshot Screenshot

Jump to:

Motivation

Jobs Done! is built on Cal Newport's shutdown ritual concept from his book "Deep Work".

The need for a shutdown ritual comes from the following (oversimplified) reasoning:

  1. Deep focus is invaluable for producing great work
  2. We can only sustain deep focus for a limited amount of hours per day
  3. To be able to focus deeply consistently, our mind requires rest (ie. complete disconnect from work) between working sessions

The app name is inspired by the loyal Peasant

How it works

You decide it's time to call it a day.

You are guided through a set of (customizable) steps meant to relieve your mind from work-related thoughts. The steps often involve formalizing thoughts into tasks and creating a plan for tomorrow. Each step can have one more external links attached.

Then you say a "set phrase" out loud. The set phrase is personal, so choose a phrase you resonate with. Verbalizing your set phrase "provides a simple cue to your mind that it's safe to release work-related thoughts for the rest of the day."

Finally, you're presented a collection of (customizable) pastime activities you can do to disconnect.

I extended the original shutdown ritual with the last step because I've often found myself clueless about how to spend my evening after a day fully immersed in work.

Tech stack

Jobs Done! is a React Native app built with React Native for Web. For web publishing, Jobs Done! compiles into a static app with the app data embedded in the frontend build.

The project features a custom server-side rendering implementation, which might be interesting for someone trying to understand how SSR (Server-Side Rendering) works.

Styles are defined universally using styled-components. Same styles compile to native platforms as well as browsers (on both client and server side). Pretty cool!

How to use

Install

Clone this repo and run yarn install.

Copy data.example.js as data.js in project root. Customize it with your info later.

Run

Run yarn start to start the web app locally in dev mode.

Run yarn cosmos to browse components independently.

Publish

Run yarn build to create (static) production build.

Go to build dir and publish it using something like Now or Surge.

Native

The aforementioned instructions are for running and publishing the web app, but this is a React Native project. I did test Jobs Done! on Android and iOS simulator, but I didn't bother publishing it on app stores. The web version works just fine on both desktop and mobile ¯\_(ツ)_/¯.

Open two terminals to load the app on native devices or simulators. In the first run yarn cosmos:native. In the second run yarn start:native for Expo or yarn ios or yarn android for a specific platform.

License

MIT © Ovidiu Cherecheș

More Repositories

1

illustrated-algorithms

Interactive algorithm visualizations
JavaScript
2,770
star
2

flatris

Fast-paced two-player web game
JavaScript
1,446
star
3

dragdealer

Drag-based vanilla JS component
JavaScript
1,051
star
4

react-testing-examples

Searchable library of React testing examples
JavaScript
387
star
5

react-mock

Declarative mocks for React state and global APIs
JavaScript
368
star
6

react-component-tree

Serialize and reproduce the state of an entire tree of React components.
JavaScript
87
star
7

aufond

A résumé for the modern age
JavaScript
77
star
8

react-component-playground

Minimal frame for loading and testing React components in isolation.
JavaScript
76
star
9

obvious-buttons

Almost flat CSS buttons
CSS
62
star
10

babel-plugin-trace-execution

Trace execution context of JS functions
JavaScript
61
star
11

async-hacker-handbook

The Asynchronous Hacker Handbook
35
star
12

github-issue-template

BDD Issue Template for Github (with Chrome Extension)
JavaScript
18
star
13

chrome-imdb-ratings

Chrome extension for displaying IMDB ratings in listings
JavaScript
16
star
14

async-until

Wait until a given callback returns true
TypeScript
10
star
15

cosmos-example

Example of loading components and fixtures using Cosmos.
JavaScript
10
star
16

react-data-fetch

A good-enough data fetching mixin for React components.
JavaScript
8
star
17

react-querystring-router

Bare router for React components, using query string as props.
JavaScript
8
star
18

play

Agnostic frame-skipping animation library
JavaScript
6
star
19

react-redux-layout

Unleash your creativity with dynamic layouts!
JavaScript
4
star
20

react-cosmos-redux

Redux mock for React Cosmos fixtures
TypeScript
4
star
21

chrome-hide-facebook-sponsored-posts

A Chrome extension for automatically hiding sponsored posts from your Facebook News Feed.
JavaScript
4
star
22

ui-development-made-simple

My JSHeroes talk on how to build a scalable UI architecture
JavaScript
4
star
23

gutenHashTag

Dynamic Twitter background
PHP
3
star
24

mode

A node.js web framework for real-world applications
JavaScript
3
star
25

stoic-guide-to-good-life

Notes from William B. Irvine's book, A Guide to the Good Life: The Ancient Art of Stoic Joy.
3
star
26

berlinjs-2017

Code used for my BerlinJS talk
JavaScript
2
star
27

hacker-comments

A browser hack for hackers
JavaScript
2
star
28

react-animation-loop

React mixin for running a callback at 60fps with frame skipping
JavaScript
2
star
29

react-test-useeffect

JavaScript
2
star
30

react-testing-talk

Slides and resources for my React testing talk
JavaScript
2
star
31

linked-list

Turn an array into a stateless linked list
TypeScript
2
star
32

react-plugin

API for composable 3rd party React plugins
TypeScript
1
star
33

YOH2011

1
star
34

flux-dispatcher-game

Fun with Flux
CSS
1
star
35

chrome-mozaic-profiler

JavaScript
1
star
36

after-pending-promises

Wait for pending promises to resolve
JavaScript
1
star
37

jLaid

JavaScript
1
star
38

async-retry

Wait until cb doesn't throw or time out
TypeScript
1
star