Full-Stack Friends List App

A simple full-stack friends list application built to practice CRUD operations and frontend-backend integration.
The backend is implemented with Python Flask and SQLAlchemy, while the frontend is built with React and Chakra UI for a clean and interactive interface.

---

🚀 Overview

The Friends List App allows users to create, view, update, and delete friends in a digital contact book.

Key features and learning points:

• CRUD Functionality: Users can add friends with details like first name, last name, job, and a short description, edit them, and remove entries.
• Interactive Cards: Each friend is displayed in a card format, showing their details in a visually appealing way.
• Full-Stack Integration: Practiced connecting React frontend to Flask backend with API requests.
• Frontend & UI: Used Chakra UI to build responsive and clean user interfaces.
• Learning Focus: Explored basic CORS handling, React-dom concepts, and ORM usage with Flask SQLAlchemy.

This project was done purely to strengthen full-stack development skills, with emphasis on CRUD operations, data flow, and frontend-backend integration.

---

🛠️ Tech Stack

Frontend

• React
• Chakra UI
• JavaScript

Backend

• Python Flask
• SQLAlchemy ORM
• SQLite
• REST API

Architecture

• Monolithic full-stack application
• Clear separation of frontend and backend
• Well-structured API routes and services

---

📄 Features

✔ User Features

• Add, edit, and delete friend entries
• View friend cards with name, job, and description
• Responsive and clean UI

✔ Technical Features

• RESTful API with Flask
• ORM with SQLAlchemy for database operations
• Frontend state management using React hooks
• Basic handling of CORS for frontend-backend communication

---

📚 Getting Started

Install Dependencies

# 1. Install backend dependencies
cd backend
pip install -r requirements.txt

# 2. Install frontend dependencies
cd frontend
npm install

# 3. Run backend
cd backend
flask run

# 4. Run frontend
cd frontend
npm start
Open http://localhost:3000
 to view the app in your browser.

👤 Author

Nesterov Egor
BSc in Computer Science
Software Engineer Intern | Full-stack Developer Intern

Contact:

• 📧 Email: egor.nesterov2002@gmail.com
• 🔗 LinkedIn: linkedin.com/in/enesterov22
• 💬 Telegram: t.me/Zaymerstone