NoteOK — A Smart Notes App

NoteOK is a modern note-taking application designed to help users write, organize, and enrich their ideas in a simple and efficient interface. Users can create notes, add image URLs, customize the text style, and use AI to generate a quick summary and tags for each note.

We built NoteOK as a full-stack project using React, Vite, Tailwind CSS, Express, PostgreSQL, and Gemini AI.

NoteOK — Application de prise de notes intelligente

NoteOK est une application moderne de prise de notes pensée pour aider les utilisateurs à rédiger, organiser et enrichir leurs idées dans une interface simple et efficace. Les utilisateurs peuvent créer des notes, ajouter des URL d’images, personnaliser le style du texte et utiliser l’IA pour générer un résumé rapide ainsi que des tags pour chaque note.

Technologies

• React
• Vite
• Tailwind CSS
• Express
• PostgreSQL
• Gemini AI
• Supabase/Postgres
• JavaScript

Features

NoteOK includes the key features you would expect from a clean and useful notes app:

• Create, read, update, and delete notes
• Add image URLs to notes
• Customize note appearance with multiple fonts, sizes, colors, and text styles
• Toggle bold, italic, and underline formatting
• Generate AI summaries and tags for note content
• Store notes in PostgreSQL/Supabase
• Use a lightweight, modern interface for quick note-taking

The Process

Started by building a simple yet useful note-taking app where users could create and store notes easily. The first step was the frontend interface, followed by the backend API and database storage.

Then added styling customization so each note could feel more personal and expressive. After that, I integrated Gemini AI to generate summaries and tags automatically from note content.

Because the app needed to be reliable and easy to use, I also focused on making the environment setup clear and maintaining a clean separation between the frontend, backend, and database layer.

What I Learned

This project helped me improve in several areas:

• Building a full-stack application with React and Express
• Working with PostgreSQL/Supabase as a data layer
• Structuring a modern frontend with Vite and Tailwind CSS
• Connecting AI features through an external API
• Handling CRUD operations and update flows in a real application
• Managing environment configuration across frontend and backend
• Deploying and maintaining a project on GitHub

What Could Be Improved

• Add note categories or folders
• Add search and filter features
• Add note sharing or export options
• Add user authentication and personal accounts
• Add image upload support with a cloud storage solution
• Add notifications or reminders for notes

Project Structure

• frontend/ — React + Vite application
• backend/ — Express API and PostgreSQL integration
• README.md — project documentation

Setup

1. Backend

cd backend
npm install
cp .env.example .env

Update .env with your real database and Gemini values.

Then run:

npm run dev

2. Frontend

cd frontend
npm install
npm run dev

3. Database

Run this SQL in PostgreSQL or Supabase:

CREATE TABLE IF NOT EXISTS notes (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  content TEXT NOT NULL,
  image_url TEXT DEFAULT '',
  summary TEXT DEFAULT '',
  tags VARCHAR(255) DEFAULT '',
  font_family VARCHAR(50) DEFAULT 'font-sans',
  font_color VARCHAR(20) DEFAULT '#111827',
  font_size VARCHAR(10) DEFAULT '16px',
  is_bold BOOLEAN DEFAULT false,
  is_italic BOOLEAN DEFAULT false,
  is_underline BOOLEAN DEFAULT false,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Notes

• The app currently uses image URLs instead of direct file uploads.
• AI summary generation requires a valid GEMINI_API_KEY.
• The backend expects a working DATABASE_URL for PostgreSQL/Supabase.

Demo

NoteOKDemo.mov