Code Monkey home page Code Monkey logo

network's Introduction

Network

Twitter-like social network website for making posts and following users. CS50's Web Programming with Python and JavaScript Project 4.

Description

A social network that allows users to make posts, follow other users, and “like” posts using Python, JavaScript, HTML, and CSS

Installation

pip install pipenv
pipenv install --dev

Database Processing

python mange.py makemigrations
python manage.py migrate

Run Project

python manage.py runserver

Specification

  • New Post: Users who are signed in can write a new text-based post by filling in text into a text area and then clicking a button to submit the post.
  • All Posts: The “All Posts” link in the navigation bar takes the user to a page where they can see all posts from all users, with the most recent posts first.
    • Each post includes the username of the poster, the post content itself, the date and time at which the post was made, and the number of “likes” the post has.
  • Profile Page: Clicking on a username loads that user’s profile page. This page:
    • Displays the number of followers the user has, as well as the number of people that the user follows.
    • Displays all of the posts for that user, in reverse chronological order.
    • For any other user who is signed in, this page also displays a “Follow” or “Unfollow” button that will let the current user toggle whether or not they are following this user’s posts. Note that this only applies to any “other” user: a user cannot follow themselves.
  • Following: The “Following” link in the navigation bar takes the user to a page where they see all posts made by users that the current user follows.
    • This page behaves just as the “All Posts” page does, just with a more limited set of posts.
    • This page only available to users who are signed in.
  • Pagination: On any page that displays posts, posts only are displayed 10 on a page. If there are more than ten posts, a “Next” button appears to take the user to the next page of posts (which is older than the current page of posts). If not on the first page, a “Previous” button appears to take the user to the previous page of posts as well.
  • Edit Post: Users can click an “Edit” button or link on any of their own posts to edit that post.
    • When a user clicks “Edit” for one of their own posts, the content of their post is replaced with a textarea where the user can edit the content of their post.
    • The user then can “Save” the edited post. Using JavaScript, you can achieve this without requiring a reload of the entire page.
    • For security, the application is designed such that it is not possible for a user, via any route, to edit another user’s posts.
  • “Like” and “Unlike”: Users can click a button or link on any post to toggle whether or not they “like” that post.
    • Using JavaScript, asynchronously the server knows to update the like count (as via a call to fetch) and then update the post’s like count displayed on the page, without requiring a reload of the entire page.

For more details: Network - CS50's Web Programming with Python and JavaScript

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.