• Home
  • Blogs
  • Projects
  • Goodies
The Reminisce

The Reminisce

This Is Reminisce is a "GitHub for Writers" built using the MERN stack. It enables users to write, commit their progress, and toggle between multiple drafts.

Arif sardar

24th Mar, 2022

7th Jun, 2022

4 min read

github
docs

Reminisce is a full-stack web application designed to be a "GitHub for Writers." It integrates a custom-built version control system with a rich text editor, allowing writers to track their progress, manage different drafts, and visualize changes between versions in a user-friendly interface.

Project Overview & Purpose ✍️

The world of writing, much like software development, is an iterative process filled with drafts, revisions, and alternate paths. However, writers lack the sophisticated version control tools that developers take for granted. Traditional methods involve messy file naming conventions (final_draft_v2_final_final.doc) and cumbersome manual tracking of changes.

Reminisce was created to solve this problem. It provides a centralized platform where writers can manage their projects seamlessly. By building our own version control system and text editor from the ground up, we created a single, cohesive application that empowers users to:

  • Write and edit documents in a clean, modern interface.
  • Commit their progress at key milestones, creating a saved history of their work.
  • Branch their stories to explore alternate endings or major revisions without losing their original work.
  • Visually compare different versions to see exactly what has changed.

The core goal was to translate the power of developer workflows into an intuitive tool for creatives, replacing the complexity of the command line with a smooth, visual experience.

Technical Stack 🧑‍💻

This project was built using the MERN stack and other modern web technologies.

  • Frontend: React (v18.0.0), HTML5, CSS3/SASS
  • Backend: Node.js (v8.11.1), Express.js (v4.17.3)
  • Database: MongoDB (v3.0.6)
  • Authentication: Google OAuth
  • Key Libraries: @mui/material (v5.6.2), CKEditor 5 (v34.0.0)

Key Features & Functionality

1. User Authentication & Dashboard

Users can securely sign up or log in to the application using their Google account via OAuth. Upon logging in, they are greeted with a personal dashboard that displays all projects they own or are collaborating on, providing a centralized hub for all their work.

Screenshot of the Authentication Page and User Dashboard

2. The Project Workspace

This is the core of the application where users can view and manage all documents within a specific project. From this page, users can:

  • Select a document to begin editing.
  • Switch between different project drafts (branches) using a simple dropdown menu.
  • Commit the current state of the project, saving a snapshot of all documents.
  • Access the full save history for the project.

Screenshot of the Project Show Page

3. Document Editor

The document editor provides a clean, distraction-free writing environment powered by CKEditor 5. All changes are saved automatically, and from this view, users can commit their progress or switch to other drafts to compare ideas.

4. Version Control: Committing & Branching

We implemented a native version control system to handle project states.

  • Committing: When a user "saves" the project, they are creating a commit—a snapshot of the project at that moment in time. This action is handled through a custom React modal that simplifies the process.
  • Branching: Users can create new branches to explore different narrative paths. This duplicates the current version into a separate timeline that can be worked on independently.

Screenshot of the "Commit" and Document Editor

Conclusion & Learning Outcomes

Reminisce was fundamentally an exercise in exploration and technical implementation. It was developed with an experimental mindset, prioritizing the challenge of building a custom version control system and visually representing text differentials over creating a production-ready application. The primary goal was to learn and apply complex concepts like Myers' diff algorithm and backend data modeling for versioning within a full-stack environment.

As a result, the project stands as a robust proof-of-concept rather than a polished final product. There is a significant and exciting scope for future development. The foundational work lays the groundwork for numerous potential upgrades, from implementing real-time collaboration to expanding the text editor's capabilities and refining the user experience. This project was an invaluable learning journey, and its current state is a launchpad for many more features to come.

Table of Content

Project Overview & Purpose ✍️
Technical Stack 🧑‍💻

Conclusion & Learning Outcomes

Share:  

Arif Sardar

Building, learning, and sharing—one line at a time.

Stay updated with my latest content!
Subscribe to my free newsletter by entering your email:

© 2024 Arif Sardar. All Rights Reserved.

Version 4. Powered by Next.JS. Made in India.

Blogs Categories

GeneralTypescriptPython

Quick Links

BlogsProjectsGoodiesResume