Paper Notes 📝

A modern, full-stack note-taking application built with Next.js that helps you organize your thoughts, ideas, and important information in a clean, intuitive interface.

✨ Features

• Secure Authentication - Sign in with Google, GitHub, or email using NextAuth
• Rich Note Editor - Create and edit notes with markdown support and syntax highlighting
• Smart Organization - Tag system, folders, and search functionality to keep notes organized
• Dark/Light Mode - Toggle between themes for comfortable writing
• Responsive Design - Works seamlessly across desktop, tablet, and mobile devices

🛠️ Tech Stack

• Framework: Next.js 14 - Full-stack React framework with App Router
• Database: MONGODB with MONGOOSE for type-safe database access
• Authentication: NextAuth.js v5 - Complete authentication solution
• State Management: Zustand - Lightweight state management
• Styling: Tailwind CSS - Utility-first CSS framework
• UI Components: shadcn/ui - Beautiful, accessible components
• Rich Text Editor: Tiptap - Headless editor framework
• Deployment: Vercel - Seamless deployment and hosting

🚀 Getting Started

Prerequisites

Make sure you have the following installed on your machine:

• Node.js (version 18 or higher)
• PostgreSQL (version 13 or higher)
• npm or yarn or pnpm

Installation

1. Clone the repository

   git clone https://github.com/Mayur-00/paper-notes
   cd paper-notes

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   Create a .env.local file in the root directory and add your environment variables:

   # NextAuth ConfigurationNEXTAUTH_URL=http://localhost:3000NEXTAUTH_SECRET=your-super-secret-nextauth-key-here# DatabaseDATABASE_URL="postgresql://username:password@localhost:5432/paper_notes?schema=public"# Google OAuth (optional)GOOGLE_CLIENT_ID=your-google-client-idGOOGLE_CLIENT_SECRET=your-google-client-secret# GitHub OAuth (optional)GITHUB_CLIENT_ID=your-github-client-idGITHUB_CLIENT_SECRET=your-github-client-secret# Email Configuration (for magic links)EMAIL_SERVER_HOST=smtp.gmail.comEMAIL_SERVER_PORT=587EMAIL_SERVER_USER=your-email@gmail.comEMAIL_SERVER_PASSWORD=your-app-passwordEMAIL_FROM=noreply@papernotes.com

4. Set up the database

   # Generate Prisma client
   npx prisma generate
   # Run database migrations
   npx prisma db push
   # (Optional) Seed the database with sample data
   npx prisma db seed

5. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

6. Open your browser

   Navigate to http://localhost:3000 to see your application running.

📱 Usage

Getting Started

1. Sign Up/Sign In - Create an account using Google, GitHub, or email
2. Create Your First Note - Click the "New Note" button or use Ctrl+N shortcut
3. Write with Markdown - Use markdown syntax for rich formatting
4. Organize with Tags - Add tags like #work, #personal, #ideas to categorize notes
5. Use Folders - Create folders to group related notes together

Keyboard Shortcuts

• Ctrl/Cmd + N - Create new note
• Ctrl/Cmd + S - Save note (auto-saves every 3 seconds)
• Ctrl/Cmd + F - Search notes
• Ctrl/Cmd + D - Toggle dark mode
• Ctrl/Cmd + E - Export current note

Advanced Features

• Search: Use the search bar to find notes by title, content, or tags
• Export: Export individual notes or entire folders as PDF or Markdown
• Collaboration: Share notes with read-only or edit permissions (coming soon)

🏗️ Project Structure

paper-notes/
├── app/ # Next.js 14 App Router
│ ├── api/ # API routes
│ ├── auth/ # Authentication pages
│ ├── dashboard/ # Main application pages
│ └── globals.css # Global styles
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui components
│ ├── editor/ # Rich text editor components
│ └── layout/ # Layout components
├── lib/ # Utility functions and configurations
│ ├── auth.ts # NextAuth configuration
│ ├── db.ts # Database connection
│ └── utils.ts # Helper functions
├── prisma/ # Database schema and migrations
│ ├── schema.prisma # Database schema
│ └── seed.ts # Database seeding
├── store/ # Zustand store configurations
│ ├── notes.ts # Notes state management
│ └── user.ts # User state management
├── types/ # TypeScript type definitions
├── public/ # Static assets
└── README.md

🎯 Roadmap

• Real-time collaboration on notes
• Mobile app (React Native)
• Integration with cloud storage (Google Drive, Dropbox)
• Advanced search with filters
• Note templates
• Team workspaces
• API for third-party integrations

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Follow the existing code style and conventions
4. Write tests for new features
5. Commit your changes (git commit -m 'Add some AmazingFeature')
6. Push to the branch (git push origin feature/AmazingFeature)
7. Open a Pull Request

Code Style

• Use TypeScript for all new code
• Follow ESLint and Prettier configurations
• Write meaningful commit messages
• Add JSDoc comments for complex functions

📊 Performance

• Lighthouse Score: 71+ on all metrics
• First Contentful Paint: < 1.2s
• Time to Interactive: < 0.9s
• Bundle Size: < 250KB (gzipped)

🔒 Security

• All authentication handled by NextAuth.js
• CSRF protection enabled
• XSS protection with Content Security Policy

👨‍💻 Author

Mayur Kendre

• GitHub: @mayur-00
• LinkedIn: mayur kendre
• Email: kendremayur31@gmail.com

🙏 Acknowledgments

• Next.js for the incredible framework
• Vercel for seamless deployment
• shadcn/ui for the beautiful component library

• mongoose for type-safe database interactions
• The open-source community for inspiration and contributions

📈 Stats

---

⭐ If you found this project helpful, please give it a star on GitHub!

🐛 Found a bug? Open an issue

💡 Have a feature request? Start a discussion