# Project export: Friender

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2024
- Tagline: Friender:For adult connections with advanced matching. Say goodbye to social isolation. Join to expand your circle, foster meaningful relationships, and explore shared passions with like-minded adults
- Devpost: https://devpost.com/software/friender-vtj2rp
- GitHub: https://github.com/kdaga81/treehacks
- Team: 1 GitHub contributor(s) — kdaga81 (3 commits)

## Devpost submission (written by the team)

### Overview

Friender was inspired by the growing challenge adults face in establishing meaningful connections. The increasing prevalence of social isolation sparked the idea to create a platform that addresses this issue head-on, fostering genuine friendships among like-minded individuals. Friender is a revolutionary platform designed to help adults find and connect with friends who share common interests. The app utilizes advanced algorithms to match users based on their hobbies and preferences, facilitating the creation of authentic connections and combating social isolation. The Friender project was brought to life through collaborative efforts, combining innovative technology and user-centric design. Our team worked diligently to create a user-friendly interface and implement sophisticated matching algorithms to enhance the overall user experience. Developing Friender posed various challenges, including refining the matching algorithms to ensure accuracy and addressing technical complexities. Overcoming these hurdles required a strategic approach and collaborative problem-solving. We are proud to have created a platform that not only addresses a prevalent societal challenge but also fosters a sense of community and connection among users. Friender's success lies in its ability to facilitate meaningful relationships and combat social isolation. Throughout the development of Friender, our team gained valuable insights into the importance of user experience, algorithmic precision, and the impact of technology on social well-being. The project taught us the significance of addressing real-world issues through innovative solutions. Looking ahead, Friender aims to continuously evolve and enhance its features. The next phase includes refining algorithms, expanding user outreach, and incorporating user feedback to ensure the platform remains at the forefront of fostering genuine connections among adults.

## README (from the GitHub repository)

No README available.

## Detected evidence (automated analysis)

Indexed codebase: 3 recognized source files, 2 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (6 of 6)

```
.DS_Store
.gitattributes
images/.DS_Store
index.html
script.js
styles.css
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- Merge pull request #1 from kdaga81/dev
- Initial commit
- Initial commit

## Key source files (fetched from GitHub, selected and truncated for size)

### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tinder-like UI</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container" id="cardContainer">
        <!-- Cards will be dynamically added here -->
    </div>
    <script src="script.js"></script>
</body>
</html>

```

### styles.css

```css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.card-container {
    position: relative;
    width: 300px;
    height: 400px;
}

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card.left {
    transform: translateX(-300px) rotate(-10deg);
}

.card.right {
    transform: translateX(300px) rotate(10deg);
}

```

### script.js

```javascript
const cardContainer = document.getElementById('cardContainer');
let currentIndex = 0;

// Sample data (images)
const images = [
    'image1.jpeg',
    'image2.jpeg',
    'image3.jpeg',
    'image4.jpeg',
    'image5.jpeg'
];
//test
// Load initial cards
loadCards();

function loadCards() {
    for (let i = currentIndex; i < currentIndex + 2; i++) {
        if (i < images.length) {
            const card = document.createElement('div');
            card.classList.add('card');
            card.style.zIndex = images.length - i;
            const imagePath = 'images/' + images[i]; // Updated image path
            card.innerHTML = `<img src="${imagePath}" alt="Card Image">`; // Updated image path
            card.addEventListener('click', handleCardClick);
            cardContainer.appendChild(card);
        }
    }
}

function handleCardClick(event) {
    const card = event.target.closest('.card');
    if (!card) return;

    const x = event.clientX - card.getBoundingClientRect().left;
    const cardCenterX = card.offsetWidth / 2;

    if (x < cardCenterX) {
        card.classList.add('left');
        setTimeout(() => card.remove(), 300);
    } else {
        card.classList.add('right');
        setTimeout(() => card.remove(), 300);
    }

    currentIndex++;
    if (currentIndex + 1 > images.length) {
        currentIndex = 0;
    }
    loadCards();
}

```