TLF {Apps]
Track a day, Log a Ticket, Find a Link: These three applications were inspired by a vision to solve certain gaps in a corporate environment. From film production, education institutes, governmental responsibilities and events industries. All three of these applications work together to fill a specific need to create an easy to use and helpful. It essentially solves workplace chaos while daring to improve politics associated with the territory: Track a Day, Log a Ticket, Find a Link. It is the kind of tool you open, do the thing, and get back to your life. Track overtime without turning it into a second job, file tickets without feeling like you are writing a novel for an audience that does not exist, and keep every important company link in one place so nobody has to spelunk through spreadsheets, bookmarks, and half remembered URLs ever again.
This project started the honest way, with a mistake I never wanted to repeat. While moderating multiple studios at Akademia, I accidentally deleted someone’s ticket on a clunky system I did not build. That moment burned in the lesson: Good software should protect users from the worst day they are having, not amplify it. TraLogFin is me building the system I wish I had then, cleaner flows, safer patterns, and a user experience that does not ask for permission to waste your time.
Where it is going is simple and ambitious at the same time. TraLogFin is becoming a small, sharp suite that scales without losing its manners. A front end that stays structured and readable as it grows, a workflow that stays fast even when the data gets real, and a codebase that welcomes contributors because the intent is obvious the moment you open the project. If you like tools that value clarity, speed, and practical design over ceremony, you are exactly the kind of person I want reading this, using it, and helping push it forward.
Table of Contents
Open Visual Studio Code and, with the application running, press Ctrl + ` to open the integrated terminal panel. This step requires Node.js to be installed, so ensure you have completed the Full Installation section and that npm is available in your system’s PATH before proceeding. Once the terminal is open, enter the following commands into the Terminal tab to initialize a development environment using REACT, SASS and HTML.
# Launch front-end
npm run app
# Launch back-end (from root/source/modules/server)
=======
# Launch front end
npm run app
# Launch back end (from root/source/modules/server)
nodemon landing
# Compile project into public/
npm run deploy
# Launch testing environment
npm run launch
# Close testing environment
npm run stop
# Switch GitHub branches
git checkout 4.01Prerequisites: Install Visual Studio Code and Node.js
Click on the top right green button with the text of <> Code and open with Visual Studio.
Complete Package List
npm install sass
npm install mongoose
npm install -g react
npm install mailtrap
npm install -g nodemon
npm install nodemailer
npm install -g typescript
npm install -g webpack-cli
npm install --save-dev cors
npm install --save-dev axios
npm install --save-dev jquery
npm install --save-dev bcrypt
npm install --save-dev dotenv
npm install --save-dev express
npm install --save-dev mongodb
npm install --save-dev webpack
npm install --save-dev kill-port
npm install --save-dev react-dom
npm install --save-dev bootstrap
npm install --save-dev ts-loader
npm install -g webpack-dev-server
npm install --save-dev css-loader
npm install --save-dev sass-loader
npm install --save-dev file-loader
npm install --save-dev webpack-cli
npm install --save-dev style-loader
npm install --save-dev babel-loader
npm install --save-dev @types/react
npm install --save-dev @types/jquery
npm install --save-dev dotenv-webpack
npm install --save-dev @types/react-dom
npm install --save-dev react-responsive
npm install --save-dev webpack-dev-server
npm install --save-dev copy-webpack-plugin
npm install --save-dev html-webpack-plugin
npm install --save-dev babel-preset-es2015
npm install --save-dev @babel/preset-react
npm install --save-dev terser-webpack-plugin
npm install --save-dev mini-css-extract-plugin
npm install --save-dev @babel/preset-typescript
npm install --save-dev extract-text-webpack-plugin
npm install --save-dev css-minimizer-webpack-plugin
npm install --save-dev @babel/core @babel/preset-envsource/index.tsx
↓
source/layouts/containers/Main/IndexMain/IndexMain.tsx
↓
layouts/components/Section/default/
↓
Section.default.tsx → *.scss
node --versionnpm init -ynpm install -g react
npm install -g typescript
npm install -g webpack-cli
npm install -g webpack-dev-serverWebpack, React, SASS, jQuery and Tools:
npm install sass
npm install mongoose
npm install nodemailer
npm install --save-dev jquery
npm install --save-dev webpack
npm install --save-dev react-dom
npm install --save-dev bootstrap
npm install --save-dev kill-port
npm install --save-dev webpack-cli
npm install --save-dev @types/react
npm install --save-dev @types/jquery
npm install --save-dev @types/react-dom
npm install --save-dev react-responsive
npm install --save-dev webpack-dev-server
npm install --save-dev copy-webpack-plugin
npm install --save-dev html-webpack-plugin
npm install --save-dev terser-webpack-plugin
npm install --save-dev mini-css-extract-plugin
npm install --save-dev css-minimizer-webpack-pluginnpm install -g nodemon
npm install --save-dev cors
npm install --save-dev axios
npm install --save-dev bcrypt
npm install --save-dev dotenv
npm install --save-dev express
npm install --save-dev mongodbnpm install --save-dev ts-loader
npm install --save-dev css-loader
npm install --save-dev sass-loader
npm install --save-dev file-loader
npm install --save-dev style-loadernpm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-typescript
npm install --save-dev extract-text-webpack-plugin
npm install --save-dev @babel/core @babel/preset-envnpm install mailtrap
npm install mongoose
npm install nodemailer
npm install -g nodemon
npm install --save-dev cors
npm install --save-dev axios
npm install --save-dev bcrypt
npm install --save-dev dotenv
npm install --save-dev express
npm install --save-dev mongodb
npm install --save-dev dotenv-webpackThis is the contract between data and display. The database and role selection determine what the front end renders, how it renders it, and which visual states are active.
This is where the testing surface lives. If something breaks, it usually breaks here first, which is the point. It also encompasses a lot of storytelling elements. I wanted to do three years to test the demo but realized that it's unnecessary so I might just log 4 weeks, which is a month and play around with that maths.
These classes are intentionally simple. They act like a UI contract.
| State Type | Classes | Alt | Purpose |
|---|---|---|---|
| Operating State | .active · .asleep |
.running · .disabled |
Indicate whether an app in use or inactive |
| -------------------- | ---------------------------------------- | ------------------------ | -------------------------------------------------------------------------- |
| Preview State | .visible · .hidden |
.conceal · .reveal |
Used for recording front-end and used on, 'layout/components' |
| -------------------- | ---------------------------------------- | ------------------------ | -------------------------------------------------------------------------- |
| Indexed State | .expanded · .collapsed |
.unfolded |
Manage sections that can open and close while staying part of the page |
| -------------------- | ---------------------------------------- | ------------------------ | -------------------------------------------------------------------------- |
| Emphasize State | .highlight · .downplay |
Applied to component for testing before production release | |
| -------------------- | ---------------------------------------- | ------------------------ | -------------------------------------------------------------------------- |
| Application | Role Question | Options |
|---|---|---|
| Track a Day | What's your vocation? | .established · .freelancing |
| Log a Ticket | What's your position? | .manager · .employee |
| Find a Link | What's your occupation? | .specialist · .technician |
Frustrated with spreadsheets and done with guesswork? Track time cleanly and let totals speak.
| Configuration | Options |
|---|---|
| What's your vocation? | .freelancing · .established |
Ticketing should feel like momentum, not admin. The goal is quick capture, clear ownership, and visible progress.
| Configuration | Options |
|---|---|
| What's your position? | .manager · .employee |
A fast index for links a team actually uses. Think spreadsheets, schedules, docs, dashboards.
| Configuration | Options |
|---|---|
| What's your occupation? | .specialist · .technician |
Company comparisons as a thought experiment: the & icon looks like a dog scratching its anus.
| Configuration | Options |
|---|---|
| Layouts Resolutions | .landscape · .portrait · .square |
| Consider Technologies | .microsoft (Excel) · .google (Sheets) |
This project uses a MongoDB backed server module to support an office application suite that tracks overtime, logs tickets, and stores links.
Note: For demonstration purposes,
roleNamerepresents the user's selected company position and drives behavior and visibility.
For demonstration purposes, the roleName represents the user's selected company position and influences the application's behavior accordingly.
Company comparisons because it's an interesting thought experiment: The '&' icon looks like a dog scratching its anus.
| Category | Options |
|---|---|
| Mobile Platforms | .apple · .android |
| Productivity Suites | .microsoft · .google |
| Fitness Chains | .planet-fitness · .anytime-fitness |
This project uses a predictable layout container system to prevent CSS collisions and keep page structure readable at a glance.
Primary containers live under source/layouts/containers/ and use the following block names:
| Container | HTML Tag | ID Pattern | Purpose |
|---|---|---|---|
| Overlay | <section> |
${pageName}-overlay |
Top layer UI, modals, focus states |
| Leftbar | <aside> |
${pageName}-leftbar |
Left sidebar navigation zone |
| Rightbar | <aside> |
${pageName}-rightbar |
Right sidebar utility zone |
| Header | <header> |
${pageName}-header |
Top layout zone for identity |
| Main | <main> |
${pageName}-main |
Primary content area |
| Footer | <footer> |
${pageName}-footer |
Bottom layout zone |
Important: The
${blockName}keywords are not decoration. They are how the codebase stays stable when styles grow and features multiply.
| Action | Shortcut | Description |
|---|---|---|
| Collapse Folders | Ctrl + Shift + P |
Collapse all folders in Explorer |
| Collapse Sections | Ctrl + K + 0 |
Collapse all code sections (caret in root scope) |
| Open Settings | Ctrl + , |
Access VSCode settings |
| See Props & Callbacks | Ctrl + SpaceBar |
IntelliSense autocomplete |
| Open Run & Debug | Ctrl + Shift + D |
Launch debugger |
| Stop Terminal Server | Ctrl + C |
Stop running server process |
This layout is modular on purpose. It is optimized for forward momentum and predictable scaling, not for matching a single framework template. The naming is descriptive, the separation is strict, and the intent is obvious when you scan the tree.
root/
├── .vscode/
│ └── launch.json
├── public/ # Final product for users
│ ├── index.css
│ ├── index.js
│ └── index.html
├── source/
│ ├── assets/
│ │ ├── gif-files/
│ │ ├── ico-files/
│ │ ├── jpg-files/
│ │ ├── md-files/
│ │ ├── mp3-files/
│ │ ├── mp4-files/
│ │ ├── pdf-files/
│ │ ├── png-files/
│ │ ├── psd-files/
│ │ ├── svg-files/
│ │ ├── ttf-files/
│ │ ├── txt-files/
│ │ ├── xcf-files/
│ │ └── zip-files/
│ ├── layouts/
│ │ ├── components/
│ │ │ ├── Anchor/
│ │ │ ├── Article/
│ │ │ ├── Aside/
│ │ │ ├── Button/
│ │ │ ├── Division/
│ │ │ ├── Fieldset/
│ │ │ ├── Figure/
│ │ │ ├── Form/
│ │ │ ├── Header/
│ │ │ ├── List/
│ │ │ ├── Menu/
│ │ │ ├── Navigation/
│ │ │ ├── Section/
│ │ │ ├── Span/
│ │ │ ├── Table/
│ │ │ └── Time/
│ │ ├── containers/
│ │ │ ├── Footer/
│ │ │ ├── Header/
│ │ │ ├── Leftbar/
│ │ │ ├── Main/
│ │ │ ├── Overlay/
│ │ │ ├── Rightbar/
│ │ │ └── README.md
│ │ ├── designs/
│ │ ├── pages/
│ │ ├── scripts/
│ │ └── styles/
│ ├── modules/
│ │ ├── context/
│ │ ├── routes/
│ │ ├── server/
│ │ └── tools/
│ ├── utilities/
│ ├── index.html
│ ├── index.scss
│ └── index.tsx
├── bookmarks.html
├── README.md
├── index.html
├── index.scss
├── index.tsx
├── .gitignore
├── package.json
├── tsconfig.json
└── webpack.config.js
Compiled output and static entry points. This is the browser facing product. If it is in public/, it is assumed safe to ship.
All authored code and assets. This is the only place you should be editing during development.
Typed asset storage. Keeping formats separated avoids build edge cases and reduces accidental misuse.
| Directory | Purpose |
|---|---|
gif-files/ |
Animated media used for UI accents or demos |
ico-files/ |
Icon formats for browser and OS surfaces |
jpg-files/ |
Photos and compressed imagery |
md-files/ |
Markdown content used as authored text or internal docs |
mp3-files/ |
Audio assets |
mp4-files/ |
Video assets |
pdf-files/ |
Portable documents used for reference or downloads |
png-files/ |
Lossless graphics and UI images |
psd-files/ |
Photoshop source files kept for design iteration |
svg-files/ |
Vector assets, icons, logos, themeable graphics |
ttf-files/ |
Fonts |
txt-files/ |
Plain text notes and content |
xcf-files/ |
GIMP source files |
zip-files/ |
Archived bundles and imports |
The UI system. This is where the application becomes readable. The split between components, containers, and pages is intentional: small semantic primitives, then page scaffolding, then route level composition.
| Component | Purpose |
|---|---|
Anchor/ |
Link primitives and link styling rules |
Article/ |
Article wrappers and content structure |
Aside/ |
Secondary content primitives |
Button/ |
Button UI and interaction patterns |
Division/ |
Generic blocks when semantic tags are not the right tool |
Fieldset/ |
Grouped form primitives |
Figure/ |
Media and caption composition |
Form/ |
Form primitives and layout rules |
Header/ |
Component level header primitives (not the page container) |
List/ |
List primitives |
Menu/ |
Menu primitives and menu layout |
Navigation/ |
Navigation structures (menus, breadcrumb patterns, link groups) |
Section/ |
Section primitives used across pages |
Span/ |
Inline wrappers for text and small UI fragments |
Table/ |
Tabular UI and table primitives |
Time/ |
Time and date display primitives |
| Container | Purpose |
|---|---|
Overlay/ |
Top layer UI, modals, focus states, global overlays |
Leftbar/ |
Left sidebar zone |
Rightbar/ |
Right sidebar zone |
Header/ |
Top layout zone for identity and navigation |
Main/ |
Primary content zone |
Footer/ |
Bottom layout zone |
README.md |
Container specific conventions and notes |
| Directory | Purpose |
|---|---|
designs/ |
Compositions and visual experiments that should not pollute core components |
pages/ |
Route level screens, composed from containers and components |
scripts/ |
Layout and UI scripts tied to interaction and build behavior |
styles/ |
Shared styling system (tokens, globals, mixins, structural rules) |
Application logic and infrastructure that supports the UI and routes.
| Module | Purpose |
|---|---|
context/ |
Shared state, providers, and app wide context wiring |
routes/ |
Routing definitions and navigation configuration |
server/ |
Backend code, MongoDB wiring, server entry points |
tools/ |
Internal helpers that support modules, scripts, and dev workflows |
Reusable utilities and patterns. This is the toolbox that keeps code duplication under control.
| Utility | Purpose |
|---|---|
~flex-setup/ |
Flexbox utilities and layout patterns |
~grid-setup/ |
Grid utilities and layout patterns |
animations/ |
Reusable motion patterns |
projects/ |
Feature grouped utilities and prototypes |
vendors/ |
Third party vendor code kept separate from authored logic |
Editor configuration for consistent debugging and project workflows.
Open the README to see the agreed workflow for syncing main and version-controlled branches into one clean, shared history. You’ll also see how branches are “archived” in practice and what gets created next to keep teamwork moving smoothly. Follow it top-to-bottom and you’ll end up with one source of truth and a predictable, low-drama branch state.
=======
b0979a4b3451384187fbb5eff59e42c84b0bdbbf
These arrows are intentional review markers. They flag areas I have personally reviewed, reworked, and tested.
| Flag | Unicode | Meaning |
|---|---|---|
| 🠊 | U+1F80A | Reviewed and validated |
| 🠋 | U+1F80B | Reviewed with follow ups planned |
| 🠈 | U+1F808 | Needs another pass |
| 🠉 | U+1F809 | Promising direction, keep iterating |
Goal: Standard merge commit, preserve history, reduce risk, and avoid data loss.
Step 1: Ensure 4.01 is clean and up to date
git checkout 4.01
git pullStep 2: Update main and merge
git checkout main
git pull
git merge 4.01Step 3: Resolve conflicts if prompted, then complete the merge commit
Step 4: Push updated main
git pushPreferred approach: Keep the branch as a historical reference but stop developing on it. If you delete it later, do it only after verifying
maincontains everything.
git checkout main
git pull
git checkout -b 4.02
git push -u origin 4.02Switch VS Code to 4.02:
git checkout 4.02Built with ❤️ by Tertius Roach
Good software should protect users from the worst day they are having, not amplify it.
