1. Introduction
2. Features
   • Home Component
   • Library Sidebar
   • Edit Functionality
   • Authentication
   • Server Integration
3. Tools and Dependencies
4. Getting Started
5. Development Scripts
6. Deployment

Capstone Gist is a React-based web application that integrates various AI models to provide users with summarized information on any given topic. Users can interact with different AI models, save responses, and manage their data through an intuitive UI. The application uses Firebase for authentication and Firestore for database management.

The Home component is the central hub of the application. It integrates user authentication, library management, and AI interactions.

• User Authentication: Uses Firebase to manage user sessions and access control.
• Library Management: Fetches and displays user-specific library items from Firestore.
• AI Interaction: Allows users to input topics and select different AI models to generate responses.

The Library component provides a sidebar for navigating and managing saved responses.

• Collapsible Design: Users can expand or collapse the sidebar for better screen utilization.
• Interactive List: Displays saved responses with options to edit, delete, or view details.

The editing feature is managed through EditForm, UpdateResponse, and UpdateEditForm components.

• In-Place Editing: Allows users to edit topics and individual points within their saved responses.
• Dynamic Updates: Changes are immediately reflected in the UI and saved to Firestore.

Authentication is managed using Firebase OAuth and context API.

• Multiple Auth Methods: Supports email/password and Google logins.
• Context Management: Uses React Context to provide authentication state across the application.

The server handles AI interactions and is built with Node.js and Express.

• AI Model Integration: Communicates with OpenAI, Google Generative AI, and Perplexity AI to generate content.
• Error Handling: Provides robust error handling to manage API failures gracefully.

The application uses several key tools and dependencies:

• React: For building the user interface.
• Firebase: For authentication and Firestore database.
• Express: For server-side operations.
• Axios: For making HTTP requests.
• Sass: For styling components.
• OpenAI, Google Generative AI, Perplexity AI: For AI content generation.
• UUID: For generating unique identifiers.
• Vite: For development and build processes.

To get started with the application, follow these steps:

1. Clone the repository:

   git clone <repository-url>
   cd capstone-gist

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory and add the following:

   PORT=3000
   GPT_KEY=your-openai-api-key
   GEMINI_KEY=your-google-generative-ai-key
   PERPLEXITY_KEY=your-perplexity-ai-key
   

4. Start the development server:

   cd frontend
   npm run dev

5. Start the API server:

   cd backend
   npm start

• npm run dev: Starts the development server using Vite.
• npm run build: Builds the application for production.
• npm run lint: Runs ESLint to check for code quality issues.
• npm run preview: Previews the production build locally.

To deploy the application, follow the build and deployment process suitable for your hosting environment. Ensure that the environment variables are correctly set in your production environment.