MindBoard

A calm place for your ideas & thoughts

MindBoard is a modern note-taking and organization platform that helps you capture ideas, organize them into boards, prioritize with colors, and find anything instantly. Built for clarity, not clutter.

Features

Authentication

• Google OAuth Login - One-click sign-in with Google (no passwords needed)
• Secure session management
• Email verification support

Boards

• Create unlimited boards to organize your notes
• Delete boards (moved to trash, can be restored)
• Search boards by name
• View board statistics (note count)

Notes

• Create, edit, and delete notes
• Priority System - Color-coded priorities (Low, Medium, High)
• Due Dates - Set deadlines with date validation (no past dates)
• Move Notes - Transfer notes between boards easily
• Rich Content - Title and content fields
• Search - Real-time search within boards (debounced)

Trash & Restore

• Soft Delete - Notes and boards are never permanently lost
• Trash Management - Dedicated trash page with tabs for notes and boards
• Bulk Restore - Restore entire boards with all their notes
• Auto-cleanup - Items kept for 30 days before permanent deletion

User Experience

• Modern UI - Beautiful, responsive design with dark mode support
• SPA-like Navigation - Fast, seamless navigation with Inertia.js
• Interactive Elements - Smooth animations and transitions
• Accessibility - ARIA labels, keyboard navigation, pointer cursors
• Breadcrumbs - Clear navigation hierarchy on all pages

Tech Stack

Backend

• Laravel 12 - Modern PHP framework
• Laravel Fortify - Authentication scaffolding
• Laravel Socialite - Google OAuth integration
• MySQL/MariaDB - Database
• Eloquent ORM - Database abstraction

Frontend

• React 19 - UI library
• TypeScript - Type safety
• Inertia.js - SPA-like experience without API
• Tailwind CSS 4 - Utility-first styling
• Shadcn UI - Beautiful component library
• Framer Motion - Smooth animations
• Lucide React - Icon library

Development Tools

• Vite - Fast build tool
• ESLint - Code linting
• TypeScript - Type checking

Prerequisites

• PHP 8.2 or higher
• Composer
• Node.js 18+ and npm
• MySQL/MariaDB
• Google Cloud Console account (for OAuth)

Installation

1. Clone the Repository

git clone https://github.com/lokeshrangani/mindboard.git
cd mindboard

2. Install PHP Dependencies

composer install

3. Install JavaScript Dependencies

npm install

4. Environment Configuration

Copy the example environment file:

cp .env.example .env

Generate application key:

php artisan key:generate

5. Database Setup

Update your .env file with database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mindboard
DB_USERNAME=root
DB_PASSWORD=your_password

Run migrations:

php artisan migrate

6. Google OAuth Configuration

1. Go to Google Cloud Console
2. Create a new OAuth 2.0 Client ID
3. Add authorized redirect URIs:
   • http://localhost:8000/auth/google/callback (for local development)
   • https://yourdomain.com/auth/google/callback (for production)
4. Copy your Client ID and Client Secret

Update your .env file:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

7. Mail Configuration (Optional)

For email functionality, configure your mail settings in .env:

MAIL_MAILER=smtp
MAIL_SCHEME=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your-email@gmail.com
MAIL_PASSWORD=your-app-password
MAIL_FROM_ADDRESS="noreply@mindboard.app"
MAIL_FROM_NAME="${APP_NAME}"

8. Run the Application

Start the development server:

# Terminal 1: Laravel server
php artisan serve

# Terminal 2: Vite dev server
npm run dev

Or use the combined command:

composer run dev

Visit http://localhost:8000 in your browser.

Project Structure

mindboard/
├── app/
│   ├── Actions/              # Business logic actions
│   │   ├── Board/
│   │   │   ├── CreateBoard.php
│   │   │   ├── DeleteBoard.php
│   │   │   └── RestoreBoard.php
│   │   └── Note/
│   │       ├── CreateNote.php
│   │       ├── UpdateNote.php
│   │       ├── DeleteNote.php
│   │       ├── MoveNote.php
│   │       └── RestoreNote.php
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Auth/
│   │   │   │   └── GoogleController.php
│   │   │   ├── BoardController.php
│   │   │   ├── NoteController.php
│   │   │   └── TrashController.php
│   │   └── Policies/
│   │       ├── BoardPolicy.php
│   │       └── NotePolicy.php
│   ├── Models/
│   │   ├── Board.php
│   │   ├── Note.php
│   │   └── User.php
│   └── Providers/
│       └── FortifyServiceProvider.php
├── database/
│   └── migrations/
│       ├── 0001_01_01_000000_create_users_table.php
│       ├── 2026_01_26_063645_add_google_id_to_users_table.php
│       └── ...
├── resources/
│   └── js/
│       ├── components/        # Reusable React components
│       │   ├── ui/            # Shadcn UI components
│       │   └── ...
│       ├── layouts/           # Page layouts
│       │   ├── app-layout.tsx
│       │   └── auth-layout.tsx
│       ├── pages/             # Inertia pages
│       │   ├── auth/
│       │   │   ├── login.tsx
│       │   │   └── register.tsx
│       │   ├── boards/
│       │   │   └── show.tsx
│       │   ├── notes/
│       │   │   ├── create.tsx
│       │   │   ├── edit.tsx
│       │   │   └── show.tsx
│       │   ├── trash/
│       │   │   └── index.tsx
│       │   ├── dashboard.tsx
│       │   └── welcome.tsx
│       └── routes/            # Type-safe route definitions
├── routes/
│   └── web.php               # Application routes
├── config/
│   ├── fortify.php           # Fortify configuration
│   └── services.php          # Third-party services (Google OAuth)
└── .env                      # Environment configuration

Key Features Explained

Google OAuth Authentication

The application uses Google OAuth for authentication, eliminating the need for password management:

• Users sign in with their Google account
• New users are automatically created on first login
• Email is automatically verified

Soft Deletes & Trash

Both notes and boards use soft deletes:

• Deleted items are moved to trash (not permanently deleted)
• Trash page shows both notes and boards in separate tabs
• Restoring a board automatically restores all its notes
• Items are kept for 30 days before permanent deletion

Priority System

Notes can be assigned priorities:

• Low (Green) - Less urgent items
• Medium (Yellow) - Normal priority
• High (Red) - Urgent items

Priorities are displayed as colored dots and labels on note cards.

Search Functionality

• Real-time search with 300ms debounce
• Search query persists in URL
• Searches both note titles and content
• Works for both boards and notes

Development

Code Formatting

npm run format          # Format code with Prettier
npm run format:check    # Check formatting

Linting

npm run lint           # Run ESLint and fix issues

Type Checking

npm run types          # Run TypeScript type checking

Building for Production

npm run build          # Build assets for production

License

This project is open-sourced software licensed under the MIT license.

Author

Lokesh Rangani

• GitHub: @lokeshrangani

Acknowledgments

• Built with Laravel
• UI components from Shadcn UI
• Icons from Lucide
• OAuth integration via Laravel Socialite

---

Made with ❤️ for better organization and clarity