lotion.mp4
Lotion is a Notion clone, designed to provide users with a collaborative workspace for note-taking, task management, and document organization. Built on top of modern technologies, Lotion aims to replicate the core functionalities of Notion while offering a customizable and scalable solution.
- Authentication: Lotion employs Clerk library for seamless authentication, ensuring secure access control for users.
- Rich Text Editor: Powered by BlockNote, Lotion offers a rich text editing experience, enabling users to format their notes and documents effortlessly.
- Database Integration: Leveraging Convex, Lotion integrates with databases efficiently, facilitating data storage and retrieval.
- File Upload: With Edgestore, Lotion supports file uploads, allowing users to attach files and media to their documents seamlessly.
- State Management: Lotion utilizes Zustand for state management, providing a simple and efficient solution for managing application state.
-
Frontend:
- Next.js (React): Next.js provides a robust foundation for building React applications with server-side rendering and efficient routing.
- Shadcn & Tailwind: Shadcn enhances the design aesthetics with its theming capabilities, while Tailwind CSS offers a utility-first approach for styling components.
-
Backend:
- Clerk: Clerk library handles authentication and user management with ease, ensuring a secure login experience.
- BlockNote: BlockNote powers the rich text editing capabilities, enabling users to create and format content intuitively.
- Convex: Convex facilitates seamless integration with databases, allowing efficient storage and retrieval of data.
- Edgestore: Edgestore handles file uploads, providing users with the ability to attach files and media to their documents.
-
State Management:
- Zustand: Zustand is utilized for state management in Lotion, offering a simple and efficient solution for managing application state.
To get started with Lotion, follow these steps:
- Clone the repository:
git clone https://github.com/yourusername/lotion.git - Install dependencies:
npm install - Configure environment variables for Clerk, Convex, and Edgestore.
- Start the development server:
npm run dev