ThoughtShot

Introduction

ThoughtShot is a blogging platform that is designed to allow users to create elegant blogs easily.
You can visit it at ThoughtShot
The code is available on GitHub for viewing and contribution of changes.

Team

ThoughtShot team consists of 4 people:

Member Name Responsibilities
Rishabh Garg Backend (Django) & Frontend (HTML & CSS & Bootstrap) & Wiki Page
Subramanyam Dantu Frontend (HTML & CSS & Bootstrap) & Wiki Page
Ajay Balasubramanian Backend (Django) & Wiki Page
Shreyans Mongia Frontend (HTML & CSS) & Wiki Page

This project would have not been possible without each and every team members' efforts and the sincere guidance of our SM teacher Ms. Jyoti Sinha

Beginnings

ThoughtShot began as a System Management project. We as a team were fascinated by the learning opportunities that making a blogging website would provide. Making a blog made us understand what a blog actually means to people and how important an entity it is in today's expanding and tech-savvy world.

Initially we did not know where to start. We made a rough draft of what we wanted to accomplish. We wanted to do something new and challenging, hence we decided to learn Django for the backend and HTML and CSS using Bootstrap for the front end. But we managed to learn Django and with that created the base of our website.

Journey

Completely new to the world of Web Designing, initially we had difficulties. We set out by dividing tasks among ourselves to make it easier. Before starting to code, we made a rough blueprint of the layout of our blog.

After a final draft we made the backend-

  • We started out by learning the basics of Django and creating projects, virtual environments and databases(using SQLite) required for a Django project.
  • We created an webapp for the blog in the main project .
  • Then we added features to the blog. Initially we created a simple page that could display a blog. This was achieved by creating Model of a blog.
  • Then we created Views that performed the required operations to process a request for a page and processing the required HTML files.
  • Then we integrated user login by creating Forms and taking the help of built in Django functionality.
  • Then we added the ability to Add posts only to logged in users. We also linked up all the pages using URLs.
  • Then we added a Moderated Comment System from scratch.
  • For that we had to create a model, views and a form to take the data.
  • We also integrated moderation by allowing only the admins to approve the comments before being visible to everyone.
  • For the frontend we used Bootstrap to integrate CSS into the webpage.
  • Using Bootstrap we added visual effects like Buttons, Fonts Which enhanced the visual appeal of the webpage.

During the entire process we collaborated and shared the code using GitHub.

Tools Used

  • Django - As a web framework to acheive backend tasks.
  • Python Anywhere - To host the website that used Django(Python-based).
  • GitHub - To collaborote and share the code easily.
  • Bootstrap - To design the frontend.

Learning Outcome

Through this process we learnt the basic methods in designing a webpage. We were able to appreciate the effort it takes it to design a good-looking and functional website. We learnt a new language in Django and frontend designing in HTML and CSS.

Code Snippets

Model

class Post(models.Model):
    title = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(auto_now_add=True)
 
    def approved_comments(self):
        return self.comments.filter(approved_comment=True)
 
    def unapproved_comments(self):
        return self.comments.filter(approved_comment=False)
 
    def __str__(self):
        return self.title

Views

@login_required
def post_new(request):
    if request.method == "POST":
        form = PostForm(request.POST)
        if form.is_valid():
            post = form.save()
            post.save()
            return redirect('blog.views.post_list')
    else:
        form = PostForm()
    return render(request, 'blog/post_edit.html', {'form': form})
 
def post_detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    return render(request, 'blog/post_detail.html', {'post': post})

Adding Comments

{% extends "blog/base.html" %}
 
{% block content %}
    <div class="page-header">
    <center>Welcome to ThoughtShot</center>
</div>
    <div class="container">
    {% for post in posts %}
        <h2><a href="{% url "post_detail" pk=post.pk %}">{{ post.title }}</a></h2>
        <p><span class="glyphicon glyphicon-time"></span> {{ post.created_date }}</p>
        <p>{{ post.text|linebreaks|truncatechars:500 }} 
            <a href="{% url 'blog.views.post_detail' pk=post.pk %}">Read More..</a>
        </p>
        <a href="{% url 'blog.views.post_detail' pk=post.pk %}">Comments: {{ post.approved_comments.count }}</a>
        {% if user.is_authenticated %}
            <a href="{% url 'blog.views.post_detail' pk=post.pk %}">Unapproved Comments: {{ post.unapproved_comments.count }}</a>
        {% endif %}
        <!-- </div> -->
        <hr>
    {% endfor %}
</div>
{% endblock content %}

Screenshots

The Website without Any CSS

The Home Page

An Article Page

Ability to add New comments

Moderated Comments

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License