Skip to content

mixim-cc/notes-fe

Repository files navigation

Mixim Notes Banner

Mixim Notes

Simple yet powerful, Note-taking app for productive minds.

Mixim Drafts - Simple yet powerful Note-taking app for productive minds. | Product Hunt

Website | Instagram | Join our Discord Server



Mixim Notes - Open Source Notekeeping

Welcome to Mixim Notes, your free and powerful open-source notekeeping solution. We believe in making note-taking accessible to everyone by using the latest and best technologies available.

Why Open Source? Mixim Notes started as a closed-source project, but we've decided to make it open source for a few compelling reasons:

  • Community Growth: By opening the source code, we invite developers and enthusiasts from around the world to contribute and make Mixim Notes even better.

  • Transparency: Open source fosters transparency, making it clear how Mixim Notes works and ensuring trust among users.

  • Constant Improvement: With a broader community, we can enhance and evolve Mixim Notes more rapidly, ensuring it remains a top-notch notekeeping solution.

How You Can Contribute

We'd love your help to enhance Mixim Notes further. Here's how you can get involved:

  • Join Our Community: Connect with us on our Discord Server. It's the hub for discussions, questions, and collaboration. Mixim Notes to grow and make it better. \
  • If you want to contribute Read How to Contribute.

Technologies Used

React Query v4 for managing API Calls
React Hook Form v7 for managing form states
Legend State v1 for managing client side data like auth
TailwindCSS v3 for UI
Framer Motion v5 for animations
Clerk for auth

Locally Setup Frontend

Prerequisites:

  • Node 18+

First, run the development server:

cp .env.example .env
npm install
npm run dev

# or

cp .env.example .env
yarn install
yarn dev

#or

cp .env.example .env
pnpm i
pnpm dev

We're using https://clerk.com/ for Complete user management. To run locally you need to create an account and get following SECRET KEYs.

  • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
  • CLERK_SECRET_KEY=

Follow Clerk Setup Guide to get Keys then, Paste them into .env. Now, You can sucessfully Authorized but you'll get Server Errors.

Setup Backend Locally Using Docker

A clean postgres database is required which can optionally be setup using docker as

docker run -d -p 5432:5432 -e POSTGRES_PASSWORD=password postgres

Following env Variable must be supplied to run, PG_values are for database. Note that the length of ENCRYPTION_SECRET value must not change from that of given sample.

Copy and Paste following code in your .env

ENCRYPTION_SECRET=mix&p*~!l1/!s0^=B*x7ti01q1!x4o^@
CLERK_SECRET_KEY=

DB_PROFILE=local
PG_HOST=host.docker.internal
PG_PORT=5432
PG_DB=postgres
PG_USER=postgres
PG_PASSWORD=password

BE_PORT=8080

Run the backend service using command. It will pull backend binaries from Docker Hub and run backend utilizing .env file from Frontend Codebase

docker run -p 8080:8080 --env-file .env --add-host=host.docker.internal:host-gateway -d bikash4416/notes-be

Playground URL Open http://localhost:8080/playground with your browser to access playground.

If you've any queries regarding backend feel free to join our Discord Server.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Let's build Mixim Notes together, and thank you for being part of this exciting journey!