PenguinSteps

PenguinSteps is a senior-friendly web assistant designed to help older adults navigate everyday questions with ease. Built with simplicity, accessibility, and clarity in mind, it offers AI-powered guidance through step-by-step explanations in plain language.

Live Demo: https://penguinsteps.netlify.app

---

Features

Conversational Interface

• A welcoming homepage with the prompt: “What can I help you with today?”
• Users can type in questions and receive simplified, step-by-step answers.
• Integrated with an AI backend to provide natural, intelligent responses.

Accessibility Controls

• Adjustable font size and brightness to suit visual preferences.
• (Planned) Text-to-speech support to read answers aloud.

---

Getting Started

Follow the instructions below to run PenguinSteps on your computer.

---

Prerequisites

Before you begin, make sure the following tools are installed on your system:

1. Code Editor

• Download and install Visual Studio Code (recommended)
• Open it once installed — you'll use this to edit and run the project

---

System Requirements by OS

Windows

1. Install Node.js

• Go to: https://nodejs.org
• Download and install the LTS version

2. Install Git

• Go to: https://git-scm.com/downloads
• Download and install Git

3. Verify Installations

Open Command Prompt and run:

node -v
npm -v
git --version

macOS

1. Install Node.js

• Go to: https://nodejs.org
• Download and install the LTS version

2. Install Git

• Download from: https://git-scm.com/downloads
• Or install via Homebrew:

  brew install git

3. Verify Installations

Open terminal and run:

node -v
npm -v
git --version

Linux (Ubuntu/Debian)

Open Terminal and run:

sudo apt update
sudo apt install -y nodejs npm git

Verify installations:

node -v
npm -v
git --version

Installation Instructions

1. Clone the Repository

git clone https://github.com/yourusername/penguinsteps.git
cd penguinsteps

---

2. Install Project Dependencies

npm install

---

3. Create Environment Variables

Create a file named .env in the root folder and add the following:

OPENAI_API_KEY=given-openai-key-here

Note: This key is required to connect to OpenAI. Do not share them publicly.

---

4. Run the Development Server

npm run dev

This command uses netlify dev to serve both the React frontend and backend functions locally. Note: The app uses Netlify Functions and won’t work properly with npm start. Please use npm run dev.

If successful, Netlify CLI will show:

Server now ready on http://localhost:8888

---

Tech Stack

• React.js – Front-end JavaScript library for building UI
  
• OpenAI API – AI backend for generating helpful, natural-sounding answers
  
• WebSpeech API- To translate voice into text
  
• CSS – Styling and responsive design
  
• Netlify – Hosting and deployment

Future Enhancements

• Implement speak-aloud functionality
  
• Expand support for more complex question patterns
  
• Improve mobile experience and accessibility
  
• Support multiple languages for diverse users

Acknowledgements

• Created with the goal of helping seniors use technology with confidence.
  
• Thanks to all testers, users, and contributors who provided feedback
  
• Icons and UI elements by Font Awesome