https://github.com/lostovayne/saas-notion-clone
Complete clone of Notion, using Next version 14, Clerk as authentication system, Typescript and Tailwind for styles together with Shadcn
https://github.com/lostovayne/saas-notion-clone
clerkauth convex nextjs14 saas-application tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Complete clone of Notion, using Next version 14, Clerk as authentication system, Typescript and Tailwind for styles together with Shadcn
- Host: GitHub
- URL: https://github.com/lostovayne/saas-notion-clone
- Owner: Lostovayne
- Created: 2023-11-15T22:55:48.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-22T20:27:10.000Z (10 months ago)
- Last Synced: 2025-04-02T11:22:37.000Z (7 months ago)
- Topics: clerkauth, convex, nextjs14, saas-application, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://www.murkiva.cloud/
- Size: 1.5 MB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notion Clone
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](LICENSE)
A powerful and modern Notion clone built with cutting-edge technologies.
[Demo](your-demo-link) · [Report Bug](your-issues-link) · [Request Feature](your-issues-link)
## Overview
This project is a feature-rich Notion clone that demonstrates the implementation of modern web technologies. Built on Next.js 14, it seamlessly integrates real-time collaboration, secure authentication, and a responsive user interface. The application leverages Clerk for authentication and Convex as a robust real-time backend, while utilizing Shadcn components and Tailwind CSS for an elegant and responsive design.
## Key Features
### Core Functionality
- Full-featured Notion-style editor
- Real-time database synchronization
- Infinite nested documents
- Secure authentication system
- Light and dark mode support
- **Integration of new functionalities** - New features have been added to enhance the user experience.
### Document Management
- File upload, replacement, and deletion
- Soft delete with trash bin functionality
- Document recovery system
- Real-time document icon updates
- Cover images for documents
- **Document management improvements** - New options for file retrieval and management have been implemented.
### User Interface
- Fully collapsible sidebar
- Responsive mobile design
- Web publishing capabilities
- Custom landing page
- Modern and clean UI
- **User interface upgrade** - Adjustments have been made to improve usability and aesthetics.
## Technology Stack
### Frontend
- **Next.js 14** - React framework for production
- **TypeScript** - Static type checking
- **Tailwind CSS** - Utility-first CSS framework
- **Shadcn** - Customizable UI components
- **Blocknote** - A powerful and flexible framework for building modern web applications.
### Backend & Services
- **Convex** - Real-time backend infrastructure
- **Clerk** - Authentication and user management
- **Edge Runtime** - Enhanced performance and scalability
## Getting Started
### Prerequisites
- Node.js (version 18.x.x or higher)
- npm or yarn package manager
- Git
### Installation
1. Clone the repository
```bash
git clone https://github.com/yourusername/notion-clone.git
cd notion-clone
```
2. Install dependencies
```bash
npm install
# or
yarn install
```
3. Environment Setup
- Copy `.env.example` to `.env.local`
- Configure the following environment variables:
```env
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=
NEXT_PUBLIC_EDGE_STORE_ACCESS_KEY=
NEXT_PUBLIC_EDGE_STORE_SECRET_KEY=
```
4. Start the development servers
```bash
# Start Convex backend
npx convex dev
# In a new terminal, start Next.js
npm run dev
# or
yarn dev
```
5. Deploy Proyect to Vercel
```bash
npm run build && npx convex deploy
# Copied and Paste env variables
```
## Project Structure
```
notion-clone/
├── app/ # Next.js app directory
│ ├─(main)/ # Main application routes
│ └── (marketing)/ # Marketing pages
├── components/ # Reusable UI components
├── convex/ # Backend models and functions
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── public/ # Static assets
```
## Development Guide
### Adding New Features
1. Backend (Convex)
- Add new models in `convex/schema.ts`
- Create new functions in `convex/` directory
2. Frontend
- Create components in `components/`
- Add new routes in `app/(main)/(routes)/`
- Implement hooks in `hooks/`
### Best Practices
- Follow TypeScript strict mode guidelines
- Use Tailwind CSS for styling
- Implement responsive design patterns
- Write clean, documented code
- Follow the established project structure
## Deployment
1. Build the application
```bash
npm run build
# or
yarn build
```
2. Deploy to your preferred platform
- Vercel (recommended)
- Netlify
- Custom server
### Deployment Checklist
- [ ] Configure environment variables
- [ ] Set up Convex production deployment
- [ ] Configure Clerk authentication
- [ ] Set up proper domain and SSL
- [ ] Test all features in production
## Contributing
We welcome contributions! Please follow these steps:
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Support
- Create an issue for bug reports or feature requests
- Star the repository if you find it useful
- Follow for updates
---
Made with ❤️ by [DeusloVuilt](your-profile-link)