Joytion: Notion Clone

Started: 23 Oct 2023

✨you can click on the image to see it in full size

Important links:

Description:

This is a full stack web application built as a clone of 'notion.com'.

It allows you to create and edit your notes, as well as share them with others in real time.

The project is built with

  • Next.js
  • React
  • TypeScript.

Backend was done using

  • Clerk.js for authentification
  • Convex as the databse.

Each note has the ability to be 'published' or made publicly available so the other users can see it on their discover page.

Each logged in user can make a fork(copy) of all the public posts and add it to his favourites.

The project also includes a dashboard page that allows you to create, edit, delete, publish and unpublish your notes.

Documents can have other documents as their children.

Light and dark mode are included as well as a settings modal that lets you modify it.

This really was a great learning experience, and I really enjoyed making it.

I can't wait to see what's next!

Special Technologies:

Clerk.js

Really nice and cross compatible auth layer. Really easy to get going and for some small applications. It was difficult to implement saving users to another database when I needed them for the discover page and the social media side of Joytion. But overall very nice starting point.

Zustand

I never really liked the useContext() API that React provides, so when I tried zustand I was really happy. It's really intuitive, enjoyable and easy to work with.

Convex

Didn't enjoy it very much, still prefer Drizzle or Prisma.

Technologies used:

✨you can click one to see all projects made using it