https://github.com/jerinpious/contact-list

A contact list management system using python Flask as backend and React.js as frontend
https://github.com/jerinpious/contact-list

Last synced: about 1 month ago
JSON representation

A contact list management system using python Flask as backend and React.js as frontend

• Host: GitHub
• URL: https://github.com/jerinpious/contact-list
• Owner: jerinpious
• Created: 2024-05-17T16:04:04.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-17T16:22:12.000Z (9 months ago)
• Last Synced: 2024-05-17T18:34:22.132Z (9 months ago)
• Language: JavaScript
• Size: 45.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Contact List Project

## Overview

This project is a basic Contact List application built with a Flask backend and a React frontend. The application allows users to create, read, update, and delete contacts. It uses SQLite as the database.

## Requirements

### Backend

- Python 3.x

- Flask

- Flask-SQLAlchemy

- Flask-CORS

### Frontend

- Node.js

- React

### Setup Instructions

#### Backend

- Clone the Repository

~~~

git clone 

cd 

~~~

- Create a Virtual Environment

~~~

python -m venv venv

source venv/bin/activate  # On Windows use `venv\Scripts\activate`

~~~

- Install Dependencies

~~~

pip install flask flask_sqlalchemy flask_cors

~~~

- Run the Flask Application

 - cd to backend

~~~

python main.py

~~~

The backend will be running on http://127.0.0.1:5000.

#### Frontend

- Navigate to the Frontend Directory

~~~

cd frontend

~~~

- Install Dependencies

~~~

npm install

~~~

- Run the React Application

~~~

npm run dev

~~~

The frontend will be running on http://localhost:3000.

### Project Structure

#### Backend

- main.py: Contains the main Flask application code, including route definitions and database setup.

- config.py: Configuration file for the Flask application.

- models.py: Defines the database models.

#### Frontend

- App.jsx: Main component of the React application, rendering the contact list and forms.

- ContactList.jsx: Component for displaying the list of contacts.

- ContactForm.jsx: Component for creating and updating contacts.

### API Endpoints

~~~

GET /contacts: Retrieves all contacts.

POST /create_contact: Creates a new contact.

PATCH /update_contact/: Updates an existing contact.

DELETE /delete_contact/: Deletes a contact.

~~~