Giter VIP home page Giter VIP logo

social-feed's Introduction

Social-Feed

Social-Feed is a foodie dedicated social media page. It looks to encourage foodies to share their ideas, view others content and become up-to-date with the latest foodie news.

Goals of the site:

  1. See foodie releated posts by content creators.
  2. Promote hospitaltiy businesses.
  3. Share experiences, ideas and content with other foodies.

User Experience

User Stories

  1. As a Site User I can view a paginated list of posts so that I can select which post I want to view
  2. As a Site User I can view a list of posts so that I can select one to read
  3. As a Site User I can click on a post so that I can read the full text
  4. As a Site User I can view the reccomended posts
  5. As a Site User I can register an account so that I can comment and like
  6. As a Site Admin I can create, read, update and delete posts so that I can manage my blog content

Type of Visitors

  1. Business - The site is built for Restaurants, Hotels, Cafes & other hospitlaity businesses to promote their work and network with others.
  2. Blogger - Food & drink bloggers will use the site to connect with enthusiasts and businesses to grow their network.
  3. Enthusiast - Access to their favourite bloggers, businesses or professionals working in hospitality.

Wireframes

Wireframes were deisgned on Balsamiq

Features

Feature 1 - Account Registration

Screenshot 2022-03-25 at 21 02 14

Users can click Register to open the Account Registartion form. The form will allow users to enter a Username, Email and Password before confirming the Password and signing up.

Username - Must be unique to Social-Feed. If the Username is not unique, an error message will appear instructing the user to pick a different username. If successful, the Username can be used to Login to it's account.

Email - Emails must follow expected syntax.

Password & Confirmation - Must follow specific password rules and match the Confirmation. If the password is similar to the Username or Email, an error message will appear.

Feature 2 - Login

Screenshot 2022-03-25 at 21 02 02

With an account successfully made, Users can login with their credentials. Firstly, they must either click Login on the navigation bar or click Sign In when prompted during registration.

Username - Users will enter their Username. If incorrect an error message will appear.

Password - Users will enter the correct Password. If incorrect an error message will appear.

Feature 3 - Home / Social

Screenshot 2022-03-25 at 21 01 02 Screenshot 2022-03-25 at 21 13 22

Social is the default home page for all users. Social is the newsfeed, displaying all posts by all users in chronological order. Users can navigate the pages of posts using the page number, next, last or previous buttons available at the bottom. In the next version of Social-Feed, it will only display posts from users that you follow.

Feature 4 - Posting

Screenshot 2022-03-25 at 21 02 41

After registering, users can create their post by clicking Post. Users will then have the posting form available which has to be filled before submitting by clicking the Post button. Posts are used by users to create content such as recipes, events or promoting their business.

Feature 5 - Posts

Screenshot 2022-03-25 at 21 20 04 Screenshot 2022-03-25 at 21 19 43

By clicking the post title a pos t can be opened. After opening the post, you can view more detail or if you're the post owner, you can update or delete the post. If you're not the owner of the post, you are unable to update or delete the post.

Feature 6 - Profile

Screenshot 2022-03-25 at 21 03 26

After registering, a profile will be automatically generated. This will display the Username, email and profile picture with an option to update. Additionally, the Profile tab on the navigaion bar will be replaced by the users Username.

Feature 7 - Profile Pictures

Screenshot 2022-03-25 at 21 04 07 Screenshot 2022-03-25 at 21 04 15

Users will be automatically given a standard Profile Picture when registered. They can change their picture at anytime using the Choose File field to select an image and the Update to see confirmation of a successful image change. The image will be automatically reshaped into a circle.

Feature 8 - Reccomended Posts

Screenshot 2022-03-25 at 21 04 30

The Reccomended Posts or Feed highlights interesting posts to users such as News, Recipes or Promotions. All of the titles are clickable, a new tab will be opened and the user directed to that page.

Feature 9 - Sidebar

Screenshot 2022-03-25 at 21 05 25

On the left of the screen I've added a Sidebar to provide easier navigation for Users. New pages will be added in the future to improve User Experience when navigating the site.

Feature 10 - Navigation Bar

Screenshot 2022-03-25 at 21 05 51

The navigation bar presents the page name, Social, Feed, Post, User and Logout. All of the links work as intended and provide simple navigation for users.

Features to implement in future versions

Messaging

In the future I would want to implement user interaction such as Messaging and Commenting on posts. These feartures would make users use the platform more often, build regular users and increase the amount of content being posted.

Following

Following users and viewing profiles would increase useage and improve expereience. With this addition all types of users could improve their content offering and use the site to leverage their requirements.

Video

With the addition of Video media uploads users would have a wider range of content available to post. This would help improve content variety and assist with growing the user base.

Technologies used

Frameworks, Libraries & Programs

Testing

  • Tested all key features, responsiveness and links of the site.

PP4 Testing.pdf

  • Automated tests setup for the .py pages. All results came back as anticipated.

Deployment

Deployment failed - I tried deploying via Heroku but was unable to succesfully connect my project. I was working from VSCode and followed set by step guides however was unable to push origin master and finish the final steps. I spent many hours working on this and will continue working out the issue.

Credits

  • To ensure my CSS code was formatted correctly, I ran it through a formatter which can be found here: CSS Code Formatter
  • To ensure my HTML code was formatted correctly, I ran it through a formatter which can be found here: HTML Code Formatter
  • To ensure my JavaScript code was formatted correctly, I ran it through a formatter which can be found here: JavaScript Code Formatter
  • To ensure my Python code was formatted correctly, I ran it through a PEP8 formatter which can be found here: Python Formatter

Content

All content has the sole use for education.

Code

social-feed's People

Contributors

jmjry avatar

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.