A web-app that will show a list of people and their information once the clicked user is clicked.

I wanted to learn how to work with these tehcnologies since there are not much resources talking about the implementation of a custom CRUD app.

Let me explain, everyone landing on the page will have read only access to the data. Only certain logged in users will be able to create, update and delete data. By "custom" I mean only those users having a certain role in the database. That's why on the prisma schema you will find a role field added on the User model. Only users with a role higher than 1 will be able to create, update and delete data.

The app is built using the following technologies:

• NextJS 13, NextAuth, tRPC, Prisma, PlanetScale and Tailwind CSS

You can benefit all these technologies from... 🥁🥁 HERE !

1. Fork or clone the repository
2. Run npm install to install all the dependencies
3. Define your environment variables in a *.env file
4. Run the following commands:

npm run build && npm run start

5. (Optional) Run npx prisma studio and give yourself a role greater than 1 on the User table to be able to w/ data.

6. Enjoy ! 🎉

7. Don't forget to star the repository if you liked it! 😊

DATABASE_URL="mysql://user:password@host/database"
NEXTAUTH_SECRET="your-nextauth-secret"
NEXTAUTH_URL="http://localhost:3000"

# Since I am using GitHub's provider:
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

NEXT_PUBLIC_API_ENDPOINT="https://XXXX.mockapi.io"
NEXT_PUBLIC_NODE_ENV="development"

There is also an example file named .env-example that you can use as a template.

Important! Make sure not to include the double quotes in the file.