Firebase Overhaul Merge

[DHaire92]

Merging changes from lvngstn

Summary by Sourcery

Overhaul the client application by introducing new pages for user registration and flashcard management, refactoring existing components for improved UI consistency, and updating the Firebase configuration to support Firestore. The project structure is reorganized for better modularity, and global styles are consolidated to replace outdated CSS files.

New Features:

• Introduce a new 'Editor' page for managing flashcards and folders, allowing users to add, update, and delete flashcards within folders.
• Add a 'CreateAccount' page to enable user registration with email and password using Firebase authentication.
• Implement a 'Home' page that displays a user's library and allows navigation to the 'Editor' for creating new folders.

Enhancements:

• Refactor the login and question components to use a consistent input styling and button class for a unified user interface.
• Update Firebase configuration to include Firestore initialization for database operations.
• Reorganize the project structure by moving and renaming components and models for better modularity and maintainability.

Build:

• Remove old CSS files and consolidate styles into a new global styles file for better management and consistency across the application.

Documentation:

• Add a CSS style order documentation file to guide developers on the preferred ordering of CSS properties.

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This pull request implements a significant overhaul of the Firebase integration and user interface for a flashcard application. The changes include updating the Firebase configuration, restructuring components, introducing new styling, and adding new functionality for flashcard and folder management.

Sequence Diagrams

Flashcard Creation Flow

sequenceDiagram
    participant User
    participant Editor
    participant AddCard
    participant Flashcard
    participant Firestore
    User->>Editor: Clicks 'Add New Card'
    Editor->>AddCard: Renders AddCard component
    User->>AddCard: Clicks to add card
    AddCard->>Editor: Notifies new card addition
    Editor->>Flashcard: Creates new Flashcard component
    User->>Flashcard: Enters card content
    Flashcard->>Editor: Updates card data
    Editor->>Firestore: Saves new flashcard data

Folder Management Flow

sequenceDiagram
    participant User
    participant Home
    participant FolderWindow
    participant Editor
    participant Firestore
    User->>Home: Clicks 'Add New Folder'
    Home->>Firestore: Creates new folder
    Firestore-->>Home: Returns folder ID
    Home->>Editor: Navigates to Editor with new folder data
    User->>Editor: Edits folder content
    Editor->>Firestore: Updates folder data
    User->>Editor: Clicks 'Save'
    Editor->>Firestore: Saves updated folder
    Editor->>Home: Navigates back to Home
    Home->>FolderWindow: Updates folder display

File-Level Changes

Change	Details	Files
Updated Firebase configuration and initialization	Changed Firebase project details including apiKey, authDomain, projectId, etc. Added Firestore initialization Exported db instance for use in other components	client/src/pages/App.js
Restructured and styled the Login component	Replaced custom header with new Header component Updated input fields with new styling classes Changed button styling and layout	client/src/pages/Login.js
Implemented new Editor component for flashcard management	Added functionality to add, edit, and delete flashcards Implemented folder management features including create, update, and delete Integrated with Firestore for data persistence	client/src/pages/Editor.js
Created new components for flashcard and folder management	Implemented FolderWindow component for displaying folder structure Created Flashcard component for editing individual flashcards Added AddCard component for creating new flashcards	client/src/components/main-window/folder-window/FolderWindow.js client/src/components/flashcard/flashcard-edit-mode/Flashcard.js client/src/components/flashcard/add-card/AddCard.js
Introduced new global styling and component-specific CSS	Created global styles for buttons, inputs, and layout Added specific styles for flashcards, folders, and the editor interface	client/src/global-styles/styles.css client/src/components/flashcard/flashcard-edit-mode/flashcard.css client/src/pages/page-styles/Editor.css
Implemented Firestore utility functions	Created functions for adding, updating, and deleting folders in Firestore Integrated these functions with the Editor component	client/src/components/folder-logic/firestoreUtils.js
Updated routing and navigation	Implemented new navigation buttons and routes Updated App component to use new routing structure	client/src/components/button/NavigationButtons.js client/src/pages/App.js

---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).