💻Unit 3 Project: Full-Stack C.R.U.D. App

Project Overview

This project will help you practice full-stack development using Flask and SQLAlchemy, while allowing you to explore a topic that interests you. Choose a theme, be creative, and have fun! 🚀

📥 SETUP & SUBMISSION INSTRUCTIONS

1. Go to the CS3 Unit 3 Project assignment on Blackbaud and follow the provided GitHub Classroom link.

   📁 Clicking the link generates a private repository for your project with the appropriate starter code. Note that projects are stored within the BWL-CS Organization, so you cannot access it from the “Your Repositories” page!

2. Open the repository in a Codespace whenever you spend time working on the program, in class or at home.

   ⚠️ Always remember to commit changes after every coding session!

3. When your project is complete, submit the link to your repository in the CS3 Unit 3 Project assignment on Blackbaud.

---

Project Instructions

1. Choose a Theme

Pick a theme for your app that excites you! Your app should store, display, and modify data from an SQLite database. Examples:

• Shopping List App: A shopping list app where users can add, edit, and delete items.
• Event Planner: A portal for creating and sharing social plans with friends.
• Library System: A database of books with borrowing and returning functionality.
• Movie Collection: A catalog where users can add, rate, and review movies.
• Recipe Manager: A site where users can create, update, and delete recipes.
• Fantasy World Explorer: A site where users create and manage characters, locations, or quests.

2. Set Up Your Flask App

• App Structure: Organize your app into the following folders and files:

    project/
    ├── static/
    │   ├── style.css
    │   ├── script.js
    │   └── (images, additional assets)
    ├── templates/
    │   ├── layout.html
    │   ├── (your HTML pages)
    ├── app.py
  

• Install Dependencies:

   pip install flask flask-sqlalchemy
  

3. Database Setup

• Define a database model in app.py using Flask-SQLAlchemy.
• Include at least three fields (e.g., id, name, date_created).
• Example:

   from flask_sqlalchemy import SQLAlchemy
   from datetime import datetime, timezone
  
   db = SQLAlchemy()
  
   class Task(db.Model):
       id = db.Column(db.Integer, primary_key=True)
       content = db.Column(db.String(200), nullable=False)
       date_created = db.Column(db.DateTime, default=datetime.utcnow)
  

4. Implement CRUD Operations

Your app must support the Create, Read, Update, and Delete operations. Below are the required features:

CREATE (Add Data)

• Use an HTML <form> to submit data.
• Store the data in an SQLite database.
• Example:

   @app.route('/', methods=['POST'])
   def add_task():
       task_content = request.form['content']
       new_task = Task(content=task_content)
       db.session.add(new_task)
       db.session.commit()
  

READ (View Data)

• Fetch records from the database and display them using a Jinja template.
• Example:

   @app.route('/')
   def index():
       tasks = Task.query.order_by(Task.date_created).all()
       return render_template('index.html', tasks=tasks)
  

UPDATE (Modify Data)

• Provide an option to edit existing records.
• Example:

   @app.route('/update/<int:id>', methods=['GET', 'POST'])
   def update(id):
       task = Task.query.get_or_404(id)
       if request.method == 'POST':
           task.content = request.form['content']
           db.session.commit()
           return redirect('/')
       return render_template('update.html', task=task)
  

DELETE (Remove Data)

• Implement a delete button to remove entries.
• Example:

   @app.route('/delete/<int:id>')
   def delete(id):
       task_to_delete = Task.query.get_or_404(id)
       db.session.delete(task_to_delete)
       db.session.commit()
       return redirect('/')
  

5. Create HTML Templates

• Use Jinja to dynamically display data.
• Extend a base template (layout.html) for consistent navigation.
• Example: index.html

    
  {% extends "layout.html" %}
    
  {% block content %}
  <h2>Task List</h2>
  <ul>
      {% for task in tasks %}
      <li>{{ task.content }} - <a href="/update/{{task.id}}">Edit</a> | <a href="/delete/{{task.id}}">Delete</a></li>
      {% endfor %}
  </ul>
    
  <form action="/" method="POST">
      <input type="text" name="content" required>
      <button type="submit">Add Task</button>
  </form>
  {% endblock %}
    
  

6. Style Your App

• CSS: Create a static/style.css file for styling.
• Bootstrap (Optional): Use Bootstrap for a responsive UI.
• Images/Icons: Store visuals in the static folder.

7. Serve Your App

Run your Flask app:

  python app.py

If using Flask’s built-in development server:

  if __name__ == "__main__":
      with app.app_context():
          db.create_all()
      app.run(debug=True)

---

Minimum Requirements

• At least three HTML pages extending a base template.
• A Flask-SQLAlchemy database with at least one model.
• CRUD functionality (Create, Read, Update, Delete).
• A form to add records.
• A delete button to remove records.
• Styling using CSS or Bootstrap.
• At least one image in the static folder.
• Use of template inheritance and Jinja control structures.

---

Bonus Challenges

• 🎯 Add user authentication (login/logout).
• 🎯 Use JavaScript for live updates or form validation.
• 🎯 Add a REST API endpoint returning JSON data.
• 🎯 Use Flask’s flash messages for user feedback.