Building Your Notion Replica: A Quick Guide (using Next.js, Appwrite, and Shadcn-ui)

Hey, fellow tech enthusiasts! 🚀 Get ready to embark on a coding journey with me in this blog post, where I spill the secrets behind crafting my own version of Notion, the productivity giant. We'll be cruising through each step, leveraging the awesomeness of Next.js for the website's backbone, tapping into Appwrite's data-handling wizardry, and wrapping it all up in the sleek aesthetics of Shadcn-ui.

This one's for all you developers out there itching to explore these cutting-edge technologies or anyone keen on forging a personalized digital oasis. 🛠️ Picture having a workspace that dances to your coding symphony – that's the goal! So, if you're ready to level up your developer game or just want a cool, custom workspace, you're in for a treat.

By the grand finale, you'll be flaunting your very own Notion-inspired creation. 🌟 Ready to dive into the code and create a productivity tool that's as unique as you are? Let's roll up our sleeves and make some coding magic happen! 💻✨

• Live Preview of the Application: Preview
• GitHub Repository: Github
• Big Shoutout to Antonio for the Reference: CodeWithAntonio (YouTube)
• Appwrite.io: site | docs
• Next.js: site | docs
• Shadcn-ui: site | docs

What is Appwrite?

Appwrite is an open-source backend as a service that simplifies the development of web and mobile applications by providing a set of pre-built, customizable APIs (Application Programming Interfaces). It is designed to handle backend tasks, such as authentication, database management, file storage, and more. Appwrite aims to streamline the development process and reduce the need for developers to build these functionalities from scratch.

What is shadcn-ui?

Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. Use this to build your component library.

creating setup

installing next.js, installing shadcn-ui, and setting up Appwrite with the project

next.js installation

follow the command to install next.js on your machine.

npx create-next-app infinote
cd infinote

I have used typescript for the current project with tailwind CSS so anyone wants to try just select the options while running the above command

run and test setup

npm run dev

there must be an application running in your http://localhost:3000

shadcn-ui installation

open your terminal and follow the command

npx create-next-app@latest my-app --typescript --tailwind --eslint

now initialise shadcn

npx shadcn-ui@latest init

after the initialisation you will be required to configure component.json for which select options come at your terminal

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

---

note: if you are working with typescript you will be receiving tailwind.config.ts file in your application folder change tailwind.config.js to tailwind.config.ts

now we will be having a folder structure like this:

├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

now you can follow along the shadcn docs to know more..

Setting up Appwrite

• go to appwrite.io
• click on Get started
• create your account if you have none
• click on Create a project
• setup project as mentioned (next.js)
• now follow the amazing documentation and start building the project.

While explaining the building process in this blog, I understand it may pose challenges. Therefore, I recommend visiting the GitHub repository, starring it, and following the code to develop your own Notion Replica.

For a deeper understanding of the front-end logic, be sure to explore Antonio's channel. He has a collection of fantastic projects, providing detailed explanations that can be immensely helpful if you encounter any roadblocks during development.
(Not sponsored just felt helpful 🙂)

If you find this project valuable, I encourage you to connect with me on Twitter, LinkedIn, and GitHub. I'm just a direct message away and would love to hear about your experience or assist you further.

Also if you find this project valuable make sure to connect with me on Twitter, LinkedIn, and GitHub. I'm just a DM away.