Skip to content

Add react for frontend #1

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
srzainab wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add react for frontend #1

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 24, 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 dependencies required by Tailwind CSS

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

"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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 24, 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'

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 })
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 24, 2025

Choose a reason for hiding this comment

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

style: Missing maxLength attribute to prevent excessively long topics 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'
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())
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'))
})
}
Comment on lines +53 to +58
Copy link

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

Choose a reason for hiding this comment

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

logic: No fallback route for development environment - client requests may 404 when not in production


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