https://github.com/strcoder4007/memorysequence
A web app for blogging with everything written from scratch. Made this to teach myself Angular 4 + Typescript back in 2017. Currently updated to Angular 7 (2019). Now rewritten in Vue3 (2025).
https://github.com/strcoder4007/memorysequence
angular-cli angular7 bootstrap nodejs typescript vue3
Last synced: about 2 months ago
JSON representation
A web app for blogging with everything written from scratch. Made this to teach myself Angular 4 + Typescript back in 2017. Currently updated to Angular 7 (2019). Now rewritten in Vue3 (2025).
- Host: GitHub
- URL: https://github.com/strcoder4007/memorysequence
- Owner: strcoder4007
- Created: 2017-07-20T16:50:53.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-12-27T12:51:56.000Z (5 months ago)
- Last Synced: 2025-12-29T05:46:36.523Z (5 months ago)
- Topics: angular-cli, angular7, bootstrap, nodejs, typescript, vue3
- Language: Vue
- Homepage: http://shubhamswe.xyz/memseq
- Size: 8.75 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Memory Sequence · Vue 3 rewrite
Memory Sequence is now a modern Vue 3 + Vite single-page experience that lets you mount any JSON archive into browser storage and read/edit it entirely client-side. The UI embraces a 2025-ready, minimalist dark aesthetic designed for focused reading on any device.
---
- [Key Features](#key-features)
- [Project Structure](#project-structure)
- [Getting Started](#getting-started)
- [Editing Content](#editing-content)
- [Styling & Theming](#styling--theming)
- [Build & Deploy](#build--deploy)
- [Next Steps](#next-steps)
---
## Key Features
- **Zero backend** — Static hosting friendly; mount a JSON file into `localStorage`, no server needed.
- **Self-serve data flow** — Upload/paste JSON, persist it locally, generate/export it, or demount with a click.
- **Modern dark UI** — Focused typography, responsive layout, and gentle motion.
- **Rich reading view** — Sanitised HTML rendering with tag chips and reading-time estimates.
- **Archive overview** — Quick stats (total entries, last update, tag count) plus interactive cards.
## Project Structure
```
memorySequence/
├── index.html # HTML shell & metadata
├── public/ # Static assets copied as-is (favicon, etc.)
├── src/
│ ├── App.vue # Shell layout, storage-backed data flow
│ ├── components/
│ │ ├── AnalyticsBar.vue
│ │ ├── JsonMountPanel.vue # Upload/paste flow + sample JSON
│ │ ├── MemoryDetail.vue
│ │ ├── MemoryEditor.vue
│ │ └── MemoryList.vue
│ ├── assets/
│ │ ├── img/ # Preserved brand imagery
│ │ └── vue.svg
│ ├── data/
│ │ └── sampleEntries.js # Inline example used by the mount panel
│ ├── main.js # Entry point
│ └── style.css # Global theme variables & resets
├── docs/ # Project notes (update as the Vue build evolves)
├── package.json
└── vite.config.js
```
## Getting Started
```bash
npm install
npm run dev
```
- Visit `http://localhost:5173/` (default Vite port).
- `npm run build` bundles the site for production into `dist/`.
- `npm run preview` serves the production build locally.
## Editing Content
1. Launch the app and use the **Mount JSON** panel to upload a `.json` file or paste raw JSON. The payload is validated, stored in `localStorage`, and immediately rendered.
2. Use the **Generate JSON** button (below the search bar) any time to reveal a full-width textarea containing the exact archive currently stored in the browser. Copy it out for backups or manual editing.
3. Click **Demount current JSON** to wipe the mounted archive from the browser and return to the upload panel.
4. The in-app **New Memory** editor converts your draft into the required shape and automatically prepends it to the mounted archive; the textarea mentioned above will include your new entry instantly.
Each entry should follow this structure:
```json
{
"title": "Entry title",
"content": "
HTML content…
",
"time": "14 November 2025",
"tags": ["personal", "theme"]
}
```
Keep HTML simple (`
`, `