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.
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
- Clone the repository:
git clone https://github.com/adxdits/Polypo-landing-page/ cd Polypo-landing-page cd my_flask_app
- Create a virtual environment:
python -m venv venv
- Activate the virtual environment:
- On Windows:
venv\Scripts\activate
- On macOS and Linux:
source venv/bin/activate
- On Windows:
- Install the required Python packages:
pip install flask flask-cors
- 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()
- Navigate to the
frontend
directory:cd Polypo-landing-page
- Install the required npm packages:
npm install
- Ensure you are in the project's root directory and the virtual environment is activated.
- Start the Flask server:
flask run
- Ensure you are in the
frontend
directory. - Start the React development server:
npm start
- Open your browser and navigate to http://localhost:3000.
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 └── ...
Retrieve all products.
Response:
[
{
"id": 1,
"name": "Item 1",
"image_url": "http://example.com/image1.jpg",
"description": "Description 1"
},
...
]
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 a product by ID.
Response:
{
"message": "Product deleted successfully"
}
This project was developed using Flask and React. Special thanks to the open-source commmunity for providing these tools and resources.