Project Categories

Project Setting Personal
Team Size 1
Role(s) Creator / Developer
Languages C# HTML CSS JavaScript TypeScript
Software/Tools Used Visual Studio Code, Node, Electron, Node.js API, React, React Router DOM, SASS, Webpack, Babel, Material UI, Tippy.js
Status In Development
Time Period March 2020 - Current

About

Project Archivist was created for two reasons: 1. to create something useful in under 24-hours in an almost Hackathon/Game-jam-esque fashion; 2. to give a visual interface for creating scripts for creating backups. Not only am I a very visual/interface-oriented person, creating scripts can be a bit problematic. That is, one could make a typo later in a script and not discover it until encountering an error as late as hours later when considering the length of time backups can take.

This first was created using Windows Forms. The program serves its purpose and accounts for a number of use/error-cases. However, due to the visual and platform limitations of Windows Forms, I decided to migrate this program into Electron and archive the Windows Forms version. I used this as an opportunity to learn both a new API (Electron, + Node.js by inheritance). Due to initial complications with TypeScript, I stuck with traditional JavaScript for this project

Following an internship with Forbes, I was inspired to make another attempt at using TypeScript and Sass while also learning React (the remaining of the big three front-end frameworks that I hadn't worked with). I forked a popular repo called the electron react boilerplate to make my own that was a bit more functional to my needs, then used it to generate the new Archivist repo. This iteration of the project is still under development.

My Work

WinForms

  • Design main, item, exclusion, error, and message windows for the program to use
  • Set up form elements in a semantic way (limitations on numeric up-downs, using the proper file/folder dialogs)
  • Make use of an ArchivedItem object to use information from the forms in setting up the output script
  • Handle a number of error cases to prevent the user from potentially making a mistake

Electron JS

  • Design a single-window interface using HTML/CSS markup/styling, with multiple stylesheets to serve different purposes and to allow for future theming capabilities
  • Make use of JQuery selectors/events for buttons and form elements
  • Make use of Node.js File System module for file writing
  • Make use of Tippy.js for tooltips for form controls
  • Re-create ArchivedItem and similar structures from the WinForms application
  • Reach mirrored functionality with WinForms app for a 1.0.0 full release
  • Resolve numerous bugs found post-release

Electron React

  • Forked and modified a boilerplate first used for generating the Archivist repo
  • Utilize Material UI to create re-usable UI inputs
  • Create class-based components in a nested separation-of-functions fashion
  • Use React Router to create a single-page app that routes to different sub-component pages

Samples

These are some samples from the project.

Videos

Screenshots

WinForms

Electron

Code

WinForms

Electron

Places

Source Code (WinForms) GitHub Repo
Source Code (Electron JS) GitHub Repo
Source Code (Electron React) GitHub Repo