FlashCard Pro

A modern spaced repetition flashcard application built with React, TypeScript, and Express. Upload CSV files with flashcard data and study using an intelligent spaced repetition algorithm.

Features

• CSV Upload: Upload flashcard data in "Clue Word, Explanation" format
• Spaced Repetition: Uses SM-2 algorithm for optimal learning
• Interactive Study Sessions: Flip cards and rate difficulty (Easy/Hard/Unable)
• Progress Tracking: Dashboard with statistics and progress visualization
• Persistent Storage: PostgreSQL database with Neon Database integration
• Modern UI: Clean interface built with shadcn/ui and Tailwind CSS

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for build tooling
• shadcn/ui components (Radix UI + Tailwind CSS)
• TanStack Query for server state management
• Wouter for routing
• React Hook Form with Zod validation

Backend

• Express.js with TypeScript
• PostgreSQL database with Drizzle ORM
• Neon Database (serverless PostgreSQL)
• Multer for file uploads
• Express sessions for session management

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database (or Neon Database account)

Installation

1. Clone the repository:

git clone <your-repo-url>
cd flashcard-pro

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env

Add your database URL to the .env file:

DATABASE_URL=your_postgresql_connection_string

4. Push the database schema:

npm run db:push

5. Start the development server:

npm run dev

The application will be available at http://localhost:5000

Usage

Uploading Flashcards

1. Prepare a CSV file with two columns: "Clue Word, Explanation"
2. Navigate to the upload page
3. Drag and drop or click to select your CSV file
4. The system will create a study set with your flashcards

Studying

1. From the dashboard, click "Study Now" on any study set
2. Cards will be presented with the clue word first
3. Click to flip and see the explanation
4. Rate your recall: Easy, Hard, or Unable to Recall
5. The spaced repetition algorithm will schedule the next review

Dashboard Features

• View all study sets with progress statistics
• See due cards count and mastery progress
• Access detailed study set information
• Start study sessions with one click

Project Structure

├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom React hooks
│   │   └── lib/           # Utility functions
├── server/                # Express backend
│   ├── index.ts          # Server entry point
│   ├── routes.ts         # API routes
│   ├── db.ts             # Database connection
│   └── storage.ts        # Data access layer
├── shared/                # Shared types and schemas
│   └── schema.ts         # Database schema and types
└── package.json          # Dependencies and scripts

Database Schema

The application uses four main tables:

• study_sets: Collections of flashcards
• flashcards: Individual flashcard data (clue word + explanation)
• study_cards: Progress tracking for each flashcard
• study_sessions: Study session metadata

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run db:push - Push schema changes to database
• npm run db:studio - Open Drizzle Studio for database management

Environment Variables

• DATABASE_URL - PostgreSQL connection string
• NODE_ENV - Environment (development/production)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.