Notetaker allows the user to keep notes organized by topics. Users must sign in using their GitHub account to create and view notes. Notes can be written in Markdown, so they are displayed in a formatted way.
You can find a deployed app here.
The initial app's configuration and design follow along with Jack Herrington's YouTube video T3: TRPC, Prisma and NextAuth Done Right.
This is a T3 Stack project bootstrapped with create-t3-app.
We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Github and ask for help.
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!
Tailwind CSS is great for styling UI elements without writing CSS stylesheets. However, for the common types of UI, the direct use of utility classes becomes repetitive and tedious.
daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
The customizing and theming abilities of daisyUI allow the implementation of any design system.
This project assumes using a PostgreSQL database.
One of the easiest ways to obtain an instance of the PostgreSQL database is to sign up at Supabase.
Alternatively, one can run Supabase locally using Docker:
Clone the repository:
git clone --depth 1 https://github.com/supabase/supabaseEnter the directory with the docker-compose.yml file:
cd supabase/dockerMake and edit a copy of the included configuration file:
cp .env.example .envRun Supabase:
docker-compose upOf course, there are more conventional ways to run PostgreSQL. Any method will do.
One of the advantages of Supabase is its web console, but it also provides other useful features, including authentication, cloud storage, and auto-generated APIs.
This project uses tRPC.panel() for documenting and testing tRPC endpoints. It has a Swagger-like UI and allows executing endpoints and inspecting their behaviour, e.g., validation.
To access the tRPC panel, add /api/panel to the end of the base URL of your app.
Thus, locally, one can open http://localhost:3000/api/panel to see the tRPC panel.
The endpoints behave differently in authenticated and non-authenticated states. Currently, it is enabled in the production environment too. Perhaps, we should disable it in production for real-world applications.
Clone the repository to your local machine:
git clone git@github.com:yurivyatkin/notetaker.gitInstall the dependencies:
npm installConfigure the environment variables in the .env file:
# Prisma
DATABASE_URL="postgresql://<your PostgresQL database connection string>"
# Next Auth
NEXTAUTH_URL="http://localhost:3000"
# Next Auth Github Provider
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""Push the table definitions to the newly configured database:
npx prisma db pushGenerate a secret for NextAuth, using this command:
openssl rand -base64 32
Use this secret as the value of the NEXTAUTH_SECRET environment variable.
For production deployments, the NEXTAUTH_URL environment variable is not used.
GitHub requires configuring a separate app for use in the production, so there will be different values of the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables.
To push the tables to the remote instance of PostgreSQL, create a .env.production.local file with the DATABASE_URL environment variable set to the corresponding PostgreSQL connection string. Then use the following command:
npm run push:productionFollow the deployment guides for Vercel, Netlify, and Docker for more information.