Skip to content

Enhance NeuralInk project by adding client-side React application, in… #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wanda-carlson wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance NeuralInk project by adding client-side React application, in… #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{
"name": "neuralink-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"tailwindcss": "^3.3.5",
Copy link

@greptile-apps greptile-apps bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: Missing PostCSS and autoprefixer peer dependencies required by TailwindCSS

Suggested change
"tailwindcss": "^3.3.5",
"postcss": "^8.4.0",
"autoprefixer": "^10.4.0",
"tailwindcss": "^3.3.5",

"web-vitals": "^2.1.4"
Comment on lines +8 to +14
Copy link

@coderabbitai coderabbitai bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Ensure Tailwind CSS configuration is properly set up

I see Tailwind CSS is included as a dependency, which matches the styling approach in the components.

Ensure that Tailwind CSS configuration files (tailwind.config.js and postcss.config.js) are properly set up in the project. These files are essential for Tailwind to work correctly but aren't visible in the provided files.

🏁 Script executed:

#!/bin/bash
# Check if Tailwind configuration files exist
echo "Checking for Tailwind configuration files..."
find client -name "tailwind.config.js" -o -name "postcss.config.js"

Length of output: 164

Add missing Tailwind CSS configuration files

It looks like neither client/tailwind.config.js nor client/postcss.config.js exists—both are required for Tailwind to compile your styles. Please add them under the client/ folder. For example:

  • Generate the default Tailwind config: 
    cd client
npx tailwindcss init
  • Create client/postcss.config.js with: 
    module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

This will ensure Tailwind CSS is properly set up and your styles are processed as expected.

},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Comment on lines +16 to +21
Copy link

@greptile-apps greptile-apps bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Add a 'lint' script to ensure code quality

Suggested change
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.{js,jsx}"
},

"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
20 changes: 20 additions & 0 deletions client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="NeuralInk - AI-powered article generator" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>NeuralInk</title>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>

</html>
18 changes: 18 additions & 0 deletions client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React, { useState } from 'react'
Copy link

@greptile-apps greptile-apps bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: useState is imported but never used in this component

Suggested change
import React, { useState } from 'react'
import React from 'react'

import ArticleGenerator from './components/ArticleGenerator'
import './App.css'
Copy link

@coderabbitai coderabbitai bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify the App.css file existence

The code imports App.css, but this file wasn't included in the review files.

Make sure the App.css file exists in the client/src directory to avoid import errors.

🏁 Script executed:

#!/bin/bash
# Check if App.css exists
if [ -f client/src/App.css ]; then
  echo "App.css exists"
else
  echo "WARNING: App.css is missing but imported in App.js"
fi

Length of output: 142

Missing App.css in client/src

The import on line 3 of client/src/App.js references ./App.css, but that file isn’t present in the client/src directory. This will cause a build error.

• Add App.css to client/src/
• Or remove the import './App.css' statement if the stylesheet is no longer needed


function App() {
return (
<div className="min-h-screen bg-gray-100">
<div className="container mx-auto px-4 py-8">
<div className="max-w-2xl mx-auto">
<h1 className="text-4xl font-bold text-center mb-8 text-gray-800">NeuralInk</h1>
<ArticleGenerator />
</div>
</div>
</div>
)
}

export default App
85 changes: 85 additions & 0 deletions client/src/components/ArticleGenerator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React, { useState } from 'react'
import axios from 'axios'

const ArticleGenerator = () => {
const [topic, setTopic] = useState('')
const [article, setArticle] = useState('')
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')

const generateArticle = async (e) => {
e.preventDefault()
if (!topic.trim()) {
setError('Please enter a topic')
return
}

setLoading(true)
setError('')
setArticle('')

try {
const response = await axios.post('http://localhost:3000/api/generate-article', { topic })
Copy link

@coderabbitai coderabbitai bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Avoid hardcoded API URLs in the client code.

The API URL is hardcoded to http://localhost:3000, which will cause issues in production environments. Consider using environment variables instead.

- const response = await axios.post('http://localhost:3000/api/generate-article', { topic })
+ const response = await axios.post(`${process.env.REACT_APP_API_URL || ''}/api/generate-article`, { topic })

Also add this variable to your environment files:

  • .env.development: REACT_APP_API_URL=http://localhost:3000
  • .env.production: Keep it empty or set to your production API URL
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const response = await axios.post('http://localhost:3000/api/generate-article', { topic })
const response = await axios.post(`${process.env.REACT_APP_API_URL || ''}/api/generate-article`, { topic })

setArticle(response.data.article)
} catch (err) {
setError(err.response?.data?.error || 'Failed to generate article')
} finally {
setLoading(false)
}
}

return (
<div>
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
<form onSubmit={generateArticle}>
<div className="mb-4">
<label htmlFor="topic" className="block text-gray-700 text-sm font-bold mb-2">
Enter a topic:
</label>
<input
type="text"
id="topic"
value={topic}
onChange={(e) => setTopic(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="e.g., Artificial Intelligence, Climate Change, etc."
/>
Comment on lines +39 to +46
Copy link

@greptile-apps greptile-apps bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Input field missing maxLength attribute to prevent excessive topic lengths that could overload the API.

</div>
<button
type="submit"
disabled={loading}
className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-200 disabled:opacity-50"
>
{loading ? 'Generating...' : 'Generate Article'}
</button>
</form>
</div>

{loading && (
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
<div className="flex items-center justify-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
<span className="ml-2 text-gray-600">Generating article...</span>
</div>
</div>
)}

{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
<span className="block sm:inline">{error}</span>
</div>
)}

{article && (
<div className="bg-white rounded-lg shadow-md p-6">
<h2 className="text-2xl font-semibold mb-4 text-gray-800">Generated Article</h2>
<div className="prose max-w-none text-gray-700 whitespace-pre-line">
{article}
</div>
</div>
)}
</div>
)
}

export default ArticleGenerator
11 changes: 11 additions & 0 deletions client/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
Copy link

@coderabbitai coderabbitai bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify the index.css file exists

The code imports index.css, but this file wasn't included in the review files.

Make sure the index.css file exists in the client/src directory to avoid import errors.

🏁 Script executed:

#!/bin/bash
# Check if index.css exists
if [ -f client/src/index.css ]; then
  echo "index.css exists"
else
  echo "WARNING: index.css is missing but imported in index.js"
fi

Length of output: 152

Missing client/src/index.css import

The import of index.css in client/src/index.js will fail because the file does not exist.

• File: client/src/index.js
Line: 3 (import './index.css')

Please add the missing index.css file (or update/remove the import) to prevent runtime errors.

import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
"main": "server.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
"dev": "nodemon server.js",
"client": "cd client && npm start",
"dev:full": "concurrently \"npm run dev\" \"npm run client\""
},
"dependencies": {
"express": "^4.18.2",
Expand All @@ -14,6 +16,7 @@
"openai": "^4.24.1"
},
"devDependencies": {
"nodemon": "^3.0.2"
"nodemon": "^3.0.2",
"concurrently": "^8.2.2"
}
}
94 changes: 0 additions & 94 deletions public/index.html
View file
Open in desktop

This file was deleted.

12 changes: 10 additions & 2 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ require('dotenv').config()
const express = require('express')
const cors = require('cors')
const OpenAI = require('openai')
const path = require('path')

const app = express()
const port = process.env.PORT || 3000
Expand All @@ -14,9 +15,8 @@ const openai = new OpenAI({
// Middleware
app.use(cors())
app.use(express.json())
Comment on lines 16 to 17
Copy link

@greptile-apps greptile-apps bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: CORS is enabled globally without restrictions. Consider configuring specific origins in production

app.use(express.static('public'))

// Generate article endpoint
// API Routes
app.post('/api/generate-article', async (req, res) => {
try {
const { topic } = req.body
Expand Down Expand Up @@ -49,6 +49,14 @@ app.post('/api/generate-article', async (req, res) => {
}
})

// Serve static files from the React app
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, 'client/build')))
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'))
})
}

app.listen(port, () => {
console.log(`Server running on port ${port}`)
})