Exam Study App

A modern React application built with TypeScript and Fluent UI v9 for studying certification exams through flashcards and question management.

Features

🎯 Core Functionality

• Topic Management: Create and organize study topics
• Question Bank: Add, edit, and delete questions and answers for each topic
• Flashcard Testing: Interactive test mode with randomized questions
• Score Tracking: Track correct/incorrect answers during tests
• Local Storage: All data persists in browser's local storage

🎨 Modern UI

• Fluent UI v9: Microsoft's modern design system
• Responsive Design: Works on desktop and mobile devices
• Minimalist Navigation: Clean left sidebar with topic organization
• Card-based Interface: Easy-to-read question and answer cards

🚀 Planned Features

• GitHub Integration: Use GitHub repositories as data backend
• GitHub Authentication: Secure login with GitHub
• @pixl/react Integration: Enhanced flashcard animations and transitions
• Export/Import: Share question sets with others
• Advanced Analytics: Detailed performance tracking

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd exam-study-app

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

How to Use

1. Create Your First Topic

• Click the "+" button in the navigation sidebar
• Enter a topic name (e.g., "AWS Solutions Architect", "React Fundamentals")
• Optionally add a description
• Click "Add Topic"

2. Add Questions

• Select a topic from the sidebar
• Click "Add Question" in the main content area
• Enter your question and answer
• Click "Add Question" to save

3. Take a Test

• Select a topic with at least one question
• Click "Start Test" in the main content area
• Test mode will hide the navigation and present flashcards
• Click "Show Answer" to reveal the answer
• Mark yourself as "Correct" or "Incorrect"
• Continue through all questions to see your final score

4. Manage Your Content

• Edit Questions: Hover over a question card and click the edit icon
• Delete Questions: Hover over a question card and click the delete icon
• Delete Topics: Hover over a topic in the sidebar and click the delete icon

Technologies Used

• React 18 - Frontend framework
• TypeScript - Type safety and better developer experience
• Vite - Fast development build tool
• Fluent UI v9 - Microsoft's modern React component library
• UUID - Unique identifier generation
• Local Storage API - Client-side data persistence

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})