Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/1999-sahil/notecraft-nextjs

Check out project live here
https://github.com/1999-sahil/notecraft-nextjs

blocknote clerk convex edgestore lucide-react nextjs13 shadcn-ui sonner tailwindcss typescript zod zustand

Last synced: about 2 months ago
JSON representation

Check out project live here

Awesome Lists containing this project

README 

        
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).



![logo](https://github.com/user-attachments/assets/c16eb7d7-fc0e-47cb-9df6-a47e1fd028ec)



## [Notecraft](https://notecraft-digital-notes-d1b2id7dg-1999-sahil.vercel.app/) - 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:



```bash

npm run dev

# or

yarn dev

# or

pnpm dev

# or

bun dev

```



Open [http://localhost:3000](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`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.



## Built With

* [Nextjs](https://nextjs.org/) - A react.js framework.

* [Tailwind CSS](https://tailwindcss.com/) - A CSS framework to design UI of the application.

* [clerk-auth](https://clerk.com/) - An authetication platform providing login via passwords, social providers, one-time email/SMS codes.

* [Convex](https://www.convex.dev/) - 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](https://edgestore.dev/) - EdgeStore is a type-safe Node package that makes it super easy to upload and retrieve files from the cloud

* [Blocknote](https://www.blocknotejs.org/) - An extensible React rich text editor with support for block-based editing, collaboration and comes with ready-to-use customizable UI components.

* [Zustand](https://zustand-demo.pmnd.rs/) - 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](https://github.com/user-attachments/assets/6de1bd02-da75-45d1-9ba1-db5cb9b500ef)

* Notecraft (Light Mode)

![note-l](https://github.com/user-attachments/assets/f0d00894-9b0b-41db-aeac-4159e1d60e6e)

* Landing Page

![note-main](https://github.com/user-attachments/assets/3488c991-8afe-48e4-ba12-ee5c3779c5e0)

* Cover Image, Icon and Title

![note-main2](https://github.com/user-attachments/assets/cfdd5b13-df45-4abe-ada4-7d265b4b21c8)

* Blocknote feature to add headings, images, lists

![note-main3](https://github.com/user-attachments/assets/80b3cfd5-9d2f-4702-a613-d7db8f051577)

* Puslish your article

![note-main4](https://github.com/user-attachments/assets/b0286ddd-2751-4bfc-8a0f-d8c5d30f5aad)

* Convex Schema

![note-convex](https://github.com/user-attachments/assets/c49da557-57b8-4d4c-bf45-5020b5e80317)



## Learn More



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



- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.



You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!



## Deploy on Vercel



The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.



Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.