deckly Tailwind Templates

Deckly

Deckly is a flashcard application designed to make remembering things easier, built using Next.js 15 with Typescript. Neon Postgres with Drizzle, Shadcn and Tailwind CSS.

#drizzle-orm #neon-postgres #nextjs #shadcn #taiwindcss #typescript
Demo Download

Deckly

Deckly is a flashcard application designed to make remembering things easier and more efficient. It leverages the spaced repetition technique to help users optimize their learning process by scheduling reviews at strategic intervals. Whether you're learning a new language, preparing for medical exams, or mastering any knowledge-intensive subject, Deckly is your go-to solution for boosting memory retention, reducing study time, and enhancing productivity.

The application is built using Next.js, Neon Postgres database with Drizzle, Shadcn and Tailwind CSS.

Table of Contents

Screenshots

Decks Page

Displays an overview of all the decks created by the user. Includes options for creating new decks and managing existing ones.

Cards Page

Users can view all cards within a selected deck. This page allows the addition, editing, or deletion of cards.

Statistics Page

Visualizes user activity and card statistics, providing insights into learning progress and overall performance.

Premium Page

Showcases the benefits of premium subscriptions, such as unlocking higher deck limits and gaining access to exclusive features.

Features

  • Spaced repetition algorithm: Schedules reviews for cards to optimize learning efficiency.
  • Deck management: Create, edit, delete, and organize flashcard decks.
  • Search and Filter: Quickly find cards with advanced search and filtering options.
  • Statistics Dashboard: Track learning progress and review activity with detailed charts and summaries.
  • Premium subscription: Access advanced features and extended deck limits.
  • User Authentication: Secure login options using email/password or OAuth integrations with Google and GitHub.

Technologies Used

  • Next.js: React framework for server-side rendering.
  • Shadcn: UI components library for customizable UI elements.
  • Tailwind CSS: Utility-first CSS framework for styling.
  • Neon: Cloud-based PostgreSQL database.
  • Drizzle: Type-safe and lightweight ORM for database management.
  • Auth.js: User authentication with email/password and OAuth integration with Google and GitHub.
  • TanStack Query: For efficient data fetching and state management.
  • TanStack Table : For displaying and managing table data.
  • Stripe: Payment processing for premium subscriptions.

Database Model

Getting Started

To get started with the project, follow these steps:

Prerequisites

Setup Neon Postgress database

  1. Create a Neon account and create a new project. Navigate to the Connection Details section in the project console to get the database connection string. This is to be set at the DATABASE_URL variable in the .env file.

Setup Auth.js OAuth providers

  1. Configure Google for OAuth to get Client ID and Client Secret. They are to be set at the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET variables in the .env file.
  2. Configure GitHub for OAuth to get the Client ID and Client Secret. They are to be set at the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET variables in the .env file.

Setup Stripe

  1. Create a Stripe account and get the secret key from the developer tools. This secret key is to be set at the STRIPE_SECRET_KEY variable in the .env file.
  2. In the Product catalog, create two subscription products, one for Standard plan and another for Premium plan. Get the price ID for both products to be set at the STRIPE_STANDARD_PLAN_PRICE_ID and STRIPE_PREMIUM_PLAN_PRICE_ID variables in the .env file respectively.
  3. Download the Stripe CLI and log in with your Stripe account.
    stripe login
  4. Run the webhook listener to get the webhook signing secret. This secret is to be set at the STRIPE_WEBHOOK_SECRET variable in the .env file.
    stripe listen --forward-to localhost:3000/api/webhooks/stripe

To Run Locally

  1. Open terminal and clone the repository:

    git clone https://github.com/guanjunming/deckly.git

  2. Navigate to the project directory:

    cd deckly

  3. Install the dependencies:

    npm i --legacy-peer-deps

    The --legacy-peer-deps flag is needed in order to resolve issues with installing packages that does not list React 19 as a peer dependency.

  4. Create a .env file in the project directory and add the following variables:

    NEXT_PUBLIC_SERVER_URL=          # Public server url. Use http://localhost:3000 for local development
DATABASE_URL=                    # Neon Postgres database connection string
AUTH_SECRET=                     # Secret key for Auth.js
GOOGLE_CLIENT_ID=                # Google OAuth client ID
GOOGLE_CLIENT_SECRET=            # Google OAuth client secret
GITHUB_CLIENT_ID=                # GitHub OAuth client ID
GITHUB_CLIENT_SECRET=            # GitHub OAuth client secret
STRIPE_SECRET_KEY=               # Secret key for Stripe API access
STRIPE_STANDARD_PLAN_PRICE_ID=   # Price ID for Standard Plan product defined in Stripe dashboard
STRIPE_PREMIUM_PLAN_PRICE_ID=    # Price ID for Premium Plan product defined in Stripe dashboard
STRIPE_WEBHOOK_SECRET=           # Stripe webhook signing secret generated from Stripe CLI

  5. Create tables in the Neon Postgress database:

    npm run db:migrate

Running The Application

  1. Open terminal and run the server:

    npm run dev

  2. In another terminal, run the Stripe webhook listener:

    npm run stripe:webhook

Folder Structure

The project structure is organized as follows:


deckly/
├── public/ # Static files (images, icons)
├── src/
│ ├── app/ # App Router and API Route Handlers
│ ├── components/ # Reusable React components
│ ├── data/ # Constants and data configurations
│ ├── db/ # Drizzle database schema and migration
│ ├── hooks/ # Custom hooks
│ ├── lib/ # Utility functions
│ ├── schemas/ # Zod validation schemas
│ ├── types/ # Typescript type declarations
├── .env # Environment variables (not tracked in version control)
├── package.json # Dependencies and scripts

Future Enhancements

  1. Rich Media : Add support for rich text editing and allow embedding of images and audio clips.
  2. Custom Deck Options: Allow users to customize review intervals and spaced repetition settings.
  3. Enhanced Statistics: Add more charts to provide more insights into user progress.
  4. Import/Export: Add functionality import/export decks to file (eg. csv, json).
  5. Deck Sharing: Introduce a public deck marketplace where users can browse, upload, and download decks.
  6. Theme: Allow users to switch between light and dark modes.

Attributions

Resources

References

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes