Harmonic Poems is a platform for poets to share their poems and inspire young poets. This platforms aims to be a Harmonic Poets Community, where poets can like, comment and share their poems with the world.
Poem is all about rhythm, harmony and soul. Find yourself in one of them or share one of yours with us!
The Live Site can be found here.
- User Experience
- Features
- Future Features
- Wireframes
- Structure
- Databases
- Technologies Used
- Frameworks, Libraries & Tools Used
- Testing
- Deployment
- Credits
- Acknowledgements
I designed this platform with desgin thinking approach. With only the necessary content/information. User can surf the site easily and get the information they are looking for. Please find all my defined user stories here
- As a Site Admin I can approve or disapprove posts so that I can filter out objectionable posts.
- As a Site Admin I can create, read, update and delete posts so that I can manage my blog content.
- As a Site Admin I can aproove Posts before it is published so that the site content will be consistent.
- As a Member User I can register an account so that I can manage my posts, comment and like.
- As a Member User I can post/add/edit/delete poems so that I can share and manage my poems.
- As a Member User I can like or unlike a post so that I can interact with the content.
- As a Member User I can leave comments on a post so that I can be involved in the conversation.
- As a Member User I can view my posts status of approval so that I can manage my poems.
- As a Site User I can view a list of posts so that I can select one to read.
- As a Site User I can click on a post so that I can read the full text.
- As a Site User / Admin user I can view comments on an individual post so that I can read the conversation.
- As a Site User / Admin I can view the number of likes on each post so that I can see which is the most popular or viral.
-
Home Page
-
The home page is minimal content to not bother user with loads of information. The page has a Navigation bar and two buttons on the page. If the user is not registered user and not logged in. The navbar has a login/register options and the button to take user ot login page.
-
If the user is logged in member, the navigation bar will have an accunts icon and instead of login, one of the buttons takes the user to their account profile.
-
The Poem button takes any site user to the list of poems page for any user to access and read.
-
-
Poems Page
-
Poems page is the page to showcase list of all poems.
-
The list is diplayed with a blurred image as background for that particular post.
-
The title and excrept of the poem, name of author, date of publication and number of likes visible for each post.
-
This feature helps user choose which poem they want to read and have an insight about the poems content before openenig the post.
-
The Poems page also has Pagination feature with each page upto 6 posts.
-
-
Sign Up
-
Users can register and create their own account.
-
The sign-up form checks if the username is used by someone else, alerts the user if any infomration is incorrect, such as passwords not matching or empty required fields.
-
Creating account enables access to more features.
-
Registered members can publish and manage their poems (edit/delete).
-
These users can also like and comment on others posts.
-
-
Sign In
-
Users can access their account via sign-in/login feature.
-
By logging in the users can publish and manage their poems (edit/delete). They can also like and comment on others posts.
-
Users can find login option from Menu and from home page.
-
If the user don't have an accoun, they can click 'sign up' link on the login page and create their account.
-
-
Logout
-
The user can logout from Menu and from their accounts page.
-
When the user wants to logout a pop-up modal is triggered for confirmation.
-
The logout modal asks the user if they confirm to logout.
-
-
User Account / Profile Page
-
Once the user is registered or logged in, they have a user profile page.
-
In this page users can publish a poem, or manage their poems.
-
If they want, they can access the logout feature through the logout button from this page as well.
-
-
Publish a Poem
-
Creating and adding a poem by a registered user is possible.
-
The user can publish a poem after signing in and from their profile page.
-
The user must enter a title, content and image. The excrept is optional if the user want to enter a brief explanation about their poem.
-
Once the poem is published, the poem is submitted for approval to the admin. The submitted poem can be viewed/edited/deleted by the owner from 'Manage my poems Page'.
-
-
Manage My Poems Page
-
User has the control to their published and pending approval poems.
-
The user can see the list of thier own poems from 'Manage My Poems' page.
-
Each poem listed has information about that particular post/poem.
-
Status of poem: If the poem is sent for approval and is not yet publlished, it displays "pending approval on the top". If it is approved by the admin and is published, at top it displays "Published" with a green icon next to it.
-
The poem title, excrept and the date/time of submission is present separately for each post.
-
Finally, the buttons for editing and deleting options are given for the user management.
-
The listing is sorted out from latest created/updated at the top of the page and the old ones are below.
-
The poems are approved by the admin. This is to ensure that poems submitted are by the user and is not by another poet.
-
-
Edit a Poem
-
The authenticated and owner of the poem can only edit the poem.
-
Both the pending approval poems and published (approved) poems can be edited.
-
The poems that are selected for editing are prepopulated form that is ready for editing.
-
-
Delete a Poem
-
The authenticated and owner of the poem can only delete the poem.
-
Both the pending approval poems and published (approved) poems can be deleted.
-
The poems that are chosen to be deleted asks the user for confirmation by pop-up alert on the window.
-
-
Like and Comment on a Poem Post
-
All the site visiters can view the comments and the number of likes.
-
The unregistered site visiters cannot view the comment box to write a comment. Once they register, then it is visible for them and they can post a comment on any post they want.
-
The registered site members can like and comment on a post.
-
- Connect with Google translate API, so users can submit poems from different languages and also translate to language they want.
- Members can save poems that they like (inn save category) and go back to read it later.
- Users can set up their own profile page, add information about themselves, upload a profile picture and connect with other members.
- Create a community group and vote for their own admin/admins to review their poems.
- Follow other poet members.
- Each pages wireframes includes mobile(small screen), tablet(medium screen), desktop(large screens).
-
Home page:
-
Login page:
-
Manage My Poems page:
-
Poem Content:
-
Poem List:
-
Publish Poem:
-
Register:
-
User Account Page:
-
The structure idea for Harmonic Poems was to keep it simple and unnecessary-content-free. The simplicity helps user to easily access and navigate within the application.
Only one color shades are used throughout to keep the user focused more on the content and if any important information is to be delivered to user, such as alerts or post status.
This project has one main app, poems blog app.
Throughout the project development, GitHub projects is used. Click here to view the process.
As the Harmonic Poems require a database, I have created two database models:
Post model handles poems details: title, content, approval status, date created/updated, featured image, excrept and likes. This post model handles the base for confirming user/author authentication to manage their own poems.
Comment model handles the content of the comment, the username of the person commenting, date/time of commenting.
- HTML
- CSS
- JavaScript
- Python
- Bootstrap - grid, layout, columns, cards and forms structure.
- Django - django frameworks to manage apps.
- GitHub - to store the overall project repository.
- GitPod - used as workspace to do the coding.
- Balsamiq Wireframes - To design the wireframe of the complete project.
- Google Fonts - to brandize 'Harmonic Poems' with google fonts. Used for logo and all the written content.
- Fontawesome - fontawesome icons for social media links and as additional design.
- Heroku - for the deployement of the project.
- Coolors - to choose the color palette and color shades.
- PostgreSQL - database storage of the models.
- Cloudinary - image and static files storage.
- AmIResponsinve - responsiveness of the site.
- Lighthouse - used for testing site functionality.
- W3C Markup Validation Service - used for HTML testing.
- W3C CSS Validation Service - used for CSS testing
- PEP8 - used for Python files testing.
Unit Testing, Validator Testing, and Bugs are documented here.
This project was deployed to Heroku. "Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps."- Heroku.
Steps to open account in Heroku:
-
Signup here if you do not have an account already.
- After you fill in all the information for account and sign in, you will be on Dashbord. Here is where you will create an application.
-
Click on New => Create new app.
- Choose a name to your application and select location that you are based.
The initial deployment was immediately after cretaing all the file directories within the repository. This is to ensure and overcome any deployment error before hand and resolve the issue before it gets more complicated.
Steps to Deployment
I have followed Code Institute's Django Blog Cheat Sheet steps to follow, create and deploy the project on Herokuapps.| # | Steps | Code |
|---|---|---|
| 1 | Install Django and gunicorn: | pip3 install django gunicorn |
| 2 | Install supporting libraries: | pip3 install dj_database_url psycopg2 |
| 3 | Install Cloudinary Libraries | pip3 install dj3-cloudinary-storage |
| 4 | Create requirements file | pip3 freeze --local > requirements.txt |
| 5 | Create Project | django-admin startproject PROJ_NAME . (Don’t forget the . ) |
| 6 | Create App | python3 manage.py startapp APP_NAME |
| # | Steps | Code |
|---|---|---|
| 7 | Add to installed apps | ‘APP_NAME’, |
| # | Steps | Code |
|---|---|---|
| 8 | Migrate Changes | python3 manage.py migrate |
| 9 | Run Server to Test | python3 manage.py runserver |
- 4 stages:
- Create the Heroku app
- Attach the database
- Prepare our environment and settings.py file
- Get our static and media files stored on Cloudinary
1. Create new Heroku App
2. Add Database to App Resources - Located in the Resources Tab, Add-ons, search andadd e.g. ‘Heroku Postgres’
3. Copy DATABASE_URL - Located in the Settings Tab, in Config Vars, Copy Text
| # | Steps | Code |
|---|---|---|
| 4 | Create new env.py file on top level directory | E.g. env.py |
| # | Steps | Code |
|---|---|---|
| 5 | Import os library | import os |
| 6 | Set environment variables | os.environ["DATABASE_URL"] = "Paste in Heroku DATABASE_URL Link" |
| 7 | Add in secret key | os.environ["SECRET_KEY"] = "Make up a randomSecretKey" |
| # | Steps | Code |
|---|---|---|
| 8 | Add Secret Key to Config Vars | SECRET_KEY, “randomSecretKey” |
| # | Steps | Code |
|---|---|---|
| 9 | Reference env.py |  |
| 10 | Remove the insecure secret key and replace - links to the secret key variable on Heroku | SECRET_KEY = os.environ.get('SECRET_KEY') |
| 11 | Replace DATABASES Section (Comment out the old DataBases Section) - links to the DATATBASE_URL variable on Heroku |  |
| # | Steps | Code |
|---|---|---|
| 12 | Make Migrations | python3 manage.py migrate |
| # | Steps | Code |
|---|---|---|
| 1 | Copy your CLOUDINARY_URL e.g. API Environment Variable. | From Cloudinary Dashboard |
| # | Steps | Code |
|---|---|---|
| 2 | Add Cloudinary URL to env.py - be sure to paste in the correct section of the link | os.environ["CLOUDINARY_URL"] = "cloudinary://9444:ExampleCloudinaryi@dbhyuj5mc" |
| # | Steps | Code |
|---|---|---|
| 3 | Add Cloudinary URL to Heroku Config Vars - be sure to paste in the correct section of the link | Add to Settings tab in Config Vars e.g. COUDINARY_URL, cloudinary://9444:ExampleCloudinaryi@dbhyuj5mc |
| 4 | Add DISABLE_COLLECTSTATIC to Heroku Config Vars (temporary step for the moment, must be removed before deployment) |  |
| # | Steps | Code |
|---|---|---|
| 5 | Add Cloudinary Libraries to installed apps (note: order is important) |  |
| 6 | Tell Django to use Cloudinary to store media and static files. Place under the Static files Note |  |
| 7 | Link file to the templates directory in Heroku. Place under the BASE_DIR line | TEMPLATES_DIR = os.path.join(BASE_DIR,'templates') |
| 8 | Change the templates directory to TEMPLATES_DIR. Place within the TEMPLATES array | 'DIRS': [TEMPLATES_DIR] |
| 9 | Add Heroku Hostname to ALLOWED_HOSTS | ALLOWED_HOSTS = ["PROJ_NAME.herokuapp.com", "localhost"] |
| # | Steps | Code |
|---|---|---|
| 10 | Create 3 new folders on top level directory | media, static, templates |
| 11 | Create procfile on the top level directory | Procfile |
| # | Steps | Code |
|---|---|---|
| 12 | Add code | web: gunicorn PROJ_NAME.wsgi |
| # | Steps | Code |
|---|---|---|
| 13 | Add, Commit and Push |
git add . git commit -m “Deployment Commit” git push |
| # | Steps | Code |
|---|---|---|
| 14 | Deploy Content manually through heroku/ | E.g Github as deployment method, on main branch |
Before the final Deployement: Remove the "DISABLE_COLLECTSTATIC" from Heroku Config vars, and Change Debug to "False" in settings.py
In order to make a local copy of this repository, you can type the following into your IDE terminal:
git clone hhttps://github.com/MerveKucukzoroglu/reading-tracker.git
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
During the process of project development, there have been various sources that gave me idea how to do a particular feature or fix a bug. The following are the sources that I got knowledge from:
-
Code Instiute course materials and Django Blog Walkthrough Project.
-
User registration email form and views by Corey Schafer for future email verification purposes.
- forms.py
class UserRegisterForm(UserCreationForm): email = forms.EmailField() class Meta: model = User fields = ['username', 'email', 'password1', 'password2']
- Views.py
def register(request): if request.method == 'POST': form = UserRegisterForm(request.POST) if form.is_valid(): form.save() username = form.cleaned_data.get('username') messages.success(request, f'Account created for {username}!') return redirect('profile') else: form = UserRegisterForm() return render(request, 'account/signup.html', {'form': form})
- forms.py
-
Coolors color palette.
-
AmIResponsive for mockup of the site.
I would like to acknowledge and present my thanks to Tim Nelson, my mentor from Code Insitute for his guidance and constant support. It wouldn't have been possible without the amazing community in Slack, Tutors of Code insitute Tutor supports, and my friends who constantly motivated and supported me.