Prompto (Chingu Voyage 54 Team 37)

Table of Contents

• Description
• Current Status
• Features
• Technologies Used
• Required Services
• Installation
• Configuration
• Usage
• Build Instructions
• Deployment Checklist
• Contributing
• License
• Special Thanks
• Team Members

---

Description

Prompto is a full-stack application built to generate high-quality prompts that enable more accurate communication with large language models (LLMs).The goal of Prompto is to help users interact with LLMs more efficiently by providing a Pentagram-format input form, which guides prompt construction and improves the quality of model responses.

Current Status

The application is available online if accessed through Google Chrome or Mozilla Firefox with third-party cookies enabled.

• Deployment challenge

We have encountered a challenge involving third-party cookies and how Netlify is processing them. We learnt that .netlify.app is on Mozilla Public Suffix List, which means that cookies set by our server will not be attached to subsequent requests. We have opted to send our authentication token in the headers instead of cookies due to the aforementioned circumstances.

Features

• Feature 1: Prompt structuring.
• Feature 2: AI response.
• Feature 3: Prompt history.
• Feature 4: User authentication.

Technologies Used

• @google/generative-ai
• @octokit/auth-oauth-app
• @prisma/client
• @radix-ui/*
• @reduxjs/toolkit
• @tailwindcss
• clsx
• cookie-parser
• cors
• eslint
• express
• express-rate-limit
• express-session
• googleapis
• jest
• js-yaml
• jsonwebtoken
• octokit
• playwright
• prettier
• react
• react-dom
• react-hook-form
• react-redux
• react-router-dom
• sonner
• swagger-jsdoc
• swagger-ui-express
• ts-node
• typescript
• uuid
• vite
• zod

Required Services

• Netlify – React frontend deployment
• Render – Backend deployment via Docker
• Neon – PostgreSQL database location
• Prisma – Database management
• Google OAuth – OAuth provider setup
• GitHub OAuth – OAuth provider setup
• Google Gemini Flash – LLM integration for prompt engineering
• GitHub Actions – CI pipeline

Installation

1. Clone the repository:

   git clone https://github.com/chingu-voyages/V54-tier3-team-37.git

2. Install dependencies:

   yarn install

Configuration

1. Create .env files in both frontend/ and backend/ directories
2. Add required environment variables:

Frontend .env:

Variable	Description
VITE_API_BASE_URL	The URL of the backend server.

Backend .env:

Variable	Description
PORT	The port number on which the Express server will run.
DATABASE_URL	Connection string for the database used by Prisma ORM.
HOME_REACT_ADDRESS	Comma-separated URLs of the frontend app (productionUrl,developmentUrl).
GITHUB_CLIENT_ID	GitHub OAuth application's client ID.
GITHUB_CLIENT_SECRET	GitHub OAuth application's client secret.
GOOGLE_CLIENT_ID	Google OAuth application's client ID.
GOOGLE_CLIENT_SECRET	Google OAuth application's client secret.
GEMINI_API_KEY	API key for accessing the Google Gemini model.
JWT_SECRET	Secret used to sign JSON Web Tokens for session management.
SESSION_SECRET	Secret used for secure OAuth state handling.
NODE_ENV	Sets the environment mode: development, production, or test.

3. Generate Prisma Client to interact with the database:

yarn workspace backend prisma generate

Usage

Run front end dev server (http://localhost:5173):

yarn workspace frontend dev

Run back end dev server (http://localhost:8000):

yarn workspace backend start

Build Instructions

To build the project for production, build the frontend application:

yarn run build

Build the backend application:

 docker build -t backend-app .

Deployment Checklist

Set up deployment services:

• ✅ Ensure the React app is deployed to Netlify.
• ✅ Deploy the backend Docker image to Render.
• ✅ Verify PostgreSQL database connection to Neon.

Environment configurations:

• ✅ Set up all necessary environment variables for production, such as database URL, OAuth secrets.
• ✅ Configure OAuth for Google and GitHub on the backend.
• ✅ Ensure Google Gemini is correctly configured and accessible.

Authentication and authorization:

• ✅ Test Google OAuth and GitHub OAuth flows to ensure proper token handling and login/logout behavior.
• ✅ Ensure JWT tokens are properly sent and received in headers.

Database:

• ✅ Generate Prisma Client to set up the database schema.

Testing:

• ✅ Run tests to ensure all features work as expected.

Deployment validation:

• ✅ Confirm that the app is live on Netlify and accessible via Render.
• ✅ Test the production URL to ensure the application functions as expected in a live environment.

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Special Thanks

We as a team would like to thank Chingu platform and community for this opportunity to learn, improve and collaborate. Thank you Chingu!

Chingu is a platform that helps developers and other people in tech related roles practice in-demand skills and accelerate their learning through collaboration and project-building.

Learn more about Chingu platform at https://www.chingu.io/

Team Members

• Product Owner:
  • Sarita Jha: GitHub / LinkedIn
• Scrum Master:
  • Xochitl Farias: GitHub / LinkedIn
  • Steffi Saint-Pierre: GitHub / LinkedIn
• UI/UX Designer:
  • Trupti Shikhare: GitHub / LinkedIn
• Web Developer:
  • Aigul Yermagambetova: GitHub / LinkedIn
  • Brendan K. Schatzki: GitHub / LinkedIn
  • Luis Castillo: GitHub / LinkedIn
  • Veronika Kolesnikova: GitHub / LinkedIn