troyciesco / draceton

Note-taking app with a Dracula theme!

Draceton 🧛

Note-taking so good, it's scary

website: https://draceton.vercel.app/ loom walkthrough: https://www.loom.com/share/e023539c4e854458814fa9558e1f1265

Draceton is a simple demo of a full-stack note-taking application with a little bit of a Dracula theme.

IMPORTANT: Authentication is faked to make testing a bunch of accounts easier. Because of this, you shouldn't save anything real to the database, and there might be a little jumpiness when logging in and logging out since it doesn't have to make a network request.

Features

• Users can create, edit, and delete notes. They can also change the text and background colors of the notes.
• Users can search the content of the notes.
• Notes must be between 20 and 300 characters.
• There are two demo "accounts" based on characters from Dracula.
  • Jonathan Harker has a bunch of notes that have been generated from the first chapter of Dracula (found at Project Gutenberg). The notes are random lengths, which is why it cuts off mid-sentence sometimes - it was just an on-brand way to create a bunch of notes at once. If I come back to this app later, I'll use it to add pagination.
  • Lucy Westerna has a handful of notes generated by ChatGPT from the prompt "write ten examples of marketing copy for a note-taking app with a dracula theme." I thought they were pretty clever, so I included them!
• The frontend uses Next.js, TypeScript, Tailwind, SWR, and graphql-request. It's deployed on Vercel.
  • I also make a reusable button style with SCSS for demostration purposes.
• The backend uses Nest.js, GraphQL, TypeScript, and a SQLite database. I deployed it on Railway. Normally I'd set up a Postgres database, but I decided to keep it simple for this iteration.
• Since the site is Dracula-themed (and it's all the rage nowadays), there's also dark mode 🌝

Running the frontend

1. cd client
2. copy .env.example to .env and update the values (right now, it's just public URLs, so it's fine to just copy)
3. yarn install
4. yarn dev, and it should run on port 3000.

Running the backend

1. cd client
2. copy .env.example to .env and update the values (right now, it's just public URLs, so it's fine to just copy)
3. yarn install
4. yarn dev, and it should run on port 3000.

Since there's currently an SQLite db, you should already have the starter data. In a real app I'd have a more proper migration etc. flow, but this is what I usually do to reset:

1. delete server/prisma/migrations
2. delete server/prisma/dev.db and, if it exists, server/prisma/dev.db.journal
3. run npx prisma migrate dev --name init. This should initialize and seed the database using server/prisma/seed.ts
4. restart the server