SpendShield

SpendShield is a gamified social media finance app designed to make saving money fun, competitive, and engaging! By combining peer support, friendly competition, and smart financial insights, SpendShield helps users develop healthy spending habits along with their friends.

Devpost | Video Demo | Live Demo

Features

• Interactive Financial Dashboard: Visualize spending patterns through intuitive charts and graphs
• Social Feed: See friends' financial wins and offer support through likes and comments
• Savings Leaderboard: Compete with friends based on savings percentage
• Personalized Insights: Get actionable recommendations based on spending habits
• Achievement System: Earn badges and rewards for hitting financial milestones
• Friendly Challenges: Compete with friends on specific saving goals
• Trend Indicators: Track improvement or decline in financial behaviors

Tech Stack

• Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn UI
• Data Visualization: Recharts
• Icons: Lucide Icons

Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/bruvato/spend-shield.git
   cd hack-illinois

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open http://localhost:3000 in your browser to see the application

Usage

Dashboard

The main dashboard provides an overview of your financial health, including:

• Recent transactions
• Spending by category
• Spending over time
• Quick actions for adding transactions

Social Feed

Connect with friends to:

• Share financial achievements
• Like and comment on friends' transactions
• Get inspired by others' financial journeys

Leaderboard

Compare your saving progress with friends:

• See who's saving the highest percentage of their income
• Track your ranking over time
• Celebrate improvements with trend indicators

Project Structure

/
├── app/                  # Next.js app router
│   ├── page.tsx          # Home page
│   ├── layout.tsx        # Root layout
│   └── user/             # User-specific routes
├── components/           # Reusable UI components
│   ├── ui/               # Base UI components
│   ├── charts/           # Data visualization components
│   └── analytics/        # Financial analytics components
├── lib/                  # Utility functions and helpers
├── public/               # Static assets
└── styles/               # Global styles

Contributing

We welcome contributions to SpendShield! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• HackIllinois for the opportunity to build this project
• All contributors and team members who helped bring SpendShield to life

---

Built with ❤️ from RCM Games