Empower Connections, Elevate Experiences, Inspire Engagement

Built with the tools and technologies:

ElderLadder.live is a web platform designed to help young adults meaningfully connect with older adults through guided interactions, curated stories, and simple, actionable task cards.

Instead of leaving conversations to chance, ElderLadder provides lightweight prompts and content experiences that make it easier to start, sustain, and deepen cross-generational engagement.

• Home (HomePage.js): Landing experience with a guided flow and rotating background visuals.
• Posts (PostsPage.js): Carousel-style browsing experience for posts and stories.
• Cards (CardsPage.js): Interactive survey (e.g., gender/difficulty) that fetches and displays task card content with modal feedback.

ElderLadder/
├── package.json
├── package-lock.json
├── postcss.config.js
├── tailwind.config.js
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
└── src/
    ├── App.js
    ├── App.css
    ├── index.js
    ├── index.css
    ├── HomePage.js
    ├── PostsPage.js
    ├── CardsPage.js
    ├── animations.css
    ├── reportWebVitals.js
    ├── setupTests.js
    └── images/

🚀 Getting Started 🌟 Prerequisites

Node.js: LTS version recommended

npm: Comes bundled with Node.js

⚡ Installation

Clone the repository:

git clone <your-repo-url>
Navigate to the project directory:

cd ElderLadder
Install dependencies:

npm install

🔆 Usage

Start the local development server:

npm start
The app will be available at http://localhost:3000.

🌠 Testing

Run the test suite in watch mode:

npm test

Use the following commands to manage the development lifecycle:

If connecting to a backend, create a .env file in the root directory:

.env

REACT_APP_API_BASE_URL=http://localhost:8080

REACT_APP_API_BASE_URL=http://localhost:8080
In your code, access it via:

In your code, access it via:

JavaScript

const baseURL = process.env.REACT_APP_API_BASE_URL;

• Cross-Generational Connection Engine: Built a platform dedicated to fostering meaningful engagement between young and older adults through curated content.
• Interactive Task Cards: Developed a survey-based system (gender/difficulty) that dynamically fetches and displays actionable interaction prompts.
• Story Carousel & Browsing: Implemented a smooth, card-style UI for browsing community posts and elder stories.
• Responsive SPA Architecture: Engineered a Single Page Application using React and React Router for seamless client-side navigation.
• Modern UI/UX Design: Integrated Tailwind CSS for a responsive layout and animations.css for fluid visual transitions.

🤝 Contributing Fork the repository.

Create a new branch: git checkout -b feature/.

Commit your changes: git commit -m "Add ".

Push to the branch: git push origin feature/.

Open a Pull Request.