📚 Devcuments

Hey there! 👋 I built this documentation platform because I was tired of juggling between different tools for writing technical docs. Devcuments is my take on a clean, simple, and powerful way to create and manage documentation.

Think of it as Notion for developers, but focused purely on technical writing. No distractions, just you and your docs.

✨ What's Cool About It

Here's what makes Devcuments special:

• 📝 Full Markdown Support - Write docs the way you want with all the standard Markdown features
• 🎨 Syntax Highlighting - Your code blocks look beautiful with proper language colors
• 👁️ Preview Mode - Toggle between writing and seeing how it looks instantly
• 💾 Smart Save Detection - The save button only appears when you actually make changes
• 🔐 Secure & Private - Your docs are yours, with proper authentication
• 📱 Responsive Design - Works great on desktop, tablet, or phone
• 🎯 Clean Interface - Inspired by Notion but built for developers

🛠️ Built With

Here's the tech stack I used to build this:

• React 19 - For the frontend magic
• TailwindCSS - For styling (because writing CSS is boring)
• Supabase - For authentication and database (they make it so easy!)
• Vite - For fast development and building
• React Markdown - For rendering beautiful Markdown

📋 What You'll Need

Before you start, make sure you have:

• Node.js (v18 or higher) - The JavaScript runtime
• npm or yarn - Package manager (I prefer npm)
• A Supabase account - For the backend (it's free!)

🚀 Getting Started

1. Get the Code

First, clone this repo and install the dependencies:

git clone <your-repo-url>
cd devcuments
npm install

2. Set Up Supabase

You'll need a Supabase project for authentication and data storage. Here's how:

A. Create Your Project

1. Head over to supabase.com and sign up/login
2. Create a new project (the free tier is perfect for this)
3. Wait a minute for it to be ready

B. Get Your Keys

1. In your Supabase dashboard, go to Settings → API
2. Copy your Project URL and anon/public key (you'll need these)

C. Set Up Environment Variables

1. Create a .env file in the root directory:

cp env.example .env

2. Add your Supabase credentials to the .env file:

VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

3. Configure Authentication

A. Enable Email Auth

1. In your Supabase dashboard, go to Authentication → Providers
2. Make sure Email provider is enabled (it should be by default)
3. You can customize email templates if you want, but the defaults work fine

B. Set Up URLs

1. Go to Authentication → URL Configuration
2. Set Site URL to http://localhost:5173 (for development)
3. Add these redirect URLs:
   • http://localhost:5173/
   • http://localhost:5173/create-document
   • http://localhost:5173/document/*

4. Set Up the Database

You'll need to create the database tables. Copy and paste this SQL into your Supabase SQL editor:

-- Create documents table for storing markdown content
CREATE TABLE documents (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  title TEXT NOT NULL,
  content TEXT DEFAULT '',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security (this is important for security!)
ALTER TABLE documents ENABLE ROW LEVEL SECURITY;

-- Create policies so users can only access their own documents
CREATE POLICY "Users can view own documents" ON documents
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own documents" ON documents
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own documents" ON documents
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Users can delete own documents" ON documents
  FOR DELETE USING (auth.uid() = user_id);

-- Add some indexes for better performance
CREATE INDEX idx_documents_user_id ON documents(user_id);
CREATE INDEX idx_documents_created_at ON documents(created_at);

-- Optional: Auto-update the updated_at timestamp
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_documents_updated_at 
    BEFORE UPDATE ON documents 
    FOR EACH ROW 
    EXECUTE FUNCTION update_updated_at_column();

5. Start Coding!

Now you're ready to run the app:

npm run dev

Your app should now be running at http://localhost:5173 🎉

Open your browser and start creating some docs!

🔐 How Authentication Works

The app uses Supabase for authentication, which is super simple:

1. Sign Up - Users create accounts with email/password
2. Sign In - Existing users log in with their credentials
3. Protected Routes - Only logged-in users can access the docs
4. Session Management - Supabase handles all the session stuff automatically

🔒 Security Features

I've set up Row Level Security (RLS) to keep your data safe:

• Documents - Users can only see and edit their own documents
• Authentication - Supabase handles all the security stuff
• Data Isolation - Each user's docs are completely separate from others

📁 Project Structure

Here's how the code is organized:

src/
├── components/           # Reusable UI components
│   ├── Auth.jsx         # Login/signup form
│   ├── Sidebar.jsx       # Navigation sidebar
│   ├── MarkdownRenderer.jsx # Renders markdown content
│   └── ProtectedRoute.jsx # Route protection
├── contexts/             # React context for state management
│   ├── AuthContext.jsx   # User authentication state
│   └── DocumentsContext.jsx # Document data management
├── pages/                # Main page components
│   ├── Documentation.jsx # Homepage with instructions
│   ├── CreateDocument.jsx # Create new documents
│   └── DocumentViewer.jsx # View and edit documents
├── services/             # External service integrations
│   └── supabase-client.js # Supabase configuration
└── App.jsx               # Main app with routing

🚀 What's Next?

Here are some ideas for future improvements:

• Search functionality - Find documents quickly
• Document organization - Folders and tags for better organization
• Export options - PDF, HTML, or plain text export
• Collaborative editing - Work on docs with your team
• Templates - Pre-made document templates
• Version history - Track changes over time

Feel free to contribute or suggest new features!

🐛 Common Issues

Ran into problems? Here are some quick fixes:

Environment Variables Not Working?

• Make sure your .env file is in the root directory
• Restart your dev server after adding environment variables

Authentication Not Working?

• Double-check your Supabase project URL and keys
• Make sure your redirect URLs are set correctly in Supabase
• Check the browser console for error messages

CORS Errors?

• Add your domain to Supabase allowed origins
• Verify your redirect URLs are configured properly

💬 Need Help?

If you run into any issues:

• Check the Supabase documentation
• Create an issue in this repository
• Feel free to reach out if you have questions!

📄 License

This project is open source and available under the MIT License.

---

Happy documenting! 📚✨