This project is a contact management application built with Python Flask as the backend and React as the frontend. The app supports basic CRUD operations (Create, Read, Update, Delete) and implements basic error handling. The backend utilizes SQLAlchemy as the database ORM for data storage.
![image](https://private-user-images.githubusercontent.com/100280753/309973211-6e9c424f-cee9-4fae-998e-012c51af83b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ5MDU3OTMsIm5iZiI6MTcyNDkwNTQ5MywicGF0aCI6Ii8xMDAyODA3NTMvMzA5OTczMjExLTZlOWM0MjRmLWNlZTktNGZhZS05OThlLTAxMmM1MWFmODNiMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyOVQwNDI0NTNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lZmRmNmY0MmQyNGQyODg3OGQyNzY1NzZiYWU1ZjIxZGI3NDA5Y2YwNzgwOGQ5MDAxMGM2Y2QyNjYyMzJkMGExJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.uPHbWvFfZ2Bya6UJxy1dqno4p8VNH3PbfC4hT0O7OHU)
- Create: Add new contacts with their first name, last name, and email.
- Read: View a list of contacts with their details.
- Update: Modify existing contact information.
- Delete: Remove unwanted contacts from the database.
- Error Handling:
- Ensure non-empty entries for first name, last name, and email fields.
- Prevent the creation of contacts with duplicate email addresses.
-
Backend:
- Flask: A lightweight web framework for building the backend.
- SQLAlchemy: An ORM for working with databases in Flask applications.
-
Frontend:
- React: A JavaScript library for building user interfaces.
- Python 3.x
- Node.js
- npm
-
Clone the repository:
git clone https://github.com/YouXuan2010/My-Contact-App.git
-
Navigate to the backend directory and install Python dependencies:
cd backend pip install -r requirements.txt
-
Navigate to the frontend directory and install npm packages:
cd frontend npm install
-
Start the Flask backend:
cd backend python main.py
-
Start the React frontend:
cd frontend npm run dev
- GET /contacts
- Get a list of all contacts.
- Response:
{ "contacts": [ {"id": 1, "first_name": "John", "last_name": "Doe", "email": "john.doe@example.com"}, ] }
- POST /create_contact
- Create a new contact.
- Request:
{"firstName": "John", "lastName": "Doe", "email": "john.doe@example.com"}
- Response:
{"message": "Contact created successfully"}
- Error Response:
{"message": "You must provide a first name, last name, and email"}
- PATCH /update_contact/{user_id}
- Update information for a specific contact.
- Request:
{"firstName": "Updated John", "lastName": "Updated Doe", "email": "updated.john.doe@example.com"}
- Response:
{"message": "Contact updated successfully"}
- Error Response:
{"message": "Contact not found"}
- DELETE /delete_contact/{user_id}
- Delete a contact.
- Response:
{"message": "Contact deleted successfully"}
- Error Response:
{"message": "Contact not found"}