Harmonica-Men / simple-blog

0 stars 0 forks source link

AstroShare Blog

"Discover the cosmos with AstroShare, the ultimate online community for astronomy enthusiasts! Our blog is a hub where you can sign up, collaborate, and interact with fellow stargazers. Share stunning photos, insightful articles, and engaging discussions about all things astronomical. Whether you're a novice star-watcher or a seasoned astronomer, AstroShare makes it easy to connect, learn, and grow. Join us today and be a part of a vibrant community that’s exploring the universe, one post at a time!"

A live version of the project can be accessed here:

(responsiveness image)

Table Of Contents

User Stories Table of Contents

  1. Welcome and Introduction
  2. Sign-Up Process
  3. Navigation and Exploration
  4. Creating and Sharing Content
  5. Interaction and Collaboration
  6. Profile and Community Building
  7. Ease of Use and Accessibility
  8. Continuous Engagement

    Welcome and Introduction

    As a user:

    • I want to see a visually appealing landing page with a space theme and a welcoming headline.
    • I want to read a brief introduction about the community and its features.
    • I want to have prominent "Sign Up" and "Log In" buttons to easily join or access the blog.
    • I want to watch a short introductory video or animation showcasing the blog's features.

    Back to User Stories Table of Contents

    Back to Top

    Sign-Up Process

    As a user:

    • I want to click on "Sign Up" and fill out a simple form with my Username, Email, Password, and Confirm Password.
    • I want to have the option to sign up using my social media accounts (Google, Facebook).
    • I want to be prompted to complete my profile by uploading a profile picture, writing a short bio, and optionally adding links to personal websites or social media profiles after signing up.

    Back to User Stories Table of Contents

    Back to Top

    Navigation and Exploration

    As a user:

    • I want to be directed to the main dashboard with a personalized greeting after completing the sign-up.
    • I want an easy-to-navigate menu with options like Home, Explore, Create Post, My Profile, Notifications, Settings, and Log Out.
    • I want to see a home feed with the latest posts from users, including photos, articles, and discussions about various astronomical topics.
    • I want each post to include the author’s profile picture, name, post title, content preview, and interaction buttons (Like, Comment, Share).

    Back to User Stories Table of Contents

    Back to Top

    Database

    PostgreSQL uitleg psycopg2 (pip install) 2.9.6 Cloudinary werking generate new API-key ... (pip install)

    Creating and Sharing Content

    As a user:

    • I want to click on "Create Post" and access a simple and intuitive editor.
    • I want to have a title field, content field with rich text formatting options, and the ability to add photos either by dragging and dropping or uploading from my device.
    • I want to add tags to categorize my post and a "Post" button to publish my content.

    Back to User Stories Table of Contents

    Back to Top

    Flowchart

    This flowchart was created to determine the flow of the website. It shows which pages are available to the user. It takes into account if the user is logged in to the website or not.

    Flow Chart

    Back to Top

    Entity Relationship Diagram

    The database design for this project includes Four tables. The first table is a review table. This table houses all the data associated with making a review on the site. There is a customer table, which houses the details of the customer and this is linked to a booking table via a foreign key relationship. The booking table contains the information needed in order for users to make a booking. The last table present is the user table. This table has the information necessary for users to have an account on the website and has a foreign key relationship with the customer table. ERD

    Back to Top

    Interaction and Collaboration

    As a user:

    • I want to leave comments on posts with a clear text field and an "Add Comment" button.
    • I want to be able to reply to comments and like or dislike them.
    • I want to invite other users to collaborate on a post.
    • I want real-time collaboration with a shared editor for multiple contributors.
    • I want to receive notifications for new comments, likes, and collaboration invites, with a notification bell icon in the menu bar showing a dropdown list of recent notifications.

    Back to User Stories Table of Contents

    Back to Top

    Profile and Community Building

    As a user:

    • I want to explore my profile page that displays my information, including my profile picture, bio, posts, and activity.
    • I want an "Edit Profile" button to update my information and settings.
    • I want to use the Explore page to search for other users.
    • I want to follow other users to receive updates on their posts and activities.
    • I want to use a direct messaging feature for private conversations.

    Back to User Stories Table of Contents

    Back to Top

    Ease of Use and Accessibility

    As a user:

    • I want the blog to be fully responsive and work seamlessly on desktop, tablet, and mobile devices.
    • I want fast loading times and smooth transitions between pages.
    • I want high contrast mode and text resizing options for better accessibility if I am visually impaired.
    • I want a keyboard navigable interface and screen reader compatibility.
    • I want an easily accessible help section with FAQs and tutorials, along with a contact support option for direct assistance.

    Back to User Stories Table of Contents

    Back to Top

    Continuous Engagement

    As a user:

    • I want personalized content recommendations based on my interests and activity.
    • I want regular email updates with highlights from the blog and information about upcoming astronomical events.
    • I want to participate in community events such as virtual star-gazing sessions, photo contests, and Q&A sessions with astronomy experts.
    • I want to engage in interactive challenges and quizzes to keep learning and stay engaged with the blog.

    Back to User Stories Table of Contents

    Back to Top

Deployment

Heroku Deployment

This site was deployed to and is currently hosted on the Heroku platform. The steps for deploying to Heroku, using PostgreSQL as the database host, are as follows:

Create a new PostgreSQL Code Institute database.

From codeinstitute every student can maintain up to eight databases to run there projects. Here is a step by step guide to install PostgreSQL from Code Institute to the cloud!

  1. Navigate to PostgreSQL from Code Institute and input with your LMS account PostgreSQL database creation step1

  2. After you filled in your LMS account the PostgresSQL database manager will automatically generate a new database for you. PostgreSQL database creation step2

  3. You now have a brand new PostgreSQL Code Institute database The link to this database and how to manage all your other databases will be sent to my email. PostgreSQL database creation step3

  4. Note: These databases are limited in time and have a life time of operation of 18 months after the date of creation. PostgreSQL database creation step4

  5. infoknop

  6. copy/paste url-link

  7. paste this in your env.py & heroku varibles.

Deploy the project

In the previous topic, I have created a PostgreSQL database. In this topic, you are challenged to deploy your project to Heroku. First you go to the Heroku website and login whit your credentials.

  1. Set up your Heroku account ...

    Part 1 - Create the Heroku app:

  2. Navigate to your Heroku dashboard and create a new app with a unique name in a GDPR region Europe Note: No Django static file collection will be required during the build.

  3. In your new app’s settings tab, ensure the Config Vars click on Reveal Config Vars button to define new variables in the inputs fields:

    "DATABASE_URL", ""

    "SECRET_KEY", ""

    "CLOUDINARY_URL", ""

    Part 2 - Update your code for deployment:

  4. Use pip3 to install gunicorn~=20.1 and freeze it to the requirements.txt file. The commands at the terminal are:

    pip3 install gunicorn~=20.1 pip3 freeze --local > requirements.txt

  5. In the Procfile, add a command using gunicorn and myblog wsgi file to start the webserver.

  6. In the myblog/settings.py file, set the DEBUG constant to False and append the '.herokuapp.com' hostname to the ALLOWED_HOSTS list.

    web: gunicorn myblog.wsgi

    Note: There is a space after the colon. Note: The Procfile has no file extension.

    Top tip! It's a good habit to always set DEBUG to False before any deployment. Once you have completed deployment, you can set it back to True locally to continue development. Double check Have you changed DEBUG to False and added , '.herokuapp.com' to the ALLOWED_HOSTS?

    DEBUG = False ,'.herokuapp.com'

  7. Git add, commit and push the code to your GitHub repo.

    git add . git commit -m "readies code for deploy" git push origin main

Part 3 - Deploy to Heroku:

  1. In your new app’s Deploy tab, search for your GitHub repo and connect it to the Heroku app. Manually deploy the main branch of this GitHub repo is also the prefered method. Note: Start typing your project repo name into the search box and click on the GitHub repo you want to deploy from. After manually deploying the main branch, you can view the build output in the application’s Activity tab in the dashboard.

    In your new app’s resources tab, ensure you are using an eco dyno and delete any Postgres database Add-on.

  2. Click Open app buttin to see your deployed app. If everythings goes well you on the frontpage of myblog.

    Note: The build must be complete before you can open the app.

import os

os.environ.setdefault( "DATABASE_URL", "") os.environ.setdefault( "SECRETKEY", "(j(j+@%s$a955-5gw=m@b-%#$slmv$0aixrck&odnq*h+ig@0") os.environ.setdefault( "CLOUDINARY_URL", "")

Credits

w3 schools

Used to reference Python Structure

Stack Overflow

Used to reference different syntax issues from existing older boards. Also used to query clear function issues when I ran into them as referenced in the bug section.

Acknowledgements

Daisy McGirr