Overview

Flashcards is a simple CRUD app that allows users to create their own flashcards and categories. It also provides a practice mode where users can review the flashcards either in order or randomly. The app aims to demonstrate Distributed Tracing in Next.js using Sentry.

Features

• Create and manage flashcards
• Create and manage categories for flashcards
• Practice mode to review flashcards
• Ability to show flashcards in order or randomly

Installation

To run the Flashcards app locally, follow these steps:

1. Rename the .example.env file to .env.
2. Replace the DATABASE_URL value in the .env file. You can use any MySQL service (like Cloud SQL or PlanetScale) or set up a local MySQL instance.
3. Paste your project’s DSN string for the SENTRY_DSN and NEXT_PUBLIC_SENTRY_DSN values in the .env file.
4. Generate a random string for the NEXTAUTH_SECRET value. This value can include numbers and special characters.
5. If you don’t have a Sentry account or don’t want to use Sentry, you can skip setting up the SENTRY_DSN and NEXT_PUBLIC_SENTRY_DSN values for now.
6. Once you have the environment variables set, install the dependencies by running pnpm install.
7. Set up your database by following these instructions:
   • Run npx prisma generate to generate the Prisma client based on the schema.
   • Run npx prisma db push to initialize your database branch.
   • Run npx prisma db seed to add demo data (categories and flashcards) so you don’t have to manually create them.
8. After setting up the database, start the app locally by running pnpm dev command.
9. Visit localhost:3000 in your browser to access the app.
10. The app will display a sign-in screen. If you seeded the demo data, you can sign in with the email admin@admin.com and password admin. Otherwise, you can create a new account by entering your email and password. Note that the “sign in” option also doubles as a “register” option.

Summary

Flashcards is a simple CRUD app that allows users to create and manage flashcards and categories. It also offers a practice feature to review flashcards. The app demonstrates Distributed Tracing in Next.js using Sentry. To install and run the app locally, you need to set up the environment variables, install dependencies, and configure the database. Once set up, you can access the app on localhost:3000 and use the provided demo data or create a new account.