Exploring Frontend Architecture

This is a small frontend application that was built to explore different variations of frontend architecture.

You can check it out here.

Functionality

A user can add a journal entry
A user can delete a journal entry
A user can favorite a journal entry
Favorites are saved to local storage. State is hydrated from the favorites stored in local storage upload load.
When a favorite is deleted, the user will have to confirm deletion

Using Puppeteer for E2E Acceptance Testing
Using a Page Object Model to make E2E tests less volatile and more declarative (link)
Application Level Acceptance Testing (link)
Cucumber + Gherkins
Composition Root Pattern (link)
Reactivity using the Observer Pattern (link)
Presenters wire up the UI Framework to the application state (link)
Controllers perform Application Use Cases (link)
Repositories manage and act upon Global Application State (link)
Dependency Inversion is used to interface with a Client Storage Interface. This allows us to Code to an Interface and create a proper Stub for Testing (link)
Outgoing Contract Test to ensure our in-memory client storage works as intended (link)
Github Actions (link)
- Run Application Acceptance Tests and Unit Tests for PRs
- Run E2E Tests after deploy

Name		Name	Last commit message	Last commit date
Latest commit History 148 Commits
.eraser		.eraser
.github/workflows		.github/workflows
public		public
src		src
tests		tests
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
index.html		index.html
jest.config.ts		jest.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
readme.md		readme.md
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts