Giter VIP home page Giter VIP logo

flack's Introduction

HarvardX CS50W: Web Programming with Python and JavaScript

Project 2: Flack

Link to the course: https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript

Link to the app: https://flack-gnan.onrender.com

Requirements:

  • Display Name: When a user visits your web application for the first time, they should be prompted to type in a display name that will eventually be associated with every message the user sends. If a user closes the page and returns to your app later, the display name should still be remembered.
  • Channel Creation: Any user should be able to create a new channel, so long as its name doesn’t conflict with the name of an existing channel.
  • Channel List: Users should be able to see a list of all current channels, and selecting one should allow the user to view the channel. We leave it to you to decide how to display such a list.
  • Messages View: Once a channel is selected, the user should see any messages that have already been sent in that channel, up to a maximum of 100 messages. Your app should only store the 100 most recent messages per channel in server-side memory.
  • Sending Messages: Once in a channel, users should be able to send text messages to others in the channel. When a user sends a message, their display name and the timestamp of the message should be associated with the message. All users in the channel should then see the new message (with display name and timestamp) appear on their channel page. Sending and receiving messages should NOT require reloading the page.
  • Remembering the Channel: If a user is on a channel page, closes the web browser window, and goes back to your web application, your application should remember what channel the user was on previously and take the user back to that channel.
  • Personal Touch: Add at least one additional feature to your chat application of your choosing!

Implementation:

  • Display Name: A new user is able to register for the chat providing a username, email and password. Once registered, the user can log in to the chat and logout out of the chat.
  • Channel Creation: A registered user can create a new channel providing a name and description. If the channel is created successfully, the new channel appears in each user's channel list. The newly created channel becomes selected for the creator. If a channel with the same name already exists, the creator receives an error message.
  • Channel List: The chat view is divided into three areas: a list of channels, messages of the selected channel, information about the selected channel. When the user selects a channel, the contents of the messages area and information area change.
  • Messages View: All the app data as well as the chat history is stored in the database (PostgreSQL). Channel messages are loaded in batches as the user scrolls the messages area. Scroll loading is also implemented for the list of channels.
  • Sending Messages: Once in a channel, users can send text messages to others in the channel. A new message appears in the messages area of each user who is currently in the channel without reloading the page. Every displayed message has a timestamp (taking into account the time zone of the user for whom the message is displayed), the username and avatar of the author. The avatar is taken from Gravatar, the avatar service.
  • Remembering the Channel: The user's current channel is stored in the database, so whenever the user goes back to the app, they are taken back to their previous channel.
  • Personal Touch: Users can attach a file to their message, pin and unpin channels. They also can see additional information about the selected channel such as a channel description, when and by whom the channel was created, a list of users, who are currently in the channel. A list of users is updated whenever users join or leave the channel. Scroll loading is also implemented for a list of users.

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.