/notecraft-nextjs

A freemium productivity and note-taking web application. It offers folder based features where you can write your notes using blocknote editor which gives features like image uploading, text decoration, color pickers, headings and sub-headings, etc. Check out project live here.

Primary LanguageTypeScript

This is a Next.js project bootstrapped with create-next-app.

logo

Notecraft - A a freemium productivity and note-taking web application

Notecraft is a freemium productivity and note-taking web application. It offers folder based features where you can write your notes using blocknote editor which gives features like image uploading, text decoration, color pickers, headings and sub-headings, etc.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Built With

  • Nextjs - A react.js framework.
  • Tailwind CSS - A CSS framework to design UI of the application.
  • clerk-auth - An authetication platform providing login via passwords, social providers, one-time email/SMS codes.
  • Convex - Convex is an all-in-one backend platform with thoughtful, product-centric APIs. Use TypeScript to write queries as code that are automatically cached and realtime, with an acid compliant relational database.
  • Edgestore - EdgeStore is a type-safe Node package that makes it super easy to upload and retrieve files from the cloud
  • Blocknote - An extensible React rich text editor with support for block-based editing, collaboration and comes with ready-to-use customizable UI components.
  • Zustand - A state management tool for managing state. A centralized state and reducing prop drilling in application

Features of the application

Application Images

  • Notecraft (Dark Mode) note-d
  • Notecraft (Light Mode) note-l
  • Landing Page note-main
  • Cover Image, Icon and Title note-main2
  • Blocknote feature to add headings, images, lists note-main3
  • Puslish your article note-main4
  • Convex Schema note-convex

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.