Skip to content

4Clover/Jurnl

Repository files navigation

📖 Jurnl

A digital journaling web application where users can create personalized journal entries, organize their thoughts, and express themselves through customizable text and images. ✨

🌟 About Jurnl

Jurnl is designed to bring the personal touch of traditional journaling to the digital world. Users can create multiple journals, write entries with custom fonts and styles, add images, and organize their memories by date. Whether you're documenting daily thoughts, tracking personal growth, or creating a digital scrapbook, Jurnl provides a simple yet flexible platform for self-expression. 💭

🚀 Features

  • 📚 Multiple Journals: Create and manage different journals for various aspects of your life
  • ✍️ Rich Text Entries: Write with customizable fonts, text styles, and formatting
  • 🖼️ Image Support: Add photos and images to bring your entries to life
  • 📅 Calendar View: Navigate through your entries by date
  • 🔒 Privacy Options: Keep journals private or share selected entries
  • 👥 Friends System: Connect with friends and share your journey (coming soon)
  • 🎨 Customization: Personalize the look and feel of your journals

🛠️ Tech Stack

  • ⚡ Frontend: SvelteKit with TypeScript - for a fast, reactive user interface
  • 🗄️ Database: MongoDB - for flexible document storage
  • 💅 Styling: SCSS - for maintainable stylesheets
  • 🔐 Authentication: Google OAuth - for secure user accounts
  • 🚀 Development: In-memory MongoDB for zero-config local development

🏁 Getting Started

📋 Prerequisites

  • Node.js (v16 or higher) 🟢
  • npm 📦

⚡ Quick Start

  1. Clone the repository:

    git clone https://github.com/your-username/jurnl.git
    cd jurnl
  2. Install dependencies:

    npm install
  3. Start the development server:

    npm run dev
  4. Open http://localhost:3000 in your browser 🌐

That's it! 🎉 The app uses an in-memory database for development, so there's no database setup required.

💻 Development Commands

npm run dev        # 🚀 Start development server
npm run build      # 📦 Build for production
npm run preview    # 👀 Preview production build
npm run lint       # 🔍 Run linting
npm run format     # ✨ Format code with Prettier
npm run check      # 🔧 Type checking
npm run test       # 🧪 Run tests

🐛 Debug Panel

Jurnl includes a developer debug panel at /debug that allows you to:

  • 🧪 Test all API routes directly
  • 🔍 Check authentication states
  • 💾 Verify database operations
  • 👥 Test the friends system
  • 📊 Inspect API responses

This is particularly useful for backend development and API testing without going through the UI.

📁 Project Structure

src/
├── routes/          # 📄 SvelteKit pages and API routes
├── lib/
│   ├── components/  # 🧩 Reusable UI components
│   ├── server/      # ⚙️ Server-side logic
│   │   ├── api/     # 🌐 API services
│   │   ├── auth/    # 🔐 Authentication
│   │   └── database/# 🗄️ Database configuration
│   └── types/       # 📝 TypeScript type definitions
└── styles/          # 🎨 SCSS stylesheets

🌍 Environment Variables

For basic development, no configuration is needed! ✅ For production or custom setups:

  • MONGODB_URI = mongodb://root:example@localhost:27017/ - MongoDB connection string (optional in dev)
  • GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET OAuth variables for Google login (optional)

🔧 Setting Up OAuth

  1. Login to the Google Auth Console. 🌐
  2. Select 'create project' and give it a name. 📝
Screenshot 2025-06-11 at 10 27 18 AM
 Name: Jurnl
  1. Click on clients and then 'get started'. 🚀
Screenshot 2025-06-11 at 10 28 56 AM
  1. Setup project configurations. ⚙️
Screenshot 2025-06-11 at 10 29 49 AM
 App name: Jurnl
 User support email: <your-email>
 Audience: External
  1. Click 'create oauth client'. 🔑
Screenshot 2025-06-11 at 10 30 41 AM
 Application Type: Web Application
 Name: Jurnl
 Authorized JavaScript origins: http://localhost:3000
 Authorized redirect URIs:
  http://localhost:3000/profile
  http://localhost:3000/journals
  http://localhost:3000/auth/login/google/callback
  1. Save and copy client ID and secret to .env 💾

📚 Resources

All resources are commented in the code directly. Here are a list of general resources used throughout the entire project:

  1. 🌐 w3schools.com
  2. Svelte Docs
  3. 🧪 Vitest
  4. 🔐 Google OAuth Client Docs
  5. 🎨 Figma
  6. Prettier Formatting
  7. 🐳 Docker

📄 License

Copyright 2025 "The Jurnlers LLC." 🏢

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ⚖️

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors