The machikolacey-milestone3 from code-institute-submissions

My Cafe Memories

This is a social network site for users to share memories of their cafes.

The goal for the user is to share their cafe memories with other like-minded people, who would like to explore and find an ideal cafe for themselves. Also, they can look at their cafe memories, go back to their memories, and share memories of their cafes. They can choose either private or public for each memory, so they don't have to be worried about showing all the images they want to store for themselves.

In the future, this will give me an opportunity to ask cafe owners to provide their information by themselves, and also coupon code available for their customers. And also the cafe owner will be able to give them a 'Thank you' coupon code for positive reviewers.

An unregistered user can browse this website to see everyone's cafe memories.
If they become an user, they will be able to add their cafe memories.
They can add their memories from "Add memory" page.
They can search the cafe names by auto complete.
They can add cafe name(auto-complete), description, photo link, rating(1 to 5), Date(datepicker).
If they are unable to find the cafe, they can add a cafe from "Add cafe" page.
On "Add cafe" page, they can add area name(auto-complete), cafe name, website, postal address, postcode, photo link, and youtube link(optional).
They can also browse and edit/ delete cafes from "Manage cafes" page.

Deployed page is available here

http://milestone3-data-centric-mlk.herokuapp.com/

Wireframe

https://github.com/machikolacey/milestone3/blob/master/pdf/wireframe-ny-cafe-memories.pdf

UX

If they haven't visited the website (detected by cookie), the homepage displays a modal popup to describe what this website for. This navigates an user to either registration page or login page, or if they decide not to register, just closes the popup.

The steps:

If register:

The user can add username and password to register their account
It will navigate the user to "Edit your profile" page
If they want to add their image, they can click on "Edit" button to go to "Edit your profile" page
The user can add their image by adding link to their image
Click on "Save" to go to "Everyone's memories" page

If login:

An user can fill in the form to go to "Your cafe memories" page
It will navigate the user to "Edit your profile" page
On the page, they can click on "Add your memory" button to fo to "Add your cafe memory" page
On the page, they can add the cafe name, description, photo link, ratings, and date. Also they can choose if this memory is private(display to the user only)
By clicking on "Save", go to "Your cafe memories" page
The user can see their memory is added on the page
The user can edit or delete the memory by clicking on the buttons
The user can add or edit cafe information

Features

Existing Features

Feature 1 : Browsing all memories - allows users browsing all the posted memories, by visiting home "Everyone's memories" page
Feature 2 : Cafe information - allows users reading cafe information by clicking the image and name of the cafe
Feature 3 : Add and edit cafes - allows users adding & editing cafe information, cafe memory by filling in the forms
Feature 4 : Add and edit memories - allows users adding & editing their cafe memory by filling 'Add memory' form
Feature 5 : Auto-complete - Auto complete - allows users to search for the area & cafe name by inserting text in the input
Feature 6 : Add photos using Cloudinary - Photos - they can add their photos by adding a link from a photo cloud (such as https://cloudinary.com/)
Feature 7 : Sorting - Sort - users can sort by date, cafe name, and rating
Feature 8 : Pagination - Pagination - users can browse cafe memories and cafe informations using pagination, so they can easily navigate through the list

Features Left to Implement

I would like to categorise cafes
I would like to add more user information and user role - so cafe owner has more privilage to add their cafe information and also coupon code
I would like to add coupon provided by cafe owners. This will potentially we can provide a package for cafe owners to have their subscriptions, give them ability to add campaigns targeting cafe freaks.
I would like to add a facility to give users more coupon code, when they contribute to this website by adding more memories. Hopefully we can provide subscriptions packages for them so they can benefit from sharing their memories.

Technologies Used

Back-end

Python
Flask - Python framework For pagination, etc
Dnspython- DNS toolkit for Python
Heroku - Cloud application platform
Mongo DB Atlas - non relational, NO-SQL Database - Cloud based MongoDB server

Front-end

Javascript - For auto-complete, navbar, etc
Jquery - For auto-complete, navbar, etc
Materialize - for clean front-end design, and also icons
W3C Modal Box - The project uses W3c's Modal Box to display welcome text.

Image Library

This project is using images from cloudinary.com, which is used as alternative to image upload facility.

Testing

PC

I have tested on these browsers:

Google Chrome
Firefox
Internet Explorer Edge

Tablet

Kindle Fire 8 plus

Mobile

Samsung Galaxy A21s
iPhone 7
HUAWEI Mate 20 lite

I also used Google Chrome's device emulator to test on all types of devices.

I have asked on Code Institute's peer review community to test this website and received feedbacks:

Also, this was run through these validators.

Test Results

Responsive menu was too tall and hiding the content on tablet size - fixed
The modal popup - the content was overflowing - fixed
The overlay was hiding the mobile nav - fixed
Auto Complete was not working on area search. Found the order of the javascript file was wrong - fixed
The content of the memory card was overflowing depends on the description - fixed
On the mobile phone menu there was no lines between links, and no effects on hover - fixed
On registration process it wasn't displaying requirement for the username - fixed
The 'Go back' button was on the front page - fixed
On tablet size, the memory image was not 100% width - fixed
On tablet size, the the header displayed 2 lines and took too much space - fixed
When user photo was not presented, it was causing an error on memory submittion - fixed
'background-color:none' was not validated - used 'background-color:transparent' instead
'border-color:none' was not validated - used border:none instead

How to test this project

On the front page, a welcomo popup will be shown with buttons - press 'Get Started!' button to go to register page
Fill in the form with a username and password, press 'Register' button
It will redirect to "Your Account Information" page
Click on 'Edit' button to display 'Edit your account information' page
Click on 'Save' to go to "Your memories" page
Click on 'Click here' to go to 'Add Your Cafe Memory' page
Fill in the form - add 2 or more characters on 'cafe' field to see auto-complete is working
Click on 'Date' field to see datepicker is working
Submit the form to go to 'Your cafe memories' page
On the top menu, click on 'Home' to go back to 'Everyone's memories' page
Check pagenation is working by clicking on the page numbers
Check 'Sort by' section to see sort is working
Click on 'Your memories' button to see if you can go back to 'Your memories' page
Click on 'Everyone's memories' button to see if you can go back to 'Everyone's memories' page
On the top menu, click on 'Add cafe' to go to 'Add Cafe' page
Fill in the form - test if area auto complete is working
Click on 'Submit' button to go to 'Manage Cafes' to see if the cafe is added on the page
Choose one of the cafes, click on 'Edit' button to edit cafe
Choose one of the cafes, click on 'Delete' button to delete cafe
Click on 'Logout' button to logout

Deployment

This project was developed on Github, using Gitpod as IDE. It has only master branch. This is pushed and deployed on to heroku.

Deployed project is found here:

https://milestone3-data-centric-mlk.herokuapp.com/

This project utilises Mongo DB to use NO-SQL (non-relational) database. Before cloning the project:

Add a database collection 'brightonCafes' on MongoDB Atlas
Create a database and these tables:
- cafes
- areas
- users
- memories

To run this project on your local repository

This project will be deployed following these steps:

Add your own repository on your Github account
Click the green 'Gitpod' button on top-right corner of this repo(If you can't find the button, install 'Gitpod' extension on your Chrome browser
Gitpod launches
Run the following command (Replace the 'USERNAME' and 'REPO' to your username and repo name):


git remote set-url origin https://github.com/USERNAME/REPO.git

Add env.py file on your root folder, add these lines:

import os

os.environ['SECRET_KEY'] = '- YOUR SECRET KEY - '
os.environ['MONGO_URI'] = '- YOUR MONGO URI -'

Run this command below to install all the modules on requirements.txt file:
```
pip3 install -r requirements.txt
```
Run the code by running this code below:
```
python3 app.py
```

Remote Deployment (Run the project on Heroku.com)

If you want to add it to your Heroku account, follow the instructions below:

Add an app for this project
Add environment variables 'SECRET_KEY' and 'MONGO_URI' on your app
Add PORT on your app
On your Gitpod workspace, login to heroku by running this code below:
```
heroku login -i
```
Select your app by running this code below (Replace '- YOUR APP NAME -' with your own app name):
```
git init

heroku git:remote -a  - YOUR APP NAME -
```
Run this code below to push the code to your Heroku app:
```
git push heroku master
```
When the app is deployed, click on 'Open App' button to run your app

Credits

Content

Memory photos are taken by Machiko Lacey-Kimura, and uploaded to https://cloudinary.com/
This project is using icons from Materialize.

Media

- The photos and texts used in this website are taken from:
- https://www.google.co.uk/maps
- https://www.facebook.com
/li>
- The videos used in this website are taken from: https://www.youtube.com/

Acknowledgements

I received inspiration for this project from a resume project provided by Code Institute.

code-institute-submissions / machikolacey-milestone3 Goto Github PK

machikolacey-milestone3's Introduction