h17ku

A web app that helps users to compose haikus.

Deployed Link: https://h17ku.onrender.com

Project Goals:

• Help users write their own haikus

• Provide a platform for users to read haikus

• Allow users to post their own haikus

Developer Goals:

• Build a CRUD application with Python, Flask & MongoDB

• Implement basic user authentication

• Demonstrate unit testing with pytest

UX

User Stories

• As a user, I want to be able to learn how haikus are structured so that I can write my own haikus

• As a user, I want to be able to view other user's haikus so that I can see what other user's have written

• As a user, I want to be able to post my haiku so that I can share it with other users on the website

• As a user, I want to be able to easily copy my post so that I can share my haikus on any platform outside of the website

• As a user, I want to be able to save my haikus so that I can read them at any later date

• As a user, I want to be able to save other user's haikus so that I can read them at a later date

• As a user, I want to be able to edit my haiku after I've posted it so that I can fix any typos or make any amendments if I need to

Design

Font Family: System font stack

Wireframes: View wireframes here.

Features

Implemented

• Responsive design

• CRUD functionality

• User authentication

• Haiku validator

• Comments

• Like system

• Dark mode

Planned

• Report system

• Save posts

• Share to social media

• User search

• Post pagination

Information Architecture

API

Auth routes:

Method	Route	Action
POST	/auth/register	Handle user registration
POST	/auth/login	Handle user login
GET	/auth/session	Check if a user is logged in
GET	/auth/logout	Handle user log out

Post routes:

Method	Route	Action
GET	/post	Get single post
GET	/posts	Get all posts
POST	/post	Create post
PUT	/post	Update post
PATCH	/post	Like a post
DELETE	/post	Delete post

Comment routes:

Method	Route	Action
GET	/comments	Get all comments of a single post
POST	/comment	Create a comment
PUT	/comment	Update a comment
PATCH	/comment	Like a comment
DELETE	/comment	Delete a comment

Other routes:

Method	Route	Action
GET	/user	Get all user posts
GET	/haiku	Get a random haiku

Database

The database for this project is MongoDB. There are three collections for this project: users, posts and comments. Here are the database models for each collection:

Users:

{
    _id: ObjectId
    email: String
    username: String
    pwd_hash: String
}

Posts:

{
    _id: ObjectId
    username: String
    haiku: String
    posted_at: Date
    likes: Array
    comments: Array
    edited: Boolean
}

Posts have a one to many relationship to Users with the username field as the reference.

Comments:

{
    _id: ObjectId
    post: ObjectId
    username: String
    comment: String
    posted_at: Date
    likes: Array
    edited: Boolean
}

Comments have a one to many relationship to Posts with the post objectId as the reference.

Posts and comments have a very similar model but Posts has a comments array that keeps track of the amount of comments that a single Post has.

Technologies Used

Languages: HTML, CSS, JavaScript, Python

Front-end:

• Svelte - JavaScript Framework

• Routify - Svelte Router

• Tailwind CSS - Utility CSS Framework

Back-end:

• Flask - Python Micro-Framework

• MongoDB Atlas - Cloud Database

• Flask-PyMongo - Flask Wrapper for PyMongo

• Flask-Login - User Session Management for Flask

Packages:

• svelte-toast - Toast notifications

• svelte-forms-lib - Form creation, validation and submission

• svelte-match-media - Svelte match media plugin

• tailwindcss-delicious-hamburgers - Animated hamburger menu

• syllable - Syllable counter

• autosize - Automatically adjust textarea height

• tippy.js - Tooltip provider

• yup - Object schema validator

Tooling:

• Figma - High-fidelity Wireframing

• Visual Studio Code - Code Editor

• Git - Version Control System

• Github - Code Hosting Platform

• Heroku - Platform-as-a-Service Cloud Provider

• Gunicorn - Python WSGI HTTP Server

Testing

Testing is documented in a separate file here.

Deployment

Deployment is documented in a separate file here.

Credits / Acknowledgements:

• Stack Overflow

• All the doc sites: svelte.dev, routify.dev, docs.mongodb.com, flask etc.

• The Code Institute Slack community for all the great resources, tips and support

• My mentor Precious Ijege for his support and feedback with the project