medea

A very simple store and view notes application but also an excuse to play with some new technologies.

Table of Contents

• Pre-Requisites
• Getting Started
• Usage
• Technologies

Pre-Requisites

• This project leverages pnpm as it's package manager so make sure you install it
• To run the db locally please install docker

Getting Started

• pnpm env use --global 14
• pnpm install will install everything
• pnpm db:up will start the postgres docker container
  • pnpm db:down to shut it down
• pnpm dev will start both client and server in dev mode
  • You can view api docs at http://127.0.0.1:7000/api/docs
  • App will launch at http://localhost:3000
• pnpm db:studio will launch prisma's studio to visually interact with the db
  • You can view db at http://localhost:5555
• pnpm sb will launch storybook at http://localhost:6006
• pnpm test will run unit tests
  • pnpm test --watch to run in watch mode
• pnpm gitzy to commit using a cli that follows conventional commits
• formatting and linting will happen before committing

Usage

medea exposes it's api if you wish to use outside of the UI as you wish

1. Create a medea

curl --request POST \
  --url http://127.0.0.1:7000/notes \
  --header 'Content-Type: application/json' \
  --data '{
	"title": "Usage",
	"description": "An example of a new note",
	"text": "# This Is Your New Note\n\n> Thank you using Medea! ❤️\n\n## Tips\n* You can click the 👁 to preview\n* You can click the 📝 to edit\n\n",
	"tags": [
	]
}'

2. Click the link from response

{
  // cSpell:ignore cku05wn4t00211rslpcjzcrxw
  "id": "cku05wn4t00211rslpcjzcrxw",
  "links": {
    "note": "http://localhost:3000/notes/cku05wn4t00211rslpcjzcrxw",
    "json": "http://localhost:3000/json/cku05wn4t00211rslpcjzcrxw"
  },
  "createdAt": "2021-09-25T19:04:33.053Z",
  "updatedAt": "2021-09-25T19:04:33.053Z"
}

3. Rinse and Repeat

Technologies

⚡️ The theme was speed from development to production so the technologies we're chosen with that in mind.

Workspace

• jest ✅
• eslint 🚨
• prettier 🎨
• husky 🎨
• typescript 🚨
• docker 👷
• pnpm for it's workspaces and the boost in installation speed ⚡️
• nx(only the cli) for it's computational caching ⚡️, affected commands ⚡️ and workspace visualization 🔨
• storybook

Client

• react ✨
• react-router ✨
• @testing-library/react ✅
• vite for the fast server start and updates ⚡️
  • You can read more here
• tailwindcss for it's focus on rapid UI development ⚡️
• react-query for making fetching, caching, synchronizing and updating server state easy 🍻
  • You can read more here

Server

• nodemon 🔨
• esbuild for it's fast builds and transpiling ⚡️
• Fastify for it's lower cost of the infrastructure 🍻 and better responsiveness under load ⚡️
• prisma for it's many features that improve developer productivity 🍻
  • You can read more here
• postgres for it's performance and it works great with prisma ⚡️