Learning Journal PWA with Flask Backend

A Progressive Web Application (PWA) for documenting your learning journey, now with a Flask backend for server-side data management.

Features

• 📝 Create Journal Entries - Document your learning progress
• ✏️ Edit Entries - Update existing journal entries
• 🗑️ Delete Entries - Remove entries you no longer need
• 📱 Progressive Web App - Installable on mobile and desktop
• 🎨 Modern UI - Beautiful, responsive design with dark/light theme
• 🔄 Real-time Updates - Dynamic content loading via Flask API
• 📊 Search & Filter - Find entries by date, week, or keywords
• 📥 Export Data - Download your journal entries as JSON

Tech Stack

Frontend

• HTML5, CSS3, JavaScript (ES6+)
• Progressive Web App (PWA) features
• Fetch API for backend communication

Backend

• Flask - Python web framework
• JSON - File-based data storage
• RESTful API - Standard HTTP methods (GET, POST, PUT, DELETE)

Project Structure

.
├── flask_app.py              # Main Flask application
├── requirements.txt          # Python dependencies
├── templates/                # HTML templates
│   ├── index.html
│   ├── journal.html
│   ├── about.html
│   └── projects.html
├── static/                   # Static files
│   ├── css/                  # Stylesheets
│   ├── js/                   # JavaScript files
│   ├── img/                  # Images
│   ├── manifest.json         # PWA manifest
│   └── backend/
│       └── reflections.json   # Journal entries data
└── backend/                  # Backend utilities
    ├── api.py                # Legacy HTTP server (optional)
    └── reflections.json      # Backup data file

Quick Start

Local Development

1. Install dependencies:

   pip install -r requirements.txt

2. Run the Flask server:

   python flask_app.py

3. Open your browser:

   http://localhost:5000
   

For detailed instructions, see FLASK_QUICKSTART.md

Deployment to PythonAnywhere

See DEPLOYMENT.md for step-by-step deployment instructions.

API Endpoints

Method	Endpoint	Description
GET	/reflections	Get all journal entries
POST	/add_reflection	Add a new journal entry
PUT	/reflection/<id>	Update an existing entry
DELETE	/reflection/<id>	Delete an entry

Usage

Creating a Journal Entry

1. Navigate to the Journal page
2. Fill out the form:
   • Week of Journal (number)
   • Journal Name
   • Journal Date
   • Task Name
   • Task Description (minimum 10 words)
   • Technologies Used (select at least one)
3. Click "Submit Journal Entry"

Editing an Entry

1. Find the entry you want to edit
2. Click the "✏️ Edit" button
3. Modify the form fields
4. Click "Update Entry"

Deleting an Entry

1. Find the entry you want to delete
2. Click the "🗑️ Delete" button
3. Confirm the deletion

Development

Running Tests

Test the API endpoints using curl or Postman:

# Get all reflections
curl http://localhost:5000/reflections

# Add a reflection
curl -X POST http://localhost:5000/add_reflection \
  -H "Content-Type: application/json" \
  -d '{
    "weekOfJournal": 15,
    "journalName": "Learning Flask",
    "journalDate": "2024-11-25",
    "taskName": "Built Flask backend",
    "taskDescription": "Created a Flask application with REST API endpoints for managing journal entries and deployed it successfully.",
    "technologies": ["Python", "Flask", "JSON"]
  }'

File Structure Notes

• Templates: HTML files served by Flask
• Static Files: CSS, JavaScript, images served directly
• Backend Data: JSON file stores all journal entries
• API Routes: Defined in flask_app.py

Requirements

• Python 3.8+
• Flask 3.0.0+
• flask-cors 4.0.0+

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

This project is for educational purposes.

Author

Vanshika Tangri

Acknowledgments

• Flask framework for backend functionality
• PythonAnywhere for hosting platform