UX:

User goals

The target audience of AdPro are:

• People who want to add products for sale.
• People who want to check different prices based on views.
• Users who want to check what other users are talking about different products.

User goals:

• Check what are the products available for sale in different categories.
• Search a specific category and search a product within this category.
• Create an account.
• Login in their account.
• Add, edit and delete products.
• See their products in a page with comment box.
• See their products in a table.
• Add comments in different ads.
• Delete their own comments already added.
• See how many views a products has.

Design choices

Fonts

• The font used in this project is Roboto which is an user friendly mainly used by its creator Google to give a proper reading in different screen sizes.

Colors

• Baltic Sea: #343a40
• Matterhorn: 545454
• White smole: #f2f2f2
• Tropical rain forest: #097460
• Dark lime green: #28a745
• Pelorous: #17a2b8
• Dodger blue: #007bff
• Amber: #fec008

Styling

• Bootstrap cards to group the products.
• Box shadow to give a depth idea in contrast with the background.
• The usage of different colours for each category to contrast each other and give direction to users.

Wireframes

The wireframes for this project were only take three devices in accountability as Mobile phones, iPad and normal screen. In addition, the tool used to develop them was Balsamiq for a rapid design.

• Mobile devices
• iPad devices
• Desktop devices

Features

AdPro is made with different features and pages, Home page, Categories, Product view, User account, Register page and Login page. Therefore, the template of this project was developed to bring simplicity to the user avoiding unexpected experiences, adding intuitive navigation.

Navbar

• When a user is not logged the navbar will display the login and register links for the user to choose what he needs.

• Once the user is logged in the login and register button will desappear giving the space for account and logout instead.

Footer

• The only difference on the footer is when user is logged in or logged out.

• If the user is not logged a button will be displayed for he or she to register a new account.

Register

• The register page is set to add new users with their name, email address and password. Once the user is registered it will be redirected to the login page.

Login

• The login page is displayed for registered users to add its email and password to have access to its account, add and delete comments in the product detail page. Once the user is logged in they will be redirected to its account page.

Home Page

• The home page has everything the user need.
• A simple and well designed carousel with its three categories and an image representing each category as headers.
• Links with the name of each category to facilitate users to navigate the app.

Categories

• Under the categories, a pagination scheme is settled to only show six products per page to not overwhelm the user and of course give a good experience.

The product view

Users after clicking on a product card, rather it is on the home page or in categories will be sent to a view page in which will be able to see the product in a larger image and its description as well as post a comment for the seller of the product such as bid or asking the price.

The User Account Page

• The user account page is basically two pages in one where users will be able to add a new product using a form (right page) and see them after submitted on a table with privilege of delete, view and edit (left page).
• So, to add a new product, select the category, add the product name, chose a price, add the image url and description.
• When the product is post, it will be displayed at the category choosed, such as electronics, home & garden or motors as well as on the list in account.
• Three buttons will be displayed at the account page to edit, view the product detail or delete.

404 page

• A 404 page is set to be displayed for when an error occur when a page is not found. Making the user be able to return to the main page with its button.

Currency formatting

• I have added currency formatting using flask template_filter(). Where the user can add the full value of the product and it will be formatted in the Irish monetary format.

Features left to implement

1. Since Users are not able to edit comments after post it on the product view page, only delete. there’s room to add edit comment.
2. Under the login user needs to be added password reset functionality.

Database Structure

 category{

   _id:<id>
   category_name:"Electronics"

   _id:<id>
   category_name:"Home & Garden"

   _id:<id>
   category_name:"Motors"

}

products{

   _id:<id>
   category_name:"Electronics"
   product_name:""
   price:"500"
   url:"https://www.londondrugs.com/on/demandware.static/-/Sites-londondrugs-m..."
   seller:" "
   product_description:" "
   views:15
   review:Array
      0:Object
        name:"Lucas"
        post:"add a comment here...."
        date:"17/09/2019"
      1:Object
        name:"eliasprado"
        post:"roses are red and the sky is blue I am just commenting here to appear in the readme file :D"
        date:"14/10/2019"

}

user{

   _id:<id>
   name:"<user name>"
   email:"<user email>"
   password:"<user password>"

}

Technologies

Tools

• Atom as an IDE to develop this project.
• MongoDB Atlas as the database used in this project.
• Canva for the design of the images.
• Pip a package management system used to install the needed packages for this application.
• Github to share and store code remotely.
• Git was used to manage version control.
• Chrome Devtools that was used to easy the design and responsiveness of this project.

Libraries

• Flask a python library to make web developmet easy to process.
• Jinja2 a template engine for python used to run programming login within html.
• Bootstrap used to build and structure the design of the web pages as a css library.
• Google fonts to get and display customised fonts.
• Github to share and store code remotely.
• Git was used to manage version control.
• Chrome Devtools that was used to easy the design and responsiveness of this project.

Programming languages

The programming languages used in this project was, Python, Javascript, CSS and HTML.

Coding challenges during development

There are some challenges that were faced during the development of this project such as add user comments on a third user product and pagination.

1. The difficult was that it was required to develop a function in which would embed comments as arrays into the database.

Embedded DB comment:

if request.method == 'POST':
        mongo.db.products.find_one_and_update({"_id": ObjectId(id)},{
                    '$push':{'review':{
                    'name': session['name'],
                    'post': print_post,
                    'date': now.strftime("%d/%m/%Y")
                    }
                }
            }
        )
        return redirect(url_for('review', id=id))

2. In addition another function that was very hard to develop was the pagination system. The algorithms of the function was an set of arithmetics in both python and jinja with a mix of url management. Initially it worked but the pagination wasn't showing the real value of pages, based on the number required per page. Having one or two empty pages in advance.

Testing

• You can see the TESTING.md file here.

How to run this application locally

Before you run this application locally you will need to create an account in MongoDB and create a database. PS: You don't need to design the tables again, since they alread