https://github.com/marharita08/family-tree
An application for managing and visualizing a family tree.
https://github.com/marharita08/family-tree
expressjs family-tree react redux redux-saga typescript
Last synced: 7 months ago
JSON representation
An application for managing and visualizing a family tree.
- Host: GitHub
- URL: https://github.com/marharita08/family-tree
- Owner: marharita08
- Created: 2024-11-20T09:43:18.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-11-23T17:04:13.000Z (11 months ago)
- Last Synced: 2025-01-26T08:26:30.400Z (9 months ago)
- Topics: expressjs, family-tree, react, redux, redux-saga, typescript
- Language: TypeScript
- Homepage:
- Size: 90.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Family Tree Application
An application for managing and visualizing a family tree.
The backend is built with **Express.js**, and the frontend is powered by **React** and **Vite**.
---
## Features
- Add, update, and delete family members.
- View a complete family tree structure as an accordion menu.
---
## Backend
### Tech Stack
- **Node.js**
- **Express.js**
- **PostgreSQL**
### .env Configuration
Create a `.env` file in the root of the backend directory with the following content:
PORT=3001
DB_HOST=localhost
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=password
DB_DATABASE=family_tree
### API Endpoints
| Method | Endpoint | Description |
|--------|---------------------|-----------------------------------|
| POST | `/` | Add a new person. |
| PUT | `/:id` | Update an existing person. |
| DELETE | `/:id` | Delete a person by ID. |
| GET | `/` | Get a list of all persons. |
| GET | `/family-tree` | Retrieve the family tree. |
---
## Frontend
### Tech Stack
- **React**
- **Vite**
- **TypeScript**
### .env Configuration
Create a `.env` file in the root of the frontend directory with the following content:
VITE_API_URL=http://localhost:3001/
## Running the Application
### Backend
1. Navigate to the backend directory:
`cd backend`
2. Install dependencies:
`npm install`
3. Start the server:
`npm start`
4. The backend server will run at [http://localhost:3001](http://localhost:3001).
---
### Frontend
1. Navigate to the frontend directory:
`cd frontend`
2. Install dependencies:
`npm install`
3. Start the development server:
`npm run dev`
4. Open the application in your browser at [http://localhost:5173](http://localhost:5173).