Skip to content
/ Chalk Public

Two-dimensional comment thread layout written using JavaScript and React

License

Notifications You must be signed in to change notification settings

wa0nder/Chalk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Chalk

July 2020 - Warning: this project is in an initial stage of development so anything is up for change.

August 2020 - Warning: even though there is now a live working demo of the project (see below), there's still plenty of room to evolve the idea in terms of live-deployment of the app. This, in turn, means there still can be serious breaking changes in terms of underlying technology used.

October 2020 - Currently switching to a PHP/SQL backend. More details soon to come on my site.

Information relating to the development process behind the aesthetic choices and technical decisions for this project can be read at my site here: https://www.clarityncode.com/p/1-first-steps.html

Purpose: solve the 'nesting layout issue' which plagues nearly all comment thread systems on the web with a 2D grid comment thread layout. Also the components should update themselves using a local database synced with remote database. In practice, and in terms of underlying technology patterns (e.g. ReactJS), this autonomous aspect didn't work out.

It is created in the spirit of a 'CouchApp'* where the website files are attached to the CouchDB database and served from there. * CouchDB's team is still working on integrating a 'per document access' feature so I'll need to add a third, application-layer tier.

the concept of a 'CouchApp' has been officially abandoned by the CouchDB development team, see here: https://docs.couchdb.org/en/stable/ddocs/.

Roadmap

  • (Completed) Explore and implement technical skeleton of application (software to use, API's to call, authentication scheme, etc.) . .
  • (Completed) Architect the overall structure of the program (object organization, begin unit tests, etc.) . .
  • (Completed) Analyze the user experience both from a front-end styling perspective and back-end technical maintenance

Hosted Version

Try out a demo of the app here. On desktop, press and hold 'shift' to scroll horizontally with mouse scroll wheel.

*note - This demo is a browser-based version of the app that uses a local in-browser DB to run.

Local Disk Version

If on desktop you can download all files in the 'chalk_local' folder and run the entire app from your local disk.

*note - also in-browser DB

CouchDB Version

To get started running a version from a live CouchDB instance follow these steps.

  1. clone this project
  2. create a 'credentials.txt' file in the root 'sidewalks' folder which only contains the username and pass for your CouchDB instance separated by '|' (e.g. user|pass ). No spaces in the username or password
  3. create a folder at root named 'cert' holding ssl certificates generated following the instructions here
  4. start a localhost instance of CouchDB and create a db called 'sidewalks'

at CLI, navigate to 'sidewalks' root folder:

  1. type 'npm run build' - this runs webpack
  2. type 'npm run update -- js/Components.js' - "update" runs 'updateScriptNodeJS.js' which uploads files to the DB
  3. type 'npm run update -- css/index.css css/indexDark.css css/indexBright.css'
  4. type 'npm run update -- js/libs/pouchdb-7.1.1.js'

all shared resources needed by individual user db's are now in the 'sidewalks' db

  1. change directory to 'js' subfolder and type 'node httpsSignupServer'

  2. visit the localhost address, follow the 'create an account' screens, then use the app!

  3. to run the tests, run 'npm run build_tests' then load the file 'AccountHomeTests.html' in a browser.

Important! after making any changes to files in 'react_components' folder, run 'npm run build' to run Webpack and get a new 'Components.js' file in the 'js' folder for upload to the 'sidewalks' db using the above 'npm run update -- filename1 filename2 ...' syntax. Any changes to other files that are relevant to loading a website (e.g. html, css) also need to be re-uploaded to the db using 'npm run update -- filename' syntax

About

Two-dimensional comment thread layout written using JavaScript and React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published