h17ku Svelte Themes

H17ku

JS front-end/Python back-end web app for composing haikus

#flask #mongodb #render #svelte
Demo Download

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:

Back-end:

Packages:

Tooling:

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

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes