Flashcards Quiz App

A React + Redux application for creating study topics, quizzes, and interactive flip cards. Perfect for studying and memorization.

Features

• 📚 Topics: Organize quizzes by subject or category
• 📝 Quizzes: Create quizzes with multiple flashcards
• 🎴 Flashcards: Interactive cards with front (question) and back (answer)
• 🔄 Card Flipping: Click cards to flip between question and answer
• 🧭 Navigation: Easy routing between topics, quizzes, and cards

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/Ollieadams23/quiz-flashcards-react.git
cd quiz-flashcards-react

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 in your browser

How to Use

Creating a Topic

1. Navigate to /topics/new
2. Enter a topic name
3. Choose an icon
4. Click "Add Topic"

Creating a Quiz

1. Navigate to /quizzes/new
2. Enter a quiz name
3. Select a topic from the dropdown
4. Click "Add a Card" to add flashcards
5. Fill in the front (question) and back (answer) for each card
6. Click "Remove" to delete unwanted cards
7. Submit the form

Viewing and Using Flashcards

1. Go to /topics or /quizzes to see your content
2. Click on a quiz to view its cards
3. Click any card to flip between question and answer

Available Scripts

npm start

Runs the app in development mode at http://localhost:3000

npm test

Launches the test runner in interactive watch mode

npm run build

Builds the app for production to the build folder

---

Developer Documentation

Tech Stack

• React - UI library
• Redux Toolkit - State management
• React Router - Client-side routing
• uuid - Unique ID generation

Project Structure

src/
├── app/
│   ├── App.js           # Main app component
│   ├── AppLayout.js     # Layout wrapper with navigation
│   ├── routes.js        # Route path constants
│   └── store.js         # Redux store configuration
├── components/
│   ├── NewQuizForm.js   # Quiz creation form
│   └── NewTopicForm.js  # Topic creation form
├── features/
│   ├── cards/
│   │   ├── Card.js      # Individual card component
│   │   └── cardsSlice.js # Cards Redux slice
│   ├── quizzes/
│   │   ├── Quiz.js      # Single quiz view
│   │   ├── Quizzes.js   # All quizzes list
│   │   └── quizzesSlice.js # Quizzes Redux slice
│   └── topics/
│       ├── Topic.js     # Single topic view
│       ├── Topics.js    # All topics list
│       └── topicSlice.js # Topics Redux slice
└── data/
    └── icons.js         # Available topic icons

Redux State Structure

The application uses a normalized state structure with three slices:

Topics Slice

{
  topics: {
    'topic-id': {
      id: 'topic-id',
      name: 'Topic Name',
      icon: 'icon-url',
      quizIds: ['quiz-id-1', 'quiz-id-2']
    }
  }
}

Quizzes Slice

{
  quizzes: {
    'quiz-id': {
      id: 'quiz-id',
      name: 'Quiz Name',
      topicId: 'topic-id',
      cardIds: ['card-id-1', 'card-id-2']
    }
  }
}

Cards Slice

{
  cards: {
    'card-id': {
      id: 'card-id',
      front: 'Question',
      back: 'Answer'
    }
  }
}

Key Concepts

Normalized State: All entities are stored as objects keyed by ID for O(1) lookup performance.

Relationships:

• Topics contain quizIds[] referencing their quizzes
• Quizzes contain topicId (parent) and cardIds[] (children)
• Cards are independent entities referenced by quizzes

ID Generation: UUIDs are generated using uuid library to ensure uniqueness across all entities.

Routes

Path	Component	Description
/	Topics	Home page showing all topics
/topics	Topics	All topics list
/topics/new	NewTopicForm	Create new topic
/topics/:topicId	Topic	View single topic with its quizzes
/quizzes	Quizzes	All quizzes list
/quizzes/new	NewQuizForm	Create new quiz
/quizzes/:quizId	Quiz	View single quiz with flashcards

Adding New Features

Adding a New Slice

1. Create slice file in src/features/[feature]/[feature]Slice.js
2. Define initial state, reducers, and selectors
3. Export action creators and reducer
4. Add reducer to src/app/store.js

Adding a New Component

1. Create component in appropriate feature folder
2. Connect to Redux using useSelector and useDispatch
3. Add route in src/app/App.js if needed
4. Update route constants in src/app/routes.js

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add feature'
4. Push to branch: git push origin feature-name
5. Open a Pull Request

License

This project was bootstrapped with Create React App.