StackOverflow

Overview

A simple Q&A app using Flask

Goals

To implement StackOverflow like web application which supports most of the features.

Features

• Create questions and answers.
• Comment on questions and answers.
• Upvote/Downvote questions, answers and comments.
• Users have a profile (With unique gravatar for each user).
• Support for tagging questions.
• Questions are categorized by most recently asked.
• Supports pagination of questions.
• Categorize questions on the basis of answered, unanswered and all.
• Search questions on the basis of tags.

README

Getting Started

• These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Things you need to install the software and instructions to install them:

• You should have python3 and pip3 installed:
• First check if python3 is intstalled by using the command:

python3 -V

• Output:

Python 3.5.2

• If not installed then type the following:

sudo apt-get update
sudo apt-get -y update

Instructions for installing pip

sudo apt-get install python3-pip

Instructions for installing few more packages and development tools for the programming environment

sudo apt-get install build-essential libssl-dev libffi-dev python-dev

Installing

• Getting our web app up and running is simple.
• To run it you have to do what you do with most flask apps.

Setting up virtual environment:

virtualenv -p /usr/bin/python3 name_of_your_environment
source name_of_your_environment/bin/activate
pip install -r requirements.txt

Creating the initial database:

python db_create.py
python db_migrate.py # In case you need to migrate the database

Running the web app :

python run.py # The web app can be run in http://127.0.0.1:5000

Deployment

• Add additional notes about how to deploy this on a live system

Built With

• Flask - The web framework used
• Bootstrap - The responsive CSS framework used
• Bootswatch - A website for bootstrap themes
• Flask-WTF - Simple integration of Flask and WTForms, including CSRF, file upload, and reCAPTCHA.
• Flask-Login - Flask-Login provides user session management for Flask
• Code-prettify - An embeddable script that makes source-code snippets in HTML prettier.

Versioning

• We used Git for versioning.

License

This project is licensed under the MIT License - LICENSE.md

Acknowledgments

• Special thanks of gratitude to D.R. Venkatesh Choppella for providing us with this excellent oppurtunity to design a web app
• To our mentor Raj Patel without whose help it would have been difficult to complete this project.

Flask

It is a simple web app made using Flask web framework to implement a StackOverflow-like forum site.

• Official Flask documentation here.

How we started ..

• First we started by building database schema.
• Then we built a blueprint of the application like organised controllers and models in different folders of users, comments, etc.
• Then we started coding controllers and models. First we coded models and controllers of users.
• Then we built base.html which is usd in every HTML page.
• Then we started by building controllers and models for login and register page
• Then we coded controllrs and models of comments,answers,tags,etc and side by side coded html.
• Then we made profile page which shows the statastics of the user like number of questions asked,upvotes,downvotes,etc.
• Then we added some intgrity check features that is each user can upvote or downvote only once.
• Then we added some more features like Migration and Pagination.
• At last we added some security features like CSRF protection,captcha generation.
• We also implemented a 404 page error in which will be displayed if someone asks for a page which is not in our web app.

Design

• Used inheritance feature, for eg. every HTML page inherits from base.html.
• Used SQLAlchemy-migrate to keep track of database updates for us-> Migration feature.
• Used Sqlite database.
• Important feature in our web application is there is a unique gravatar for each user which is generated online when the user successfully registers.
• Pagination is also a feature in our app so that six posts per page is visible.
• Used WTF forms which helps in rendering fields and which also has built in validators.
• Integrity check feature -> One user can only upvote or downvote once.
• Every user can view the dashboard of other user and see his/her statastics which shows number of questions answered,questions asked ,upvotes,downvotes.
• A user can add multiple tags to a particular question and can search question by tags
• Factored our web app into a set of blueprints for making application components and supporting common patterns within an application or across applications.

Security

• Used SQLALCHEMY prevent SQL injection.
• Used CSRF protction which is auto enabled by WTF forms.
• Another important thing that we had done for security is Captcha generation at the time of registration which the user has to verify. A CAPTCHA (a backronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”) is a type of challenge-response test used in computing to determine whether or not the user is human.
• The passowds are stored as hashes not in plain taxt,so even if our database is stolen by someone else he/she cannot get the password used for login into our web app.

Snippets

Snippet of schema

  User:

- Name => String
- Age => String
- Year Joined => String
- Reputation => Integer
- Id (Primary Key) => Integer

Snippet of Blueprint

from .mod_answer import mod_answer as answer_blueprint
app.register_blueprint(answer_blueprint)

from .mod_auth import mod_auth as auth_blueprint
app.register_blueprint(auth_blueprint)

from .mod_comment import mod_comment as comment_blueprint
app.register_blueprint(comment_blueprint)

from .mod_home import mod_home as home_blueprint
app.register_blueprint(home_blueprint)

Snippet of views.py(controller) of login page

@mod_auth.route('/login', methods = ['GET', 'POST'])
def login():
        form = LoginForm()
        if form.validate_on_submit():
                user = User.query.filter_by(email = form.email.data).first()
                if user is not None and user.verify_password(form.password.data):
                        login_user(user)
                        return redirect(url_for('mod_user.dashboard'))
                else:
                        flash('Invalid email or password.')
        return render_template('mod_auth/login.html', form = form, title = 'Login')

Snippet of WTF FORMS

<h1>Post Question</h1>
<br>
        <form class = "form" method="post" action="" role = "form">
        {{ form.csrf_token }}
        {{ wtf.form_field(form.title) }}
        {{ wtf.form_field(form.body) }}
        {{ wtf.form_field(form.code) }}
        {{ wtf.form_field(form.tag, data_role="tagsinput") }}
        {{ wtf.form_field(form.submit) }}
        <!--<button type="submit">Submit</button>-->
        </form>
        </div>
</div>

Snippet of answerQuestion.html which uses inheritance feature

{% import "bootstrap/wtf.html" as wtf %}
{% extends "base.html" %}
{% block title %} Add Answer {% endblock %}
{% block body %}
<div class="container">
        <div class="col-md-12 text-center">
        <ul class="nav nav-pills">
            <li><a href="{{ url_for('mod_home.index') }}">All</a></li>
            <li><a href="{{ url_for('mod_question.unansweredQuestions') }}">Unanswered</a></li>
            <li><a href="{{ url_for('mod_question.answeredQuestions') }}">Answered</a></li>
            <li><a href="#">Search</a></li>
            <li><a href="{{ url_for('mod_tag.searchByTags') }}">Search By Tags</a></li>
        </ul>
    </div>
    <br>
    <br>
        <div class="content-section">
                <div class="center">
        <h1>Post Answer</h1>
        <br>
                {{ wtf.quick_form(form) }}
                </div>
        </div>
</div>
{% endblock %}