Firebase rework

[lvngstn]

Summary by Sourcery

Rework the Firebase integration and refactor the application structure to introduce new pages for user registration, home, and flashcard editing. Enhance the UI with consistent styling and improve the organization of components and styles. Update Firebase configuration to support Firestore and streamline the build by consolidating styles.

New Features:

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

Enhancements:

• Refactor the login and question addition components to use consistent input styling and button classes.
• Reorganize the project structure by moving and renaming files for better modularity and maintainability.
• Update Firebase configuration to include Firestore for database operations.

Build:

• Remove unused CSS files and consolidate styles into a global styles file for 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 rework of the Firebase integration and overall structure of the FlashCardio application. The changes include updates to the user interface, file organization, and the addition of new components and functionality.

Sequence Diagrams

User Authentication Flow

sequenceDiagram
    participant User
    participant LoginPage
    participant Firebase
    participant HomePage
    User->>LoginPage: Enter credentials
    LoginPage->>Firebase: Authenticate user
    Firebase-->>LoginPage: Authentication result
    alt Authentication successful
        LoginPage->>HomePage: Redirect to Home
    else Authentication failed
        LoginPage-->>User: Display error message
    end

Folder and Flashcard Management

sequenceDiagram
    participant User
    participant EditorPage
    participant FirestoreUtils
    participant Firestore
    User->>EditorPage: Create/Edit folder or flashcard
    EditorPage->>FirestoreUtils: Call add/update/delete function
    FirestoreUtils->>Firestore: Perform database operation
    Firestore-->>FirestoreUtils: Operation result
    FirestoreUtils-->>EditorPage: Update UI
    EditorPage-->>User: Display updated content

File-Level Changes

Change	Details	Files
Restructured the application's file organization	Moved components into separate directories Created new directories for global styles and page-specific styles Relocated model files Added new utility files for Firebase operations	client/src/pages/App.js client/src/pages/Login.js client/src/components/questions/AddQuestion.js client/src/components/questions/QuestionContext.js client/src/components/questions/QuestionManager.js client/src/models/Question.js client/src/models/QuestionList.js
Updated Firebase configuration and integration	Changed Firebase project configuration Added Firestore initialization Created utility functions for Firestore operations (add, update, delete folders)	client/src/pages/App.js client/src/components/folder-logic/firestoreUtils.js
Improved user interface and styling	Updated Login page layout and styling Created new components for headers, buttons, and flashcards Implemented a new folder structure view Added global styles and component-specific styles	client/src/pages/Login.js client/src/components/header/Header.js client/src/components/button/Button.js client/src/components/flashcard/flashcard-edit-mode/Flashcard.js client/src/components/main-window/folder-window/FolderWindow.js client/src/global-styles/styles.css
Added new pages and components	Created Editor page for flashcard editing Implemented CreateAccount page Added FolderWindow component for displaying folder structure Created AddCard component for adding new flashcards	client/src/pages/Editor.js client/src/pages/CreateAccount.js client/src/components/main-window/folder-window/FolderWindow.js client/src/components/flashcard/add-card/AddCard.js
Implemented new routing system	Updated App.js to use React Router Created navigation buttons for different routes Implemented state management for navigation between components	client/src/pages/App.js client/src/components/button/NavigationButtons.js client/src/index.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).