WebNote

A real-time collaborative note-taking application built with React and Firebase, enabling simultaneous multi-user document editing and synchronization.

Known Issues

• Bi-directional linking - Bi-directional linking in linked list causes circular references ending in endless loops. This affects real-time collaboration features. See #33 for details and current status.

For a complete list of known issues, visit the issue tracker.

Features

• Authentication - Email/password and Google OAuth integration
• Real-time Collaboration - Simultaneous multi-user editing with live synchronization
• Rich Text Editing - Full-featured editor with formatting capabilities
• Note Management - Personal and shared note organization
• Responsive Design - Mobile-first UI with theme support
• Auto-save - Automatic change detection and persistence

Tech Stack

Frontend

• React 18
• Tailwind CSS
• React Router
• React Quill
• React Toastify

Backend & Services

• Firebase Authentication
• Cloud Firestore
• Firebase Hosting

Development & CI/CD

• GitHub Actions
• Jest

Installation

Prerequisites

• Node.js >= 16.x
• npm or yarn
• Firebase account

Setup

1. Clone the repository

git clone https://github.com/yourusername/WebNote.git
cd WebNote

2. Install dependencies

cd client
npm install

3. Configure environment variables

Create client/.env:

REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_FIREBASE_MEASUREMENT_ID=your_measurement_id

4. Start development server

npm start

Application runs at http://localhost:3000

5. Build for production

npm run build

Firebase Configuration

1. Create a new project in Firebase Console
2. Enable Authentication providers (Email/Password, Google)
3. Create a Firestore database
4. Configure security rules for data access control
5. Retrieve web app configuration from Project Settings
6. Add configuration values to .env file

Deployment

Automatic deployment via GitHub Actions on push to main branch.

Required GitHub Secrets

• REACT_APP_FIREBASE_* - Firebase configuration values
• FIREBASE_SERVICE_ACCOUNT_* - Service account credentials

Pull requests trigger preview deployments automatically.

Testing

npm test

Security

• Environment variables for sensitive configuration
• Firebase Security Rules for data access control
• Authentication required for all features
• HTTPS-only communication

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/feature-name)
3. Commit changes (git commit -m 'Add feature description')
4. Push to branch (git push origin feature/feature-name)
5. Submit a Pull Request

License

Licensed under the GNU General Public License v3.0. See LICENSE for details.