Skip to content

Commit 83a3749

Browse files
ladunjexaladunjexa
authored
Update README.md
1 parent 1a47467 commit 83a3749

File tree

1 file changed

+356
-19
lines changed

1 file changed

+356
-19
lines changed

‎README.md

Lines changed: 356 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,373 @@
1-
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).
1+
# Next.js 14 Notion
22

3-
## Getting Started
3+
<!-- GitHub badges -->
44

5-
First, run the development server:
5+
[![Latest release](https://img.shields.io/github/v/release/ladunjexa/nextjs14-notion?label=Latest%20release&style=social)](https://github.com/ladunjexa/nextjs14-notion/releases/tag/v0.1.0)
6+
[![Stars](https://img.shields.io/github/stars/ladunjexa/nextjs14-notion?style=social)](https://github.com/ladunjexa/nextjs14-notion/stargazers)
7+
[![Fork](https://img.shields.io/github/forks/ladunjexa/nextjs14-notion?style=social)](https://github.com/ladunjexa/nextjs14-notion/forks)
8+
[![GitHub commits](https://img.shields.io/github/commit-activity/t/ladunjexa/nextjs14-notion?style=social&logo=github)](https://github.com/ladunjexa/nextjs14-notion/commits)
9+
[![Pull requests](https://img.shields.io/github/issues-pr/ladunjexa/nextjs14-notion?style=social&logo=github)](https://github.com/ladunjexa/nextjs14-notion/pulls)
10+
11+
![demo](https://i.ibb.co/Qm9fb95/nextjs14-notion-vercel-app-1.png)
12+
13+
[![ladunjexa](https://custom-icon-badges.demolab.com/badge/made%20by%20-ladunjexa-556bf2?logo=github&logoColor=white&labelColor=101827)](https://github.com/luadnjexa)
14+
[![License](https://img.shields.io/github/license/ladunjexa/nextjs14-notion?color=dddddd&labelColor=000000)](https://github.com/ladunjexa/nextjs14-notion/blob/main/LICENSE)
15+
[![Top Language](https://img.shields.io/github/languages/top/ladunjexa/nextjs14-notion?logo=github&logoColor=%23007ACC&label=TypeScript)](https://www.typescriptlang.org/)
16+
[![Contributors](https://img.shields.io/github/contributors/ladunjexa/nextjs14-notion?style=flat&color=orange&label=Contributors)](https://github.com/ladunjexa/nextjs14-notion/graphs/contributors)
17+
![Release](https://img.shields.io/github/release/ladunjexa/nextjs14-notion.svg)
18+
![PRs](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=shields)
19+
![deployment](https://img.shields.io/github/deployments/ladunjexa/nextjs14-notion/Production?logo=vercel&label=Website)
20+
[![Known Vulnerabilities](https://snyk.io/test/github/ladunjexa/nextjs14-notion/badge.svg)](https://snyk.io/test/github/ladunjexa/nextjs14-notion)
21+
22+
## 🌐 Live Demo
23+
24+
Explore the live demonstration of the project: [nextjs14-notion](https://nextjs14-notion.vercel.app/)
25+
26+
## 📝 Description
27+
28+
**SnapShot** is a modern social app with a stunning UI with a native mobile feel, a special tech stack, an infinite scroll feature, and amazing performance using React JS, Appwrite, TypeScript, and more.
29+
30+
<details><summary><b>Folder Structure</b></summary>
31+
32+
```bash
33+
nextjs14-notion/
34+
├── app/
35+
├ ├── (main)/
36+
├ ├ ├── (routes)/
37+
├ ├ ├ └── documents/
38+
├ ├ ├ ├── page.tsx
39+
├ ├ ├ └── [documentId]/
40+
├ ├ ├ └── page.tsx
41+
├ ├ ├── _components/
42+
├ ├ ├ ├── banner.tsx
43+
├ ├ ├ ├── document-list.tsx
44+
├ ├ ├ ├── item.tsx
45+
├ ├ ├ ├── menu.tsx
46+
├ ├ ├ ├── navbar.tsx
47+
├ ├ ├ ├── navigation.tsx
48+
├ ├ ├ ├── publish.tsx
49+
├ ├ ├ ├── title.tsx
50+
├ ├ ├ ├── trash-box.tsx
51+
├ ├ ├ └── user-item.tsx
52+
├ ├ └── layout.tsx
53+
├ ├── (marketing)/
54+
├ ├ ├── _components/
55+
├ ├ ├ ├── footer.tsx
56+
├ ├ ├ ├── heading.tsx
57+
├ ├ ├ ├── heroes.tsx
58+
├ ├ ├ ├── logo.tsx
59+
├ ├ ├ └── navbar.tsx
60+
├ ├ ├── layout.tsx
61+
├ ├ └── page.tsx
62+
├ ├── (public)/
63+
├ ├ ├── (routes)/
64+
├ ├ ├ └── preview/
65+
├ ├ ├ └── [documentId]/
66+
├ ├ ├ └── page.tsx
67+
├ ├ ├── layout.tsx
68+
├ ├── api/
69+
├ ├ └── edgestore/
70+
├ ├ └── [...edgestore]/
71+
├ ├ └── route.ts
72+
├ ├── favicon.ico
73+
├ ├── globals.css
74+
├ ├── error.tsx
75+
├ ├── not-found.tsx
76+
├ └── layout.tsx
77+
├── components/
78+
├ ├── modals/
79+
├ ├ ├── confirm-modal.tsx
80+
├ ├ ├── cover-image-modal.tsx
81+
├ ├ └── settings-modal.tsx
82+
├ ├── providers/
83+
├ ├ ├── convex-provider.tsx
84+
├ ├ ├── modal-provider.tsx
85+
├ ├ └── theme-provider.tsx
86+
├ ├── shared/
87+
├ ├ ├── cover.tsx
88+
├ ├ ├── editor.tsx
89+
├ ├ ├── icon-picker.tsx
90+
├ ├ ├── mode-toggle.tsx
91+
├ ├ ├── search-command.tsx
92+
├ ├ ├── single-image-dropzone.tsx
93+
├ ├ ├── spinner.tsx
94+
├ ├ └── toolbox.tsx
95+
├ └── ui/ (generated by shadcn-ui)
96+
├ ├── alert-dialog.tsx
97+
├ ├── avatar.tsx
98+
├ ├── button.tsx
99+
├ ├── command.tsx
100+
├ ├── dialog.tsx
101+
├ ├── dropdown-menu.tsx
102+
├ ├── input.tsx
103+
├ ├── label.tsx
104+
├ ├── popover.tsx
105+
├ └── skeleton.tsx
106+
├── convex/
107+
├ ├── generated/ (generated by convex)
108+
├ ├── auth.config.js
109+
├ ├── documents.ts
110+
├ ├── schema.ts
111+
├ └── tsconfig.json
112+
├── hooks/
113+
├ ├── use-cover-image.ts
114+
├ ├── use-origin.ts
115+
├ ├── use-scroll-top.ts
116+
├ ├── use-search.ts
117+
├ └── use-settings.ts
118+
├── lib/
119+
├ ├── edgestore.ts
120+
├ └── utils.ts
121+
├── public/
122+
├ ├── next.svg
123+
├ ├── vercel.svg
124+
├ └── assets/
125+
├ ├── icons/[[...]].png
126+
├ └── images/[[...]].{svg,png}
127+
├── .eslintrc.json
128+
├── .gitignore
129+
├── README.md
130+
├── components.json
131+
├── next.config.js
132+
├── package.json
133+
├── postcss.config.js
134+
├── tailwind.config.ts
135+
└── tsconfig.ts
136+
```
137+
138+
</details>
139+
140+
## 📖 Table of Contents
141+
142+
<details><summary>Table of Contents</summary>
143+
144+
- [Live Demo](#-live-demo)
145+
- [Description](#-description)
146+
- [Technologies Used](#-technologies-used)
147+
- [Get Started](#-get-started)
148+
- [Prerequisites](#-prerequisites)
149+
- [Installation and Run Locally](#-installation-and-run-locally)
150+
- [Scripts](#-scripts)
151+
- [Environment Variables](#-environment-variables)
152+
- [Deployment](#-deployment)
153+
- [Deploy to production (manual)](#-deploy-to-production-manual)
154+
- [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)
155+
- [Deploy on Netlify](#-deploy-on-netlify)
156+
- [Features](#-features)
157+
- [Contributing](#-contributing)
158+
- [Bug / Feature Request](#-bug--feature-request)
159+
- [Acknowledgements](#-acknowledgements)
160+
- [References](#-references)
161+
- [Contact Us](#-contact-us)
162+
- [License](#-license)
163+
164+
</details>
165+
166+
## ✨ Technologies Used
167+
168+
<details><summary><b>Notion</b> is built using the following technologies:</summary>
169+
170+
- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
171+
- [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and statically generated web applications.
172+
- [Tailwind CSS](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
173+
- [Convex](https://convex.dev/): Convex is a TypeScript-first ORM for Node.js and the browser.
174+
- [Clerk](https://clerk.dev/): Clerk is a developer-first identity and user management service.
175+
- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for
176+
identifying problematic patterns found in JavaScript code.
177+
- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.
178+
- [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly build modern web applications.
179+
- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction): Zustand is a small, fast and scalable bearbones state-management solution.
180+
- [BlockNote](https://blocknote.dev/): BlockNote is a Notion-like editor for React.
181+
- [Zod](https://zod.dev/): Zod is a TypeScript-first schema declaration and validation library.
182+
- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.
183+
184+
</details><br/>
185+
186+
[![Technologies Used](https://skillicons.dev/icons?i=ts,nextjs,tailwind,vercel)](https://skillicons.dev)
187+
188+
## 🧰 Get Started
189+
190+
To get this project up and running in your development environment, follow these step-by-step instructions.
191+
192+
### 📋 Prerequisites
193+
194+
In order to install and run this project locally, you would need to have the following installed on your local machine.
195+
196+
- [Node.js](https://nodejs.org/en/)
197+
- [NPM](https://www.npmjs.com/get-npm)
198+
- [Git](https://git-scm.com/downloads)
199+
200+
### ⚙️ Installation and Run Locally
201+
202+
**Step 0:**
203+
204+
Note :bangbang: the application uses Convex for ORM, therefore, you need to create Convex account [here](https://convex.dev/) and sets the `CONVEX_DEPLOY_KEY` and `NEXT_PUBLIC_CONVEX_URL` environment variables in `.env` file.
205+
206+
Note :bangbang: the application uses Clerk for Authentication and User Management, therefore, you need to create Clerk account [here](https://clerk.dev/) and sets the `CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables in `.env` file.
207+
208+
Note :bangbang: the application uses EdgeStore for file uploads, therefore, you need to create EdgeStore account [here](https://edgestore.dev/) and sets the `EDGE_STORE_ACCESS_KEY` and `EDGE_STORE_SECRET_KEY` environment variables in `.env` file.
209+
210+
Also, you need to create a JWT template in Clerk and define the JWKS Endpoint as a provider inside `convex/auth.config.js` file.
211+
212+
**Step 1:**
213+
214+
Download or clone this repo by using the link below:
215+
216+
```bash
217+
git clone https://github.com/ladunjexa/nextjs14-notion.git
218+
```
219+
220+
**Step 2:**
221+
222+
Execute the following command in the root directory of the downloaded repo in order to install dependencies:
223+
224+
```bash
225+
npm install
226+
```
227+
228+
**Step 3:**
229+
230+
Execute the following command in order to run the development server locally:
6231

7232
```bash
8233
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
15234
```
16235

236+
**Step 4:**
237+
17238
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18239

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
240+
### 📜 Scripts
241+
242+
All scripts are defined in the `package.json` file. Here is a list of all scripts:
243+
244+
| Script | Action |
245+
| :-------------- | :------------------------------------------ |
246+
| `npm install` | Installs dependencies |
247+
| `npm run dev` | Starts local dev server at `localhost:3000` |
248+
| `npm run build` | Build your production site to `./dist/` |
249+
| `npm run start` | Start your production site locally |
250+
| `npm run lint` | Run ESLint |
251+
252+
## 🔒 Environment Variables
253+
254+
Environment variables[^6] can be used for configuration. They must be set before running the app.
255+
256+
> [Environment variables](https://en.wikipedia.org/wiki/Environment_variable) are variables that are set in the operating system or shell, typically used to configure programs.
257+
258+
**Notion** uses [Convex](https://appwrite.io), and [Clerk](https://clerk.com) as external services. You need to create an accounts on Convex and Clerk and get the required credentials to run the app.
259+
260+
Create a `.env` file in the root directory of the project and add the following environment variables:
261+
262+
```env
263+
CONVEX_DEPLOY_KEY=<CONVEX_DEPLOY_URL>
264+
NEXT_PUBLIC_CONVEX_URL=<NEXT_PUBLIC_CONVEX_URL>
265+
266+
CLERK_PUBLISHABLE_KEY=<CLERK_PUBLISHABLE_KEY>
267+
CLERK_SECRET_KEY=<CLERK_SECRET_KEY>
268+
269+
EDGE_STORE_ACCESS_KEY=<EDGE_STORE_ACCESS_KEY>
270+
EDGE_STORE_SECRET_KEY=<EDGE_STORE_SECRET_KEY>
271+
```
272+
273+
## 🚀 Deployment
274+
275+
#### Deploy to production (manual)
276+
277+
You can create an optimized production build with the following command:
278+
279+
```bash
280+
npm run build
281+
```
282+
283+
#### Deploy on Vercel (recommended)
284+
285+
The easiest way to deploy this 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).
286+
287+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fladunjexa%2Fnextjs14-notion)
288+
289+
#### Deploy on Netlify
290+
291+
You can also deploy this Next.js app with [Netlify](https://www.netlify.com/).
292+
293+
[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ladunjexa/nextjs14-notion)
294+
295+
Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
296+
297+
## 💡 Features
298+
299+
- Real-time database 🔗
300+
- Notion-style editor 📝
301+
- Light and Dark mode 🌓
302+
- Infinite children documents 🌲
303+
- Trash can & soft delete 🗑️
304+
- Authentication 🔐
305+
- File upload
306+
- File deletion
307+
- File replacement
308+
- Icons for each document (changes in real-time) 🌠
309+
- Expandable sidebar ➡️🔀⬅️
310+
- Full mobile responsiveness 📱
311+
- Publish your note to the web 🌐
312+
- Fully collapsable sidebar ↕️
313+
- Landing page 🛬
314+
- Cover image of each document 🖼️
315+
- Recover deleted files 🔄📄
316+
317+
## 🔧 Contributing
318+
319+
[![contributors](https://contrib.rocks/image?repo=ladunjexa/nextjs14-notion)](https://github.com/ladunjexa/nextjs14-notion/graphs/contributors)
320+
321+
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
322+
323+
To fix a bug or enhance an existing module, follow these steps:
324+
325+
1. Fork the repo
326+
2. Create a new branch (`git checkout -b improve-feature`)
327+
3. Make the appropriate changes in the files
328+
4. Commit your changes (`git commit -am 'Improve feature'`)
329+
5. Push to the branch (`git push origin improve-feature`)
330+
6. Create a Pull Request 🎉
331+
332+
### 📩 Bug / Feature Request
333+
334+
If you find a bug (failure of a module to execute its intended function), kindly open an issue [here](https://github.com/ladunjexa/nextjs14-notion/issues/new) by including the issue with a title and clear description.
335+
336+
If you'd like to request a new function, feel free to do so by opening an issue [here](https://github.com/ladunjexa/nextjs14-notion/issues/new). Please include sample queries and their corresponding results.
337+
338+
## 💎 Acknowledgements
339+
340+
I'd like to express my gratitude to the following people who helped me with this
341+
project and made it possible:
20342

21-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
343+
- [Clerk](https://clerk.dev/)
344+
- [Convex](https://convex.dev/)
345+
- [EdgeStore](https://edgestore.dev/)
346+
- [BlockNote](https://blocknote.dev/)
347+
- [Shadcn UI](https://ui.shadcn.com/)
348+
- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction)
349+
- [useHooks TS](https://usehooks-ts.com/)
350+
- [Sonner](https://sonner.emilkowal.ski/)
351+
- [Next Themes](https://ui.shadcn.com/docs/dark-mode/next)
352+
- [Emoji Picker React](https://www.npmjs.com/package/emoji-picker-react)
353+
- [React Dropzone](https://react-dropzone.js.org/)
354+
- [React Textarea Autosize](https://www.npmjs.com/package/react-textarea-autosize)
355+
- [Vercel](https://vercel.com/)
356+
- [CodeWithAntonio](https://www.codewithantonio.com/)
22357

23-
## Learn More
358+
## 📚 References
24359

25-
To learn more about Next.js, take a look at the following resources:
360+
CodeWithAntonio. (2023). [Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind](https://www.codewithantonio.com/projects/notes-app). E-Learning.
26361

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
362+
## 📞 Contact Us
29363

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
364+
[![Telegram](https://img.shields.io/badge/Telegram-@ladunjexa-2CA5E0?style=social&logo=telegram&logoColor=000000)](https://t.me/ladunjexa)
365+
[![LinkedIn](https://img.shields.io/badge/LinkedIn-ladunjexa-blue?style=flat&logo=linkedin&logoColor=b0c0c0&labelColor=363D44)](https://www.linkedin.com/in/lironabutbul)
366+
[![Instagram](https://img.shields.io/badge/Instagram-ladunjexa-grey?style=flat&logo=instagram&logoColor=b0c0c0&labelColor=8134af)](https://www.instagram.com/ladunjexa)
367+
[![Discord](https://img.shields.io/badge/Discord-ladunjexa-7289da?style=flat&logo=discord&logoColor=b0c0c0&labelColor=2c2f33)](https://discord.com/users/827996364331810816)
31368

32-
## Deploy on Vercel
369+
<!-- [![Twitter](https://img.shields.io/twitter/follow/ladunjexa.svg?style=social)](https://twitter.com/intent/follow?screen_name=ladunjexa) -->
33370

34-
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.
371+
## 📋 License
35372

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
373+
**Notion** is open source software [licensed as MIT](https://opensource.org/license/mit/) and is free to use — See [LICENSE](https://github.com/ladunjexa/nextjs14-notion/blob/main/LICENSE) for more details.

0 commit comments

Comments
 (0)