• Stars
    star
    576
  • Rank 77,502 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 5 months ago

Reviews

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

Repository Details

โœŽ Simple, personal journaling progressive web app

logomark

Personal Journaling Platform

Sol Journal is a simple, minimal, journaling platform that works offline and across all devices. It can be hosted yourself on Firebase and then installed as a PWA, on mobile devices for easy access on a phone, or on Desktops.

preview of page

Introduction

Sol Journal - A simple, open-source personal journaling platform | Product Hunt Embed

Journaling is a keystone habit that can improve your happiness and overall health. Writing in a journal with pen and paper is effective, but not as easily accessible, maintained, or preserved as taking advantage of digital platforms.

Having a journal that is available on any device makes journaling easier. Being tailored specifically to journaling makes it less cumbersome than trying to utilize a note taking app or document for recording thoughts and impressions.

Getting Started

There are 2 ways to get started using Sol Journal:

  1. You can develop it locally after hooking it up to your own Firebase project by following the instructions below
  2. You can host your own version and manage it yourself by following the setup docs

Sol Journal uses firebase to support offline functionality and authentication, meaning a new Firebase app will need to be setup with Firestore as a database if you wish to host it yourself. Be sure to add documents for users and entries, as well as enabling email for user authentication.

Features

In the spirit of minimalism, a few key features are in place for a quick, lightweight journaling experience that can work across devices, including:

  • ๐Ÿ”ฅ Authentication: Cloud firestore persists registered users to a users document and saved journal entries to an entries document
  • ๐ŸŽจ Theming: the src/styles/theme.js file contains a set of colors and default styles that are applied to components with Emotion. A default light and dark theme are already in the file (adding theme-ui support would be a great future addition)
  • ๐Ÿ” Search: full-text search of a user's entries stored in Firestore for quick access to past entries
  • ๐Ÿ–ฅ Mobile Friendly: designed to look great on mobile as well as desktop, with easy navigation on both
  • ๐Ÿ’ก PWA: being a progressive web app makes it installable from Chrome/Safari on desktop, or be added to the homescreen on iOS/Android
  • ๐Ÿ”Œ Offline Support: read/write when you're offline and let the updates happen when your connection is restored
  • ๐Ÿ—„ Export: backup all of your entries at any time to save your data

Project setup

Files are organized into these folders:

/components: user interface pieces to construct the design and layout of the site
/data: local data transformed by Gatsby to become queryable by Gatsby's GraphQL data layer
/img: images used by places like landing pages that are optimized by gatsby-image and then queryable in the GraphQL layer
/pages: public pages that can be seen by unauthenticated users and are completely server side rendered by Gatsby during gatsby build
/routes: private, client only routes only visible to authenticated users that are used by the app section of the journal
/styles: role based design tokens and theme definitions
/util: simple utility functions, for things like formatting dates

Developing

Clone the project:

git clone https://github.com/gillkyle/sol-journal

Install dependencies:

npm install

or

yarn

Then configure a file in a new .env file (using the .env.sample file as a reference) with the following keys from the firebase console:

GATSBY_FIREBASE_API_KEY=<BUNCHofRandomNumbersAndChars>
GATSBY_DEV_AUTH_DOMAIN=<name>.firebaseapp.com
GATSBY_DEV_DATABASE_URL=https://<name>.firebaseio.com
GATSBY_DEV_PROJECT_ID=<name>
GATSBY_DEV_STORAGE_BUCKET=<name>.appspot.com
GATSBY_DEV_MESSAGING_SENDER_ID=############

GATSBY_CONFIRMATION_EMAIL_REDIRECT=https://<name>.firebaseapp.com

Again, be sure to add documents for users and entries, as well as enabling email for user authentication.

Navigate into the project directory, and then launch the site with this command:

gatsby develop

The site will be opened up in your default browser on http://localhost:8000

Edit code in the /src, save your changes, and they'll reload instantly in the browser.

Deploy

To create an optimized build of the site run this command:

gatsby build

A /public folder will be assembled that can be deployed to any static file hosting service like Netlify or surge.

It can be deployed to firebase with this command:

firebase deploy -p public

Inspiration and Other Projects

Sol Journal is inspired by JournalBook and borrows much of its design and navigation.

If you're interested in a comparable version of the project, you can check out this fork that adds rich text support to the journaling block.

More Repositories

1

gatsby-starter-landing-page

๐Ÿ–ฑ A simple, minimal Gatsby starter for quick and easy landing pages
JavaScript
130
star
2

card-surge

UI Playground for well-designed Cards
JavaScript
52
star
3

theme-ui-gallery

Copy and paste-able component structures pre-styled to match your theme
JavaScript
41
star
4

me

the v1 of my personal website and portfolio
JavaScript
36
star
5

synthetic

Spotify integration and song analytics visualization
JavaScript
15
star
6

gatsby-stripe

simple demonstration of stripe checkout integration with gatsby
JavaScript
12
star
7

featherweight

Quick start REST API powered by FastAPI
Python
6
star
8

gatsby-deck

an mdx-deck styled with Gatsby's design tokens and guidelines
JavaScript
5
star
9

gatsby-stripe-serverless-backend

serverless function on aws lambda for gatsby-stripe demo
JavaScript
5
star
10

egghead-framer-motion

Examples accompany egghead videos teaching how to use Framer Motion
JavaScript
4
star
11

tanstack-react-vite-template

TypeScript
3
star
12

gatsby-image-recipes

examples for Gatsby docs of various image techniques
JavaScript
3
star
13

using-gatsby-recipes

Exploration of canary release of Gatsby recipes
JavaScript
2
star
14

gatsby-docz

simple getting started to using Gatsby with docz
CSS
2
star
15

study

Scripture study content authoring
JavaScript
2
star
16

supermario

Testing various patterns for delivering content
JavaScript
2
star
17

gatsby-mdx-examples

simple use cases for MDX in Gatsby
CSS
2
star
18

playlist-hunt

Example full-stack Gatsby app built with Hasura, Auth0, and Chakra-UI
JavaScript
2
star
19

super-mario-api

Inmemory GraphQL server with levels from Super Mario Bros
JavaScript
2
star
20

contemporarium

statically generated demo restaurant site with Sheets backend
JavaScript
2
star
21

graphql-reference

examples for using graphql with Gatsby, this repo mirrors the example linked here:
JavaScript
2
star
22

gatsby-starter-plugin

A boilerplate for creating Gatsby plugins
JavaScript
2
star
23

audible-unlock

Remove DRM from Audible .aax files for usage in free players and tools.
C
2
star
24

egghead-elixir

Getting started lessons with elixir
Elixir
1
star
25

python-hashtable

creating a simple theoretical hash table implementation
Python
1
star
26

egghead-custom-code-snippet

creating a custom code snippets file in visual studio code
1
star
27

notes

MDX
1
star
28

react-divider

JavaScript
1
star
29

playlist-hunt-workshop

Workshop resources for building a full-stack Gatsby app with Auth0 and Hasura
JavaScript
1
star
30

goals-remix

Goals app written with remix
CSS
1
star
31

birthday

a site for celebrating your birthday
JavaScript
1
star
32

react-app-simple-serverless-auth

simple app using AWS amplify and create-react-app to add authentication
JavaScript
1
star
33

shopify-csv-generator

Ruby
1
star
34

gatsby-themes-demo-docz

simple demo of using MDX via the gatsby-theme-docz in the gatsby default starter
JavaScript
1
star
35

egghead-using-mdx

Short examples for using MDX
CSS
1
star