From 998fea23dead5574590c8786bbaddf97bb6da758 Mon Sep 17 00:00:00 2001 From: Syeda Zainab <83520846+srzainab@users.noreply.github.com> Date: Fri, 25 Apr 2025 08:34:29 +1000 Subject: [PATCH] Enhance NeuralInk project by adding client-side React application, including article generation component, and updating server to serve static files. Introduce new scripts for development and client start in package.json. --- client/package.json | 40 ++++++++++ client/public/index.html | 20 +++++ client/src/App.js | 18 +++++ client/src/components/ArticleGenerator.js | 85 ++++++++++++++++++++ client/src/index.js | 11 +++ package.json | 7 +- public/index.html | 94 ----------------------- server.js | 12 ++- 8 files changed, 189 insertions(+), 98 deletions(-) create mode 100644 client/package.json create mode 100644 client/public/index.html create mode 100644 client/src/App.js create mode 100644 client/src/components/ArticleGenerator.js create mode 100644 client/src/index.js delete mode 100644 public/index.html diff --git a/client/package.json b/client/package.json new file mode 100644 index 0000000..7bfc1d1 --- /dev/null +++ b/client/package.json @@ -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", + "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" + ] + } +} \ No newline at end of file diff --git a/client/public/index.html b/client/public/index.html new file mode 100644 index 0000000..06d4f83 --- /dev/null +++ b/client/public/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + NeuralInk + + + + +
+ + + \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js new file mode 100644 index 0000000..0e0a209 --- /dev/null +++ b/client/src/App.js @@ -0,0 +1,18 @@ +import React, { useState } from 'react' +import ArticleGenerator from './components/ArticleGenerator' +import './App.css' + +function App() { + return ( +
+
+
+

NeuralInk

+ +
+
+
+ ) +} + +export default App \ No newline at end of file diff --git a/client/src/components/ArticleGenerator.js b/client/src/components/ArticleGenerator.js new file mode 100644 index 0000000..0de1114 --- /dev/null +++ b/client/src/components/ArticleGenerator.js @@ -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 ( +
+
+
+
+ + 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." + /> +
+ +
+
+ + {loading && ( +
+
+
+ Generating article... +
+
+ )} + + {error && ( +
+ {error} +
+ )} + + {article && ( +
+

Generated Article

+
+ {article} +
+
+ )} +
+ ) +} + +export default ArticleGenerator \ No newline at end of file diff --git a/client/src/index.js b/client/src/index.js new file mode 100644 index 0000000..cc59ca7 --- /dev/null +++ b/client/src/index.js @@ -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( + + + +) \ No newline at end of file diff --git a/package.json b/package.json index af748f9..15e0247 100644 --- a/package.json +++ b/package.json @@ -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", @@ -14,6 +16,7 @@ "openai": "^4.24.1" }, "devDependencies": { - "nodemon": "^3.0.2" + "nodemon": "^3.0.2", + "concurrently": "^8.2.2" } } \ No newline at end of file diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 646530b..0000000 --- a/public/index.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - NeuralInk - AI Article Generator - - - - - -
-
-

NeuralInk

- -
-
- - -
- -
- -
-
-
- Generating article... -
-
- - -
-
- - - - - \ No newline at end of file diff --git a/server.js b/server.js index f78964f..96644cd 100644 --- a/server.js +++ b/server.js @@ -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 @@ -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 @@ -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}`) }) \ No newline at end of file