ArcJournal is a comprehensive platform that transforms personal reflections into meaningful insights through rich text editing, emotion tagging, and AI-powered summaries. Built with a modular architecture, it supports deployment across web, desktop, and mobile environments, making it a versatile tool for developers creating personalized journaling applications.
Why ArcJournal?
This project aims to streamline the development of reflective, data-driven journaling apps. The core features include:
- 🧠 AI Insights: Weekly summaries and emotional analysis powered by OpenAI GPT-4.
- ✍️ Rich Content: Advanced text editing with support for media, comments, and annotations.
- 🔒 Secure User Management: Authentication, profile handling, and data privacy built-in.
- 🖥️ Cross-Platform Support: Electron-based desktop app with seamless deployment options.
- 🚀 Scalable Architecture: Modular backend and frontend components designed for growth and customization.
|
Component |
Details |
| ⚙️ |
Architecture |
- Electron-based desktop app with React frontend
- Node.js backend with Express
- Separation of client and server directories
- Uses Vite for frontend build
|
| 🔩 |
Code Quality |
- Consistent use of modern JavaScript/TypeScript syntax
- Modular components with React hooks
- Linting likely enforced via npm scripts
|
| 📄 |
Documentation |
- Basic README with project overview
- Includes setup instructions and dependencies
- Code comments present in key modules
|
| 🔌 |
Integrations |
- Electron for desktop packaging
- Electron-updater for auto-updates
- React Router for navigation
- Axios for HTTP requests
- MongoDB via Mongoose for data storage
|
| 🧩 |
Modularity |
- Separate client and server codebases
- Reusable React components and hooks
- Configurable via JSON files (e.g., railway.json)
|
| 🧪 |
Testing |
- Testing framework not explicitly specified; likely uses Jest or similar
- Potential unit tests for React components and backend APIs
|
| ⚡️ |
Performance |
- Uses Vite for fast frontend builds
- Electron's auto-updater optimizes update process
- Code splitting and lazy loading implied via React and Vite
|
| 🛡️ |
Security |
- Uses bcryptjs for password hashing
- jsonwebtoken for auth tokens
- Express-validator for input validation
|
| 📦 |
Dependencies |
- React, Electron, Node.js, Mongoose, Axios, bcryptjs, jsonwebtoken
- Build tools: Vite, Electron Forge, cross-env
- UI extensions: Tiptap extensions for rich text editing
|
└── ArcJournal/
├── DEPLOYMENT.md
├── LICENSE
├── Procfile
├── README.md
├── client
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── src
│ └── vite.config.js
├── electron
│ ├── main.js
│ └── preload.js
├── package-lock.json
├── package.json
├── railway.json
├── server
│ ├── helpers
│ ├── index.js
│ ├── middleware
│ ├── models
│ ├── package-lock.json
│ ├── package.json
│ └── routes
└── setup.sh
ARCJOURNAL/
__root__
⦿ __root__
| File Name |
Summary |
| LICENSE |
- Provides the core licensing information that governs the entire project, establishing legal permissions and restrictions for software use, distribution, and modification within the overall architecture - Ensures clarity on licensing terms, supporting open-source collaboration and safeguarding intellectual property across the codebase. |
| README.md |
- The core code file in this project serves as the foundational component that orchestrates the applications primary functionality—transforming user reflections into meaningful insights and fostering personal growth - It manages the flow of data, handles user interactions, and integrates various tools and technologies to deliver a seamless journaling experience - Overall, this code is essential for enabling users to record, analyze, and derive value from their reflections within the ARCJOURNAL platform, supporting the projects goal of turning reflection into insight and growth. |
| DEPLOYMENT.md |
- Provides comprehensive deployment and update procedures for ArcJournal, enabling hosting on Railway with MongoDB integration and automating in-app updates via GitHub Releases - Facilitates seamless server deployment, environment configuration, and user update delivery, ensuring reliable backend operation and streamlined release management for end-users. |
| railway.json |
- Defines deployment and build configurations for the project, orchestrating the setup of the server environment using NIXPACKS - Ensures automated installation of dependencies and manages server startup with restart policies, facilitating reliable deployment within the Railway platform - This configuration integrates the server component into the overall architecture, supporting seamless deployment and operational stability. |
| package.json |
- Defines project metadata, dependencies, and build scripts for ArcJournal, an Electron-based personal journaling application within the ArcNode Network - Facilitates development, packaging, and publishing workflows, ensuring seamless integration of server, client, and Electron components - Serves as the central configuration point that orchestrates the apps lifecycle, build processes, and distribution across platforms. |
| setup.sh |
- Facilitates initial project setup by automating dependency installation, environment configuration, and asset placement for ArcJournal - Ensures all necessary components are prepared for development or deployment, streamlining onboarding and maintaining consistency across environments within the overall architecture - This script supports the seamless integration of backend, frontend, and assets, enabling efficient project initialization. |
| Procfile |
- Defines the command to launch the web server by navigating to the server directory and executing the Node.js application - It orchestrates the startup process within the deployment environment, ensuring the backend service is initiated correctly as part of the overall architecture - This setup facilitates seamless deployment and operation of the web application. |
server
⦿ server
| File Name |
Summary |
| package.json |
- Defines the core API server for ArcJournal, enabling user authentication, data management, and secure communication - It orchestrates request handling, integrates essential middleware, and connects to the database, forming the backbone of the applications backend architecture to support journal-related functionalities and ensure reliable, scalable service delivery. |
| index.js |
- Establishes the core backend server for ArcJournal, managing API endpoints for authentication, entries, user data, wraps, and statistics - Connects to MongoDB, handles middleware configurations, and ensures server stability - Facilitates communication between client applications and the database, supporting data storage, retrieval, and health monitoring within the overall architecture. |
middleware
⦿ server.middleware
| File Name |
Summary |
| auth.js |
- Implements authentication middleware to verify user identity through JWT tokens, ensuring secure access control across the application - It validates tokens, retrieves associated user data, and attaches user information to requests, facilitating protected route access and maintaining overall security within the server architecture. |
helpers
⦿ server.helpers
| File Name |
Summary |
| openai.js |
- Facilitates automated weekly summaries of journal entries by leveraging OpenAIs GPT-4 model - It analyzes user reflections, grades, and emotions to generate structured JSON reports highlighting weekly trends, key highlights, and emotional insights - This component integrates AI-driven insights into the overall architecture, supporting personalized journaling feedback and progress tracking within the application. |
| gemini.js |
- Generates weekly summaries for ArcJournal by synthesizing user journal entries into a concise JSON report - It captures key themes, emotional trends, highlights, and overall mood, supporting users reflection and insights - This component integrates AI-driven natural language processing to produce warm, structured summaries aligned with the applications focus on emotional awareness and personal growth. |
models
⦿ server.models
| File Name |
Summary |
| User.js |
- Defines the user data model within the applications architecture, encapsulating user identity, onboarding information, and security measures - Facilitates user account management, including registration, authentication, and profile updates, while ensuring data integrity and privacy through schema validation and password hashing - Serves as a foundational component for user-related functionalities across the system. |
| Wrap.js |
- Defines the data structure for weekly user reflections, capturing mood, grades, and journaling activity - Serves as a core component for aggregating and analyzing user emotional trends, progress, and engagement over time within the applications architecture - Facilitates efficient storage and retrieval of personalized weekly summaries to support insights and user feedback. |
| Entry.js |
- Defines the data schema for journal entries within the application, capturing user-specific daily logs with rich content, comments, attachments, and version history - Serves as the core data model for storing and retrieving user entries, enabling features like editing, commenting, and multimedia support, thereby facilitating a comprehensive journaling experience aligned with user activity and customization. |
routes
⦿ server.routes
| File Name |
Summary |
| entries.js |
- Defines RESTful API endpoints for managing user journal entries, enabling creation, retrieval, updating, and deletion of entries - Supports filtering by date ranges and search terms, maintains version history for content edits, and enforces user authentication - Integrates seamlessly into the broader application architecture to facilitate personalized, date-organized journaling functionality. |
| user.js |
- Defines user-related API endpoints for profile management, onboarding completion, and account deletion within the application - Facilitates updating user information, retrieving user profiles, and securely deleting user data and associated entries, ensuring seamless user lifecycle handling and data integrity across the platform. |
| auth.js |
- Defines authentication routes for user registration, login, and profile retrieval within the server architecture - Facilitates secure user onboarding and session management through token-based authentication, enabling seamless access control across the application - Integrates validation, error handling, and middleware to ensure robust security and user data integrity. |
| wraps.js |
- Provides API endpoints to generate, retrieve, and manage weekly summaries of user journal entries - It calculates key metrics such as average grades, mood trends, top emojis, and day-specific insights, enabling users to review their weekly progress and patterns without relying on AI - Integrates seamlessly into the broader application architecture for personalized reflection and tracking. |
| stats.js |
- Provides comprehensive statistical analysis of user journal entries within specified date ranges, including word counts, mood trends, activity patterns, streaks, and engagement metrics - Facilitates insights into user behavior, content quality, and overall engagement, supporting data-driven enhancements to the journaling platforms features and user experience. |
electron
⦿ electron
| File Name |
Summary |
| main.js |
- Manages the main process of an Electron application by initializing the primary window, handling auto-updates, secure token storage, and window controls - Facilitates communication between the renderer and main processes through IPC, ensuring smooth app lifecycle management, secure data handling, and update workflows within the overall architecture. |
| preload.js |
- Facilitates secure communication between the Electron renderer process and main process by exposing APIs for token management, window controls, application information, and auto-updater functionalities - Enables the renderer to invoke main process actions and listen for update events, ensuring seamless user interactions and application maintenance within the overall architecture. |
client
⦿ client
| File Name |
Summary |
| package.json |
- Defines the client-side configuration and dependencies for the ArcJournal application, enabling a rich, interactive editing experience with React and Tiptap - It orchestrates development, build, and preview workflows, supporting seamless content creation and management within the overall architecture - This setup ensures a responsive, feature-rich user interface aligned with the projects journaling and content editing objectives. |
| vite.config.js |
- Configures the development and build environment for the client-side application, ensuring seamless integration of React components with Vite - It establishes project paths, server settings, and build output, facilitating efficient development workflows and optimized production deployment within the overall architecture - This setup supports a smooth, modern front-end experience aligned with the projects modular structure. |
| index.html |
- Serves as the entry point for the client-side application, initializing the user interface within the root DOM element - It loads the main React component, facilitating the rendering of the applications core features and layout - This file integrates essential styles and development tools, enabling a seamless user experience and supporting development workflows within the overall architecture. |
src
⦿ client.src
| File Name |
Summary |
| main.jsx |
- Sets up the React applications entry point by rendering the main App component into the DOM - It initializes the client-side interface, ensuring the entire user interface is mounted within the root element - This foundational code facilitates the startup of the applications user experience, integrating global styles and enabling React's strict mode for enhanced development checks. |
| App.jsx |
- Defines the client-side routing architecture for the application, managing navigation flows based on user authentication and onboarding status - Implements layout components that conditionally render pages such as sign-in, onboarding, and main app sections, ensuring users are directed appropriately and the interface adapts to their current state within the overall user journey. |
context
⦿ client.src.context
| File Name |
Summary |
| ToastContext.jsx |
- Provides a centralized mechanism for managing and displaying toast notifications across the application - Facilitates user feedback by showing transient success, error, or informational messages, enhancing user experience and communication within the overall architecture - Integrates seamlessly with the React component tree, ensuring consistent and accessible notifications throughout the interface. |
| AuthContext.jsx |
- Provides user authentication management within the application by handling login, signup, logout, and user data retrieval - It maintains authentication state, manages tokens, and exposes authentication functions through context, enabling seamless access to user information and auth actions across the app - This component is central to maintaining secure, persistent user sessions within the overall architecture. |
utils
⦿ client.src.utils
| File Name |
Summary |
| birthday.js |
- Provides utility functions for handling user birthdays, including date comparisons, formatting, and age calculations, to support personalized user experiences - Also offers time-based greetings and display name retrieval, enhancing user engagement and interface responsiveness within the applications architecture. |
api
⦿ client.src.api
| File Name |
Summary |
| index.js |
- Provides a centralized API client for interacting with backend services, managing authentication, user profiles, entries, wraps, and statistics - Facilitates secure, streamlined communication between the client application and server, handling token management and request configuration to support core functionalities such as user authentication, data entry management, and analytics within the overall architecture. |
pages
⦿ client.src.pages
| File Name |
Summary |
| Settings.jsx |
- Provides a user interface for managing personal profile settings, account deletion, and data management within the application - Facilitates profile updates, age calculation, and critical account actions like deleting entries or the entire account, ensuring user control over personal data - Integrates with backend APIs and context providers to maintain synchronization and user feedback across the platform. |
| SignIn.jsx |
- Facilitates user authentication by providing a sign-in interface that captures credentials, manages login flow, and handles errors - Integrates with authentication and toast notification contexts to deliver a seamless login experience within the applications architecture, enabling secure access to protected areas and enhancing user engagement. |
| Dashboard.jsx |
- Provides an interactive dashboard for daily journaling, enabling users to record reflections, assign day grades, and select emojis to express their mood - Incorporates birthday-specific prompts and displays relevant greetings, fostering personalized engagement - Integrates with backend APIs to fetch and save entries, supporting a seamless user experience within the broader journaling and self-reflection architecture. |
| SignUp.jsx |
- Facilitates user account creation within the ArcJournal platform by providing a registration interface - Handles input validation, communicates with authentication services, and offers real-time feedback to guide new users through the sign-up process - Integrates seamlessly into the overall architecture to enable onboarding and user management for the ArcNode Network. |
| Onboarding.jsx |
- Facilitates user onboarding by guiding new users through personalized setup steps, including profile details and journaling goals - Ensures seamless data collection, validation, and submission to enhance user experience and tailor content, ultimately integrating users into the broader application architecture focused on personalized journaling and user engagement. |
| Journal.jsx |
- Journal.jsxThis component serves as the central interface for users to view, create, and manage their journal entries within the application - It provides a calendar-based view that allows users to navigate through different months, select specific dates, and access or add entries associated with those dates - Additionally, it integrates features such as emotion tagging, rich text editing, and comments, fostering a comprehensive journaling experience - Overall, Journal.jsx acts as the primary hub for user reflection and record-keeping, seamlessly connecting date navigation, content management, and interactive feedback within the applications architecture. |
| ArcWrapped.jsx |
- The ArcWrapped.jsx file serves as a key component within the client-side architecture, responsible for presenting a comprehensive overview of user emotional and engagement metrics over customizable timeframes - It fetches statistical data from the API, processes it, and displays it through an intuitive interface featuring dynamic visual cues such as color-coded grades and emoji representations - This component enables users to analyze their emotional patterns and activity trends, thereby supporting the applications goal of fostering self-awareness and mental well-being - Overall, it acts as an interactive dashboard that visualizes user insights, integrating seamlessly into the broader architecture focused on personalized data-driven experiences. |
components
⦿ client.src.components
| File Name |
Summary |
| EmojiPicker.jsx |
- Provides an interactive emoji-based emotion selector integrated into the user interface, enabling users to express their current feelings visually - It enhances user engagement and emotional clarity within the application by offering a curated set of emotion icons, labels, and visual feedback, contributing to a more personalized and intuitive user experience across the platform. |
| Spinner.jsx |
- Provides a reusable loading indicator component that visually communicates ongoing processes within the user interface - It enhances user experience by signaling activity during data fetching or processing states, contributing to a cohesive and responsive design across the application - The spinners customizable size and color ensure seamless integration with various UI themes and contexts. |
| TitleBar.jsx |
- Provides a custom title bar component for the application, enabling window control actions such as close, minimize, and maximize within an Electron environment - When running outside Electron, it displays a static header - This component integrates seamlessly into the overall architecture by offering platform-specific window management, enhancing user experience across desktop environments. |
| RichEditor.jsx |
- RichEditor.jsxThis component provides a rich text editing interface within the application, enabling users to create, format, and annotate content dynamically - It leverages the Tiptap editor framework to support a wide range of text styles, media embedding, and task management features, facilitating complex document editing workflows - As a core part of the client-side architecture, it ensures a seamless and interactive user experience for content creation, editing, and collaboration, integrating various extensions to enhance functionality and flexibility across the application. |
| Modal.jsx |
- Provides a reusable modal component for user interactions, enabling confirmation prompts, alerts, or dialogs within the application - It integrates seamlessly into the overall architecture by offering a flexible, styled overlay that manages user responses, ensuring consistent modal behavior across different features and enhancing user experience throughout the project. |
| CommentsSidebar.jsx |
- Provides an interactive sidebar for managing user comments within the application - It enables viewing, searching, highlighting, and deleting comments, facilitating seamless user engagement and feedback tracking - The component integrates with the overall architecture to enhance content review workflows and improve user collaboration by offering an organized, accessible comment interface. |
| Sidebar.jsx |
- Provides the navigational sidebar for the application, enabling users to access main sections such as Today, Journal, Stats, and Settings - It displays user information, including name and email, highlights birthdays, and facilitates user logout - Integrates with authentication and routing systems, supporting seamless navigation and personalized user experience within the overall app architecture. |
This project requires the following dependencies:
- Programming Language: JavaScript
- Package Manager: Npm
Build ArcJournal from the source and install dependencies:
-
Clone the repository:
❯ git clone https://github.com/stinoooo/ArcJournal
-
Navigate to the project directory:
-
Install the dependencies:
Using npm:
Run the project with:
Using npm:
Arcjournal uses the {test_framework} test framework. Run the test suite with:
Using npm:
Arcjournal is protected under the MIT License. For more details, refer to the LICENSE file.