Our project is to build a dynamic web application that queries at least two APIs and presents useful and/or interesting information to the user. We use Node.js and Express, which will involve serving a static web page, creating JSON endpoints, and generating dynamic content through both server-side and client-side code.
- Node.js and npm installed
-
Clone the repository:
git clone https://github.com/fac31/fahan-fred-full-stack.git cd https://github.com/fac31/fahan-fred-full-stack.git
-
Checkout the main branch and pull the latest changes:
git checkout main git pull origin main
-
Install dependencies:
npm install
-
Build the project:
npm run build
-
Start the server:
npm start
-
Run the development server (in a separate terminal):
npm run dev
Make sure to create a .env
file with the necessary environment variables:
NEWS_API_KEY=
OPENAI_API_KEY=
project-root/
│
├── public/
│ ├── index.html
│ ├── script.js
│ └── style.css
│
├── server.js
├── webpack.config.js
├── package.json
└── .env
-
public/: Contains all the client-side files.
- index.html: The main HTML file that includes the structure of our webpage.
- script.js: The main JavaScript file that handles fetching data, creating dynamic content, and integrating the chat component and news reel.
- style.css: The main CSS file that handles the styling of the webpage.
-
server.js: Sets up the Express server, handles API endpoints, and serves static files.
- API Endpoints:
/api/data
: Fetches data from the News API./chat-api
: Handles chat requests using the OpenAI API.
- API Endpoints:
-
webpack.config.js: Configuration file for Webpack to bundle JavaScript and CSS files.
- Entry Point:
./public/script.js
- Output:
./public/bundle.js
- Dev Server: Runs on port 8080, proxies API requests to the Express server on port 3000.
- Entry Point:
-
package.json: Contains project metadata and dependencies.
- Scripts:
build
: Bundles the project using Webpack.start
: Starts the Express server.dev
: Starts the Webpack development server.
- Scripts:
-
.env: Stores environment variables like API keys.
- Contact Details: Contact Fahan Ibrahim-Hashi and Fred Hartley for any questions