search

Rebecca115 / CITS-5505-group-work

0 stars 0 forks source link

readme

Study Perth Assistant

Study Perth Assistant is a web application designed to assist students in Perth with managing and accessing educational resources. The application allows users to register, log in, and manage their profiles, as well as browse and post questions.

Features

Technical Highlights

  1. Modular Design:
    • Utilizes Flask's Jinja2 templating engine with template inheritance to maintain a clean and organized code structure.
    • Different blocks (e.g., title, head, maincontent, scripts) are defined for flexible reuse and overriding.
  2. Responsive Design:
    • Built with Bootstrap 5 framework for a fully responsive design.
    • Navigation bar adapts for different screen sizes with a hamburger menu for smaller screens.
  3. User Authentication and Authorization:
    • Supports user login, registration, and logout features.
    • Displays different navigation menu items based on user authentication status using the current_user object.
  4. Dynamic Content Loading:
    • Dynamic content generation using Jinja2 template engine with conditionals and loops for user information and navigation items.
    • Dynamic URL generation with Flask's url_for function ensures correct and maintainable resource linking.
  5. Form Handling:
    • Manages forms with Flask-WTF extension, including form validation and rendering.
    • Provides user profile update forms with multiple fields and Bootstrap styling for a clean and user-friendly interface.
  6. Front-End Interactivity:
    • JavaScript is used for front-end interactions, such as toggling the sidebar.
    • FontAwesome icons are incorporated for enhanced visual aesthetics.
  7. User Experience:
    • Navigation bar includes a search form for quick access to content.
    • Layout and typography are enhanced using Bootstrap's grid system and custom CSS for an improved user experience.
  8. Compatibility and Performance:
    • Utilizes CDN for loading Bootstrap and FontAwesome, improving page load speed and resource availability.
    • Static resources (CSS and images) are organized in the static folder and referenced with Flask's url_for function for reliable loading.
  9. Flask-WTF for Form Handling
    • Provides robust form validation and rendering using WTForms.
  10. Flask-Login for User Management
    • Manages user sessions and authentication.
  11. Flask-Mail for Email Integration
    • Handles email sending for user registration and password resets.
  12. SQLAlchemy for Database Management
    • ORM for database interactions with models for User, Question, Answer, and related entities.
  13. CKEditor for Rich Text Editing
    • Enables rich text editing in questions and answers.
  14. URLSafeTimedSerializer for Token Management
    • Generates secure tokens for email confirmation and password resets.
  15. Flash Messages for User Feedback
    • Provides immediate feedback to users on their actions.
  16. File Upload Handling with Werkzeug
    • Manages file uploads securely, including user avatars and question images.

Project Structure

CITS5505-group-project/
app/
│   ├── question/
│   │   ├── form.py
│   │   └── views.py
│   ├── static/
│   │   ├── css/
│   │   │   ├── answered-questions.css
│   │   │   ├── base.css
│   │   │   ├── base_profile.html.css
│   │   │   ├── browse-questions.css
│   │   │   ├── index.css
│   │   │   ├── posted-questions.css
│   │   │   ├── style_1.css
│   │   │   ├── update_avatar.css
│   │   │   └── user-info.css
│   │   ├── font/
│   │   │   └── Inter.ttf
│   │   ├── image/
│   │   │   └── photo-stream/
│   │   ├── js/
│   │   │   └── script.js
│   │   └── uploads/
│   ├── templates/
│   │   ├── answered-questions.html
│   │   ├── base.html
│   │   ├── base_profile.html
│   │   ├── browse-question.html
│   │   ├── change_password.html
│   │   ├── confirm_email.html
│   │   ├── detail.html
│   │   ├── forget_password.html
│   │   ├── index.html
│   │   ├── login.html
│   │   ├── post_question.html
│   │   ├── posted-questions.html
│   │   ├── question_page.html
│   │   ├── register.html
│   │   ├── search.html
│   │   ├── update_avatar.html
│   │   ├── user-info.html
│   │   └── user_answers.html
│   ├── user/
│   ├── __init__.py
│   └── conf.py
│
├── deliverables/
│   ├── version1/
│   │   ├── homepage.png
│   │   ├── loginpage.png
│   │   ├── postpage.jpg
│   │   ├── questionpage.jpg
│   │   └── registerpage.png
│   ├── version2/
│   │   ├── browse_questions.jpg
│   │   ├── user_answered_questions.jpg
│   │   ├── user_avatar_change.jpg
│   │   └── user_posted_questions.jpg
│   └── version3.mp4

├── migrations/
│   ├── README
│   ├── alembic.ini
│   ├── env.py
│   ├── script.py.mako
│   └── versions/
│
│
├── README.md
├── models.py
└── requirements.txt
└── run.py

Installation

Follow these steps to get your development environment set up:

  1. Clone the repository
bashCopy code
git clone https://github.com/your-username/your-repository.git
cd your-repository
  1. Set up a virtual environment
bashCopy code
python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`
  1. Install dependencies
bashCopy code
pip install -r requirements.txt
  1. Configuration

Due to the email verification feature, you need to set the email server environment variables. Missing these may cause the project to fail to start successfully:

export MAIL_SERVER=email-smtp.ap-southeast-2.amazonaws.com
export MAIL_PORT=587
export MAIL_USE_TLS=1
export MAIL_USERNAME=your_mail_username
export MAIL_PASSWORD=your_mail_password
export MAIL_DEFAULT_SENDER=confirm@fudongs.com

Create a `conf.py` file in your project directory and update it with your settings:

```python
pythonCopy code
class Config:
    SECRET_KEY = 'your_secret_key'
    SQLALCHEMY_DATABASE_URI = 'sqlite:///yourdatabase.db'
    SQLALCHEMY_TRACK_MODIFICATIONS = False
  1. Initialize the database

Run the following commands in the Python shell to create your database tables:

pythonCopy code
from yourapplication import db, create_app
app = create_app()
with app.app_context():
    db.create_all()
  1. Run the application
bashCopy code
flask run
  1. Testing Database

If you want to quickly test the application, we provide a simple SQLite testing database for you to use. You can follow these steps to use it:

Download the test database file data.db（https://drive.google.com/file/d/18a2zQ2vd96gkPifCYkYMYLA4948NT5wK/view?usp=sharing）. After downloading the db file data.db, create a new folder named instance in the root directory of the project and place the data.db file inside this folder. Ensure you have set up your development environment as described in the "Installation" section. Run the application using the command provided in step 6. You can now access the application by visiting http://localhost:5000 and start testing. Please note that this testing database is only intended for development and testing purposes and should not be used in production. If you plan to deploy the application to a production environment, you will need to configure a real database and ensure it meets your requirements.

Your application should now be running on http://localhost:5000.

URL Endpoints

User Routes

Question Routes

Database Schema

The database for this Flask Q&A platform uses SQLAlchemy for ORM (Object-Relational Mapping) and consists of the following primary tables: User, Question, Answer, and AnswerLike. Below is a detailed description of each table and its relationships.

User Table

The User table stores information about the users of the platform.

Question Table

The Question table stores information about the questions posted on the platform.

Answer Table

The Answer table stores information about the answers posted to questions on the platform.

AnswerLike Table

The AnswerLike table stores information about the likes given to answers on the platform.

Relationships

Group members

UWA ID Name GitHub Username
23992836 Fudong Qin qincode
23856227 Ziqi Chen ziqichen55555
23918117 Clare Li ClareUWA
23766091 Yunzhi Chen Rebecca115