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.
- 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
- 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
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
-
Clone the repository
git clone https://github.com/Mayur-00/paper-notes cd paper-notes -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
Create a
.env.localfile in the root directory and add your environment variables:# NextAuth Configuration NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your-super-secret-nextauth-key-here # Database DATABASE_URL="postgresql://username:password@localhost:5432/paper_notes?schema=public" # Google OAuth (optional) GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret # GitHub OAuth (optional) GITHUB_CLIENT_ID=your-github-client-id GITHUB_CLIENT_SECRET=your-github-client-secret # Email Configuration (for magic links) EMAIL_SERVER_HOST=smtp.gmail.com EMAIL_SERVER_PORT=587 EMAIL_SERVER_USER=your-email@gmail.com EMAIL_SERVER_PASSWORD=your-app-password EMAIL_FROM=noreply@papernotes.com
-
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
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to see your application running.
- Sign Up/Sign In - Create an account using Google, GitHub, or email
- Create Your First Note - Click the "New Note" button or use Ctrl+N shortcut
- Write with Markdown - Use markdown syntax for rich formatting
- Organize with Tags - Add tags like #work, #personal, #ideas to categorize notes
- Use Folders - Create folders to group related notes together
Ctrl/Cmd + N- Create new noteCtrl/Cmd + S- Save note (auto-saves every 3 seconds)Ctrl/Cmd + F- Search notesCtrl/Cmd + D- Toggle dark modeCtrl/Cmd + E- Export current note
- 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)
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
- 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
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.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Follow the existing code style and conventions
- Write tests for new features
- Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Use TypeScript for all new code
- Follow ESLint and Prettier configurations
- Write meaningful commit messages
- Add JSDoc comments for complex functions
- Lighthouse Score: 71+ on all metrics
- First Contentful Paint: < 1.2s
- Time to Interactive: < 0.9s
- Bundle Size: < 250KB (gzipped)
- All authentication handled by NextAuth.js
- CSRF protection enabled
- XSS protection with Content Security Policy
Mayur Kendre
- GitHub: @mayur-00
- LinkedIn: mayur kendre
- Email: kendremayur31@gmail.com
- 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
⭐ 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