Skip to content
/ journal Public

A full-stack journal web app with Node.js, Express, PostgreSQL, React, Redux and Blueprint.

License

Notifications You must be signed in to change notification settings

scc416/journal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Journal

A full-stack journal web app with Node.js, Express, PostgreSQL, React, Redux and Blueprint. An attempt to replicate the Mini Diary.

Table of Content

Final Product

Dark

Users can:

  • Start writing journal on the editor with various style (bold, italic, underlined, ordered list, unordered list). The status (Saving.../Saved) is shown at the bottom of the editor. It is only saved into the database (with Axios) when the content and title remained unchanged for 3 seconds. Word count is shown at the bottom of the editor
  • Can pick journal of another date by clicking on the calendar / the list under the search bar. All the previous non-empty journals and the journals (even if empty) for the last month can be view and edit
  • Search journals by typing into the search bar. The result list is only updated when the input remained unchanged for 0.5 second
  • Toggle mode (bright/dark mode) by clicking the button on the top left. This preference is stored with cookie-session
  • Logout by clicking the button on the top right. The username is also shown beside the button

Bright

Lock

The app is locked when:

  • The window is first loaded (if user is logged in)
  • The window is inactive (no mouse/keyboard movement) for 3 minutes

The user has to enter the password to unlock. Lock

Responsive Design

  • View on tablet

Tablet

  • View on phone

Phone

Error Handling

Error

Log in / Register

Login Register

Getting Started

  1. Clone or download this repository onto your local device.
  2. cd to the folder where this project is cloned.
  3. Install all dependencies with npm install commands in the client and server folder.
  4. Create a /server/.env file by copying the contents from /server/development.env:
  • Set up your PostgreSQL database for this project and fill in the values for DB_HOST, DB_USER, DB_PASS and DB_NAME
  • Fill in the SECRET value for the cookie sessions
  1. Create tables in the database with the files in server/db/schema by running npm run db:reset in the server folder.
  2. Run the server with npm start command in the server folder.
  3. Run the app in the development mode with npm start command in the client server.
  4. Open the broswer and visit: http://localhost:3000/.

Dependencies

Client

Server

Credits