Account Map • Hackathon Version Polished

Description

This web application helps users manage their different login methods to each account they have made.

Team Members

• Andrii Malakhovtsev - malakhovtsev.2@wright.edu
• Brianna Persinger - persinger.9@wright.edu
• Owen Kemp - kemp.56@wright.edu
• Sulav Pradhan - pradhan.49@wright.edu
• Wens Kedar Barambona - barambona.3@wright.edu

About page with more members information

Awards

🏆 Awarded "Riverside Research's CyberSecurity Stalwarts"
🏆 Recommended by "Wright State University CEG/CS Alumni Society"

History

Planning phase

Trello Collaboration

How to Run

Prerequisites

• Docker and Docker Compose Installed
• Node.js 24+ (for local development without Docker)
• Git

Steps

1. Clone the Repository git clone https://github.com/andrii-malakhovtsev/accountmap.git

2. Install Docker

3. Set Working Directory cd accountmap

4. Docker Compose docker compose up -d

5. See the frontend at http://localhost:8080

   • Frontend: http://localhost:8080
   • Backend API: http://localhost:8081
   • PostgreSQL: http://localhost:5432

6. Stop all services docker compose down

7. Clean up volumes docker compose down -v

Local Development

Backend Setup

cd backend
npm install
npm start

Required environment variables (or use defaults):

PORT=8081
DATABASE_URL=postgres://demouser:demopass@postgres:5432/demodb
GEMINI_API_KEY=key

Frontend Setup

cd frontend
npm install
npm run dev

Environment variable

REACT_APP_API_URL=<http://localhost:8081>

Architecture

_______________________________________
Frontend (React)
Port: 8080
- User Interface with JSX components
- Graphs (react-force-graph)
- State Management (zustand)
_______________________________________
|
| Http Requests
v
_______________________________________
Backend API (Express.js)
- Port: 8081
- RESTful endpoints
- Prisma Setup (Database)
_______________________________________
|
| Prisma Interaction
v
_______________________________________
PostgresSQL DB
Port: 5432
- User Tables
- Relational Data
_______________________________________

Project Structure

Backend

prisma
   prisma.schema # The database schemas
   migrations # Database migrations
src
   lib
      prisma.ts # Exposes Prisma Connection
      utils.ts # Exposes Express.js
   index.ts # Setup for Express.js
   routes # Contains the endpoints
Dockerfile # Docker
package.json # Dependencies

Frontend

components # Contains the components used in the UI
src
   assets # Images and such
   pages # Map or List Views
   store # State Management
   utils
      iconService.js # Icons
   App.jsx # Main UI
Dockerfile # Docker
package.json # Dependencies

Images

3D View

2D View

List Connections View

List Accounts View