OurOver

OurOver is a microblogging site for posting your morning coffee.

You can see the deployed version here.

1. UX

1.1. Project Goals

The goal of this project was to create a microblogging site that allowed users to upload a picture of their morning coffee with a space for a short post about their thoughts for the day ahead. Users can also comment on eachother's brews.

1.2. User Stories

• As a user without an account, I want to register for an account.
• As a signed out user, I want to log in.
• As a signed in user, I want to sign out.
• As a signed in user, I want to view my profile.
• As a signed in user, I want to create a Brew post.
• As a signed in user, I want to edit my Brew post.
• As a signed in user, I want to delete my Brew post.
• As a signed in user, I want to comment on a brew post.
• As a signed in user, I want to delete my comment on a brew post.
• As a user, I want to view a Brew post.
• As a user, I want to search for a Brew post.

1.3. Design

The site is designed around a simple card display of the latest brews, an individual brew can be viewed comment on it, or if you are the user that created the brew, edit and delete it. A search functionality also allows users to finds a particular brew through keywords in its description or title.

1.4. Wireframes

Wireframes were made using Figma.

You can see them here.

2. Features

2.1. Existing features

• Brew posting
  • Image upload
  • Flavour selection
• Search functionality
• Commenting

2.2. Features left to implement in the future

• More Post features
  • Rating System
  • Coffee DB

3. Technologies used

• HTML5 - the structure of the data as represented in the app
• CSS3 - the styling of the elements and responsiveness of the application
• JS - creation of dynamic elements
• TailwindCSS - framework for CSS styling
• MongoDB - provides a document-oriented database for storage of persistent data
• MongoDB Atlas - provides cloud hosting for the MongoDB database
• Google Cloud Storage - provides storage for larger pieces of data, in this case post images
• Figma - used to create the wireframes for the project
• VSCode - IDE used to develop the application
• Live Server - used to locally host site during development for rapid testing
• Github - used to host the code repository
• Heroku - used to host full stack application

4. Testing

See more on testing methodology here.

5. Deployment

• The project was deployed on heroku by setting up automatic deployment using the project's github repository.
• The project makes use of both MongoDB Atlas and Google Cloud Storage which are connected to via environment variables stored in Heroku's Config vars, under the settings tab.
• The google application credentials are stored in an environment variable and written to a file, as required by google cloud authentication, on project build completion.

6. Credits

6.1. Content

CSS is generated by TailwindCSS, app and html code by myself. Images are all public domain.