adxdits / polypo-landing-page

Flask & React Application

This project is a web application built with a Flask backend and a React frontend. The application allows users to add, view, and delete items from a list. Each item includes a name, description, and image URL.

Table of Contents

• Prerequisites
• Installation
• Running the Application
• Project Structure
• API Endpoints
• Acknowledgements

Prerequisites

Before you begin, ensure you have met the following requirements:

• Python 3.x installed on your machine
• Node.js and npm (Node Package Manager) installed
• Basic knowledge of Python, Flask, and React

Installation

Backend

1. Clone the repository:

   git clone https://github.com/adxdits/Polypo-landing-page/
   cd Polypo-landing-page 
   cd my_flask_app

2. Create a virtual environment:

   python -m venv venv

3. Activate the virtual environment:
   • On Windows:

     venv\Scripts\activate

   • On macOS and Linux:

     source venv/bin/activate

4. Install the required Python packages:

   pip install flask flask-cors

5. Set up the SQLite database:

   python
   >>> import sqlite3
   >>> conn = sqlite3.connect('product.db')
   >>> cursor = conn.cursor()
   >>> cursor.execute('''
   CREATE TABLE product (
           id INTEGER PRIMARY KEY,
           name TEXT,
           image_url TEXT,
           description TEXT
   )
   ''')
   >>> conn.commit()
   >>> conn.close()
   >>> exit()

Frontend

1. Navigate to the frontend directory:

   cd Polypo-landing-page

2. Install the required npm packages:

   npm install

Running the Application

Backend

1. Ensure you are in the project's root directory and the virtual environment is activated.
2. Start the Flask server:

   flask run

Frontend

1. Ensure you are in the frontend directory.
2. Start the React development server:

   npm start

3. Open your browser and navigate to http://localhost:3000.

Project Structure

Polypo-landing-page/
│
├── my_flask_app/
│   ├── app.py
│   ├── product.db
│   └── ...
│
│├── public/
│├── src/
│   │   ├── components/
│   │   │   ├── Items.js
│   │   │   ├── MenuBar.js
│   │   │   ├── WelcomeMessage.js
│   │   │   └── Footer.js
│   │   ├── App.css
│   │   ├── App.js
│   │   └── index.js
│   ├── package.json
│   └── ...
│
├── README.md
└── ...

API Endpoints

GET /product

Retrieve all products.

Response:

[
    {
        "id": 1,
        "name": "Item 1",
        "image_url": "http://example.com/image1.jpg",
        "description": "Description 1"
    },
    ...
]

POST /product

Add a new product.

Request:

{
    "name": "New Item",
    "image_url": "http://example.com/new-image.jpg",
    "description": "New Description"
}

Response:

{
    "id": 2,
    "name": "New Item",
    "image_url": "http://example.com/new-image.jpg",
    "description": "New Description"
}

DELETE /product/<id>

Delete a product by ID.

Response:

{
    "message": "Product deleted successfully"
}

Acknowledgements

This project was developed using Flask and React. Special thanks to the open-source commmunity for providing these tools and resources.