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:
-
Clone the repository:
git clone <repository-url> cd capstone-gist
-
Install dependencies:
npm install
-
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
-
Start the development server:
cd frontend npm run dev
-
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.