🚀 Online Note AI - Horizon Suite

Online Note AI - Horizon Suite is a modern, AI-powered note-taking web application designed for productivity, collaboration, and security. Take notes, organize your thoughts, and leverage AI—all in one place.

🌐 Website: onlinenote.ai

✨ Features

AI-Powered Notes - Generate, summarize, and organize notes with AI assistance
Rich Text Editor - Full Markdown support with real-time collaboration
Cloud Sync - Access your notes from anywhere, on any device
Beautiful UI - Modern, responsive design with dark/light mode
Real-time Collaboration - Work together with your team in real-time
JWT Authentication - Secure user authentication
Supabase Backend - PostgreSQL database with real-time subscriptions
Cross-Platform - Responsive design that works on all devices

🚀 Getting Started

Prerequisites

Node.js 16.8 or later
npm or yarn
Supabase account (for the backend)

Installation

Clone the repository

git clone https://github.com/hlsitechio/onai.git
cd onai

Install dependencies

Using npm:
```
npm install
```
Or using yarn:
```
yarn
```

Set up environment variables

Create a .env file in the root directory and add the following variables:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_SUPABASE_JWT_SECRET=your_jwt_secret

Start the development server
```
npm run dev
# or
yarn dev
```
Open http://localhost:5173 in your browser to see the application.

🛠️ Technologies

⚡️ Vite - Next Generation Frontend Tooling
⚛️ React - A JavaScript library for building user interfaces
🟦 TypeScript - Typed JavaScript
🎨 shadcn/ui - Beautifully designed components
💨 Tailwind CSS - A utility-first CSS framework
🟩 Supabase - Open source Firebase alternative
📝 Tiptap - Headless rich text editor
🔄 React Query - Data synchronization

🌍 Deployment

Production Build

# Build the application
npm run build

# Preview the production build
npm run preview

Deployment Options

Vercel - Recommended for production
Netlify - Great for static hosting
Docker - For containerized deployments

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines to get started.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Next.js - The React Framework for Production
Tailwind CSS - A utility-first CSS framework
Supabase - The open source Firebase alternative
shadcn/ui - Beautifully designed components
Tiptap - The headless editor framework for web artisans

📧 Contact

For any questions or feedback, please open an issue or contact us at support@onlinenote.ai.

⭐ Star us on GitHub if you find this project useful!

💖 Support & Sponsorship

Help us keep Online Note AI free and improve it for everyone!
Become a sponsor and get your logo featured here, early access to new features, and a say in the roadmap.
👉 Sponsor us on GitHub

🤝 Contributing

We welcome contributions! Please check issues, open pull requests, or discuss new features.

DEV SEEKING ! 👨‍💻 👩‍💻 📢

🚀 Looking for a co-worker! I’m actively seeking a collaborator to help build and improve this project.

If you love Online Note AI, please ⭐ star the repo and consider sponsoring! Your support helps us grow!

🚀 Why Online Note AI?

🗒️AI-Powered Notes: Generate, summarize, and organize notes with AI assistance.
☁️ Cloud Sync: Access your notes from anywhere, on any device.
📱Beautiful & Responsive UI: Built with modern UI libraries for a smooth experience.
🔓Open Source: Community-driven development and transparency.

🚀 Getting Started

🛠️ Technologies

⚡️ Vite
⚛️ React
🟦 TypeScript
🎨 shadcn-ui
💨 Tailwind CSS
🟩 Supabase (for database)

🌍 Deployment

2. Local Development

create a folder
Open powershell directly into your new folder with the name onai
# Clone the repository git clone https://github.com/hlsitechio/onai.git 
Be careful when cloning you need to cd into the right folder after 

# Start the development server
npm install 
npm run dev

Prerequisite: Node.js & npm (install guide)

3. Directly on GitHub

Navigate to any file and click the ✏️ "Edit" button to make changes in the browser.

4. With GitHub Codespaces

On the repo main page, click Code → Codespaces → New codespace for a full-featured, cloud-based dev environment.

📣 Contact

Project lead: @hlsitechio
Email: info@onlinenote.ai
Questions? Open an issue

📱 Quick Access

Scan the QR code to visit the project instantly:

💖 Support & Sponsorship

Help us keep Online Note AI free and improve it for everyone!
Become a sponsor and get your logo featured here, early access to new features, and a say in the roadmap.
👉 Sponsor us on GitHub

🤝 Contributing

We welcome contributions! Please check issues, open pull requests, or discuss new features.

DEV SEEKING ! 👨‍💻 👩‍💻 📢

🚀 Looking for a co-worker! I’m actively seeking a collaborator to help build and improve this project.

If you love Online Note AI, please ⭐ star the repo and consider sponsoring! Your support helps us grow! =======

Online Note AI - Full-Stack AI-Powered Note Taking App

A comprehensive note-taking application with AI assistance, built with React, Chakra UI, and modern web technologies.

🚀 Features

AI-Powered Assistant: Get intelligent suggestions and help with your notes
Rich Text Editor: Create and format notes with ease
Smart Organization: Categorize and tag your notes automatically
Real-time Search: Find your notes instantly with powerful search
Beautiful UI: Modern, responsive design with Chakra UI components
Authentication: Secure user authentication and session management
Responsive Design: Works perfectly on desktop and mobile devices

🛠️ Tech Stack

Frontend

React 18 with TypeScript
Chakra UI for component library and theming
React Router for navigation
TanStack Query for state management and data fetching
Lucide React for beautiful icons
Tailwind CSS for additional styling
Framer Motion for smooth animations

Backend (Ready for Integration)

Node.js with Express
JWT Authentication
SQLite/PostgreSQL database support
RESTful API architecture

📦 Installation & Setup

Prerequisites

Node.js (v18 or higher)
npm or yarn

Quick Start

Clone the repository

git clone <your-repo-url> online-note-ai
cd online-note-ai

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:8080

Demo Credentials

Email: demo@example.com
Password: password

🏗️ Project Structure

src/
├── components/
│   ├── Layout/
│   │   ├── Layout.tsx          # Main layout wrapper
│   │   ├── Sidebar.tsx         # Navigation sidebar
│   │   └── Header.tsx          # Top header with search
├── contexts/
│   └── AuthContext.tsx         # Authentication context
├── pages/
│   ├── Dashboard.tsx           # Main dashboard
│   ├── Chat.tsx               # AI chat interface
│   ├── Editor.tsx             # Note editor
│   ├── Notes.tsx              # Notes browser
│   ├── Settings.tsx           # User settings
│   └── Auth/
│       ├── Login.tsx          # Login page
│       └── Register.tsx       # Registration page
├── theme/
│   └── theme.ts               # Chakra UI theme configuration
└── index.css                  # Global styles and animations

🎨 Design System

Colors

Primary (Brand): Blue spectrum (#6366f1)
Secondary: Purple spectrum (#d946ef)
Gray Scale: Slate colors for text and backgrounds

Typography

Font Family: Inter (Google Fonts)
Weights: 300, 400, 500, 600, 700

Components

Custom Chakra UI theme with consistent spacing and border radius
Smooth hover animations and transitions
Beautiful gradient backgrounds

🔧 Customization

Adding New Pages

Create component in src/pages/
Add route to src/pages/Index.tsx
Add navigation item to src/components/Layout/Sidebar.tsx

Theming

Modify colors in src/theme/theme.ts
Update CSS variables in src/index.css
Customize component styles in theme configuration

AI Integration

Replace the mock AI responses in src/pages/Chat.tsx with your preferred AI service:

OpenAI GPT
Google Gemini
Anthropic Claude
Local AI models

🚀 Deployment

Frontend (Vercel - Recommended)

npm run build
# Deploy to Vercel

Full-Stack Deployment

Backend: Deploy to Railway, Heroku, or DigitalOcean
Database: PostgreSQL on Railway or Supabase
Frontend: Vercel or Netlify

🔐 Environment Variables

Create a .env.local file for local development:

VITE_API_URL=http://localhost:5000/api
VITE_AI_API_KEY=your_ai_api_key

📝 Backend Integration

To connect with a backend API:

Update API calls in src/contexts/AuthContext.tsx
Configure endpoints in your environment variables
Add API utilities in src/lib/api.ts

Example API integration:

const apiClient = axios.create({
  baseURL: process.env.VITE_API_URL,
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
  }
});

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🎯 Roadmap

💡 Tips for Development

Use the demo credentials for testing
Check browser console for helpful logs
Customize the AI responses in Chat.tsx
Add your own color schemes in theme.ts
Use Chakra UI components for consistency

Built with ❤️ using React, Chakra UI, and modern web technologies.

noteai-suite/main

Name		Name	Last commit message	Last commit date
Latest commit History 669 Commits
oneai		oneai
public		public
src		src
supabase		supabase
.gitignore		.gitignore
README.md		README.md
SENTRY_SETUP.md		SENTRY_SETUP.md
components.json		components.json
eslint.config.js		eslint.config.js
frame.png		frame.png
index.html		index.html
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

hlsitechio/onai

Folders and files

Latest commit

History

Repository files navigation

🚀 Online Note AI - Horizon Suite

✨ Features

🚀 Getting Started

Prerequisites

Installation

🛠️ Technologies

🌍 Deployment

Production Build

Deployment Options

🤝 Contributing

📄 License

🙏 Acknowledgments

📧 Contact

💖 Support & Sponsorship

🤝 Contributing

🚀 Why Online Note AI?

🚀 Getting Started

🛠️ Technologies

🌍 Deployment

2. Local Development

3. Directly on GitHub

4. With GitHub Codespaces

📣 Contact

📱 Quick Access

💖 Support & Sponsorship

🤝 Contributing

Online Note AI - Full-Stack AI-Powered Note Taking App

🚀 Features

🛠️ Tech Stack

Frontend

Backend (Ready for Integration)

📦 Installation & Setup

Prerequisites

Quick Start

Demo Credentials

🏗️ Project Structure

🎨 Design System

Colors

Typography

Components

🔧 Customization

Adding New Pages

Theming

AI Integration

🚀 Deployment

Frontend (Vercel - Recommended)

Full-Stack Deployment

🔐 Environment Variables

📝 Backend Integration

🤝 Contributing

📄 License

🎯 Roadmap

💡 Tips for Development

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages