Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matheus1714/translate-sql-with-ai
Translate SQL with AI
https://github.com/matheus1714/translate-sql-with-ai
boracodar jax openai-api reactjs rocketseat
Last synced: 28 days ago
JSON representation
Translate SQL with AI
- Host: GitHub
- URL: https://github.com/matheus1714/translate-sql-with-ai
- Owner: Matheus1714
- Created: 2023-08-10T01:49:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-23T19:44:26.000Z (about 2 months ago)
- Last Synced: 2024-12-23T20:34:11.286Z (about 2 months ago)
- Topics: boracodar, jax, openai-api, reactjs, rocketseat
- Language: JavaScript
- Homepage: https://translate-sql-with-ai-pmwu.vercel.app/
- Size: 6.79 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Translate SQL with AI](https://ignite-project-timer.vercel.app/) 🚀
This repository is the solution to [#boraCodar um app de tradução de SQL com IA](https://www.rocketseat.com.br/boracodar#) by [Rocketseat](https://www.rocketseat.com.br/).
The objective of this project was the development of a SQL translation app, capable of receiving a schema and responding with queries to questions asked in natural language through artificial intelligence. During development it was possible to develop some additional features.
## Design
This Front-end project was developed based on the design proposed in [Figma](https://www.figma.com/file/7onflWgwMwObQw4Cft5mId/App-de-tradu%C3%A7%C3%A3o-de-SQL-com-IA-%E2%80%A2-Desafio-32-(Community)?type=design&node-id=0%3A1&mode=design&t=DmkI1dRNC6wJYwW8-1).
## Technologies
This project was developed using Vite + ReactJS and OpenAI API.
* [Vite ReactJS](https://vitejs.dev/guide/)
* [Open AI API](https://platform.openai.com/)
The project dependencies were:
```json
"dependencies": {
"@phosphor-icons/react": "^2.0.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-toastify": "^8.1.0",
"styled-components": "^6.0.7",
"react-copy-to-clipboard": "^5.1.0",
"openai": "^3.3.0"
}
```
## Config Project
Before running the project, create an `.env` file and fill in your `API_KEY` and `OPEN_AI_ORGANIZATION` obtained from the [OpenAI API](https://platform.openai.com/) platform. You must register and create a key through the platform.
```env
VITE_API_KEY=...
VITE_OPEN_AI_ORGANIZATION=...
```
## Run Project
With `.env` file configured, run the installation of dependencies with:
```shell
npm i
```
Run the exe project using the command:
```shell
npm run dev
```
😝 Enjoy!!
## What I Learned with This Project?
### OpenAI API
I learned how to use Open AI resources in the project using the [OpenAI Node.js Library](https://www.npmjs.com/package/openai) npm package. With that package and with the settings in the [OpenAI API](https://platform.openai.com/) account I was able to develop calls to the AI model.
```jsx
// src/services/api.js
import { Configuration, OpenAIApi } from 'openai'
const configuration = new Configuration({
apiKey: import.meta.env.VITE_API_KEY,
organization: import.meta.env.VITE_OPEN_AI_ORGANIZATION
})
delete configuration.baseOptions.headers['User-Agent'];
const api = new OpenAIApi(configuration)
export default api
```
### Environment Variables Vite
With this project I also learned how to configure Vite to have environment variables. As well as integrating into my project.
```jsx
// .env
VITE_API_KEY=...
VITE_OPEN_AI_ORGANIZATION=...
```
```jsx
// src/services/api.js
...
import.meta.env.VITE_API_KEY
import.meta.env.VITE_OPEN_AI_ORGANIZATION
...
```
### React-Toastify
For alert messages, I learned to use [React Toastify](https://www.npmjs.com/package/react-toastify), a very versatile npm package for nice alterta messages.
```jsx
// src/components/section/index.jsx
```
### Context and Providers React
I also used a bit of context in the project to share variables between components.
```jsx
// src/providers/openai-provider.jsx
export const OpenAIContext = createContext({
loading: false,
message: ""
})
```
## Acknowledgment
Thanks to [Rocketseat](https://www.rocketseat.com.br/) for this challenge and initiatives it provides.🚀