Jounalling App
A journalling project that I made while experiementing and learning about Node and Electron.
- Background
- Images
- Attribution
- Technologies
- Requirements to run the project
- Setup
- Running the project
- Testing
- Project Shortcomings
- Modifications
- Things learned
- Trello Board Original Project & Trello Board Current Project
- Also see Lesson Notes.md
I wanted to create an app that would allow people to journal. That meant having a system that interacted with the computers file system directly. Hearing about Node, and also being familiar with JavaScript, it became an ideal choice to work with Node and Electron to create this desktop applicaiton (as Node allow you to run JS on the computer system natively rather than just in the browser and electron renders HTML like a browser to produce app with Node.)
Icons Attributed to:
Settings button icon made by Freepik from www.flaticon.com
Setting slider icon made by dmitri13 from www.flaticon.com
Add file icon made by Kiranshastry from www.flaticon.com
Folder icon made by Good Ware from www.flaticon.com
File icon made by Freepik from www.flaticon.com
Export icon from Iconmonstr
Slider buttons attributed to W3Schools who have a tutorial on how to make them.
-
It's the main language used on the client side for crreating dynamic and interactive content.
The javascript is actually written in typescript and compiled to javascript by Node.js.
The mark up langauge of the web.
The styling language of the web.
The CSS of the project is compiled from SASS, which adds addtional language features like variables for example.
You will need to have Node installed on your computer.
Make sure to install dependecies before running the project.
npm install
Clone or download the repository then cd to that folder in the commandline / terminal. From that root directory, then enter npm install (for node_modules to install) then npm run bundle to compile ts file into js bundles, then npm start to start electron forge.
npm install
npm run bundle
npm start
Version 1 is tested with automated test usnig the Mocha testing framework. Was not able to apply these these test to latter versions because of the change in interface.
I would like to take some time and some point to add a dark mode and some user settings to the project. These projects when working alone without a team do tend to drag on, but I would like to revisit it to add this improvement.
Dark mode and other and one other theme beside default theme have been added to the application.
Findind a way to improve journal file load times would be something I would also like to change with this project.
Things learned - see also Lesson Notes
I learned how to use Node and Electron for the first time. I learnt about TypeScript and SASS for the first time too. Also I believe it was this project that was the first time I used VScode and I haven't looked back since... :).
Apart from that I've also done some testing in this project with Mocha [in project version 1]. I really wanted to try to make an effort to do some testing with this project as it is something that I struggle with knowing how to do. I was pleased that I was able to start out this project with some testing in a BDD style rather than just adding it in at the end.