The live website can be viewed here
Responsive mockup

1. Why This Project
2. UX
   • Why This Project
   • User Stories
   • Design
   • Wireframes
   • Database Schema
3. Features
   • Existing Features
   • Features Left to Implement
4. Technologies Used
   • Languages
   • Libraries and Frameworks
   • Tools
   • Databases
   • Version Control
   • Hosting
5. Testing
   • Code Validation
   • Automated Testing
   • Manual User Testing
   • Interesting Bugs Or Problems
6. Deployment
   • Local Deployment
   • Remote Deployment
7. Credits
   • Content
   • Acknowledgements

URBAN Designer is Franco Faura Tellez UX Designer first e-commerce website. He also has a Behance profile where he is always very active in updating new content. With this page, he will be able to offer customers the possibility to buy his services packages. The site includes a page for his services nut also his biography, portafolio and cv where people will be able to know more about him and his work and also a get in touch area to make contact with potential customers.

The aim of this project is to create a Full Stack web app to fully demonstrate the learnings throughout the course. A pass in this project is required to pass the course and obtain certification. The site will use Python and the Django Framework with a back-end db (PostgreSQL) for the back-end stack. Bootstrap 4 and HTML will be used on the front-end stack.

• People who works with UX design
• People who want to get acquainted with UX design
• People who want to buy a UX design service package

• Bootstrap, front-end framework is chosen for this project for its modern interface, ease of use and ability to be easily customized. It is used for creating features such as navbar, cards, forms, modals, as well as for the layout.
• JQuery is used for initializing some Bootstrap components, as well as for custom functions, DOM manipulation.

One of the main goals in UI was to focus user's attention on the UX designer and his services. Therefore clean but emotives colors and different shades of one colour (black) were mostly used accross the website's design.
Different shades of grey colour and shadows allow us to create clean and neat backgrounds and volume effect accross the website.

Original wireframes can be found here.

Icons are used widely, as they are good attention grabbers. They help users to find and scan content quickly and easily. Another advantage of using them is to help to break language barriers. They create more user-friendly experience for people with non-native English by giving the visual clue about the subject.

• I used FontAwesome as the main icon library across the project (e.g. for social media links, forms, cart, search and user icons in navigation).

Balsamiq Wireframes tool was used to create all wireframes for the project.
Original desktop wireframes can be found here which were modified accordingly for mobile views. Note: The website was changed and evolved through the development process and several improvements were applied. The wireframes served as guidelines but some details such as positioning, placement of images, buttons and other refinements diverge from the original wireframes.

During the development phase I worked with sqlite3 database which is installed with Django.
For deployment(production), a PostgreSQL database is provided by Heroku as an add-on.

• The User model used in this project is provided by Django as a part of defaults django.contrib.auth.models. More information about Django’s authentication system can be found here.

Database relationship can be found here.

URBANO D'sign website is composed by eight applications: home, about, portafolio, blog, services, shopping bag, checkout, profiles.

The application consists of 6 apps, 1 extra pending to develop and 9 sections:

• Navigation bar (mobile top header) - - The navbar links vary depending on whether the user is logged in or not. When the user is logged in the 'Profile'and 'Logout' links are shown.
• Search - The search function allows the user to search by service title, or filtered by category.
• logo, that is clickable and redirects to the landing page and also a small paragraph about the company
• Main-nav with quick links to the main pages: 'home', 'about me', 'portfolio', 'services' and 'blog'.

• Allow new user to register for an account and allow existing users to login to their account.
• Register - User must provide a unique username and email address, which are checked against existing entries in the database. An email address and password is required, which must be entered twice to check it has been input correctly.

• All users are able to view this page, display general information about all the available services.
• Services can be vew using grid or list posibility.
• Services count number informs the user the current services total.
• Sort box functionality added to filter by price.
• Individual services can be added to the bag or further information can be seen via the read more button.

• All users are able to view this page, display more information about the selected service

• Service details - displays the service title, description, price, category, and what is included.
• Add to cart - via this button will add the selected service to the shopping cart and redirects the user to bag summary view.
• Quantity - via this button user can select amounts.
• Date picker - via this button user can select when contact should be make.

• Your items - Display a summary of the services in the bag with each service showing the an image, title, quantity and price.
• Edit quantity - User can amend the quantity of the services by clicking the '-' or '+' to increasing or decreasing the quantity in bag.
• Remove from shopping bag - Allows the user to remove the service from the bag.
• Continue shopping - Redirects the user back to the browse all services page to continue shopping.

• Order summary - Display a summary of the services in the bag with each service showing the an image, title, quantity and price.
• Pay with card - Allows the user to make a card payment.
• Stripe - Allows the user to pay securely using Stripe payment
• Purchase Form - This form connects to the Stripe API to process a user's card details. No card details are stored locally or on the server, they are only sent to Stripe and then discarded.

• Thank You page - User receives confirmation that the order has been placed and is given a order reference number.
• Email - User receives email confirmation there order has been placed and receives a order summary.

• Only available to logged in user
• Billing information can be updated from this view.
• Order History- Users are able to view a summary of their previous orders placed. Users can click on the hovered order number link which provides a detail view of the selected order. Users can click Back to Profile to go backwards.
• Users can log out from this tab.

• Only available to logged admin user

• Add | View | Edit | Delete a Service admin can log in to add new service or edit and delete available services.

• Admin: defensive modal installed to prevent edit/delete a service by mistake using boostrap.
• Admin: Date(Timestamp) and select_date(book_date) added to the Admin view when using 'website-name'/admin.

• Allauth templates customized for this project.

Custom 404 and 500 pages contain error messages and error handlers to catch these errors. My custom messages allow the user to redirect back to the home page.

There blog app I considered were of secondary importance and I have not implemented them yet due to time constraints, but intend to do so in future when I will be able to dedicate more time to them. Most of these features are displayed in my original wireframes. Users would be able to create, edit and delete their reviews for products and services. Rating would be displayd as stars(0-5) in the service details pages. Also, in the landing home page reviews section, the static reviews would be replaced with the real ones, displaying up to 5 random reviews from the database.

Automatic counting forThis will be the first priority feature I would like to implement in future to the client can have more visibility of what the potential customers are searching.

This feature allows users to login using social networks accounts, Google and Facebook, that would enhance user experience and make the login process easier.

Other small features are also considered to be implemented in feature: -Display rating to the service card generated by reviewers (avergage number). -Portafolio images sizes should be reduce to improve loading speed. -Slider images carrousel indicators considering to swap for a scroll bar to be discussed with client. -Improve the portafolio slider code by using less conditional if statement code. -Blog app requested from client. Pending to implement for this project due to timelines. -Depending on number of services to be display a pagination could be implemented. -Footnote Links to the Page has been not been implemented yet. -Investigate if code for the Edit/Delete modal code could be refactor.

• HTML
• CSS
• JavaScript
• Python
• Jinja - templating language for Python, to display back-end data in HTML.

• Django - Python framework for building the project.
• Bootstrap - as the front-end framework for layout and design.
• Google Fonts - to import fonts.
• FontAwesome - to provide icons used across the project.
• JQuery - to simplify DOM manipulation and to initialize Bootstrap functions.
• Gunicorn - a Python WSGI HTTP Server to enable deployment to Heroku.
• Psycopg2 - to enable the PostgreSQL database to function with Django.
• Stripe - to handle financial transactions.
• Django Crispy Forms - to style Django forms.
• [MATH and datetime] were also used for basic math operations and datetime

• GitPod - an online IDE for developing this project.
• [GitHub] provides the hosting for software development control version using Git.
• [Am I Responsive] to test responsiveness and to create the images portrait in this readme file.
• PIP - for installation of necessary tools.
• AWS S3 Bucket - to store static and media files in prodcution.
• Boto3 for compatibility with AWS.
• Travis - for integration testing.
• ImgBB - to host images used in README and also services/products images to provide URLs.
• Balsamiq - to create wireframes.
• Coolors.co - to create colour palette used in the README.

• SQlite3 - a development database.
• PostgreSQL - a production database.

Database relationship:

• GitHub - as a remote repository to push and store the committed changes to my project from Git.

• Heroku - as the hosting platform to deploy my app.

HTML: I have used https://validator.w3.org/ in order to validate the HTML code.

CSS: I have used https://jigsaw.w3.org/css-validator/ in order to validate the CSS code & CSS prefixes were checked against with https://autoprefixer.github.io/

JavaScript: I have used https://jshint.com/ in order to check the JavaScript code.

[PEP8 Online]: (http://pep8online.com/) was used to validate Python.

Errors not handled:

• Missing href: The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.
• An exception to PEP 8 is our rules on line lengths. Don’t limit lines of code to 79 characters if it means the code looks significantly uglier or is harder to read. We allow up to 119 characters as this is the width of GitHub code review.
• Ignore avoid using null=True on string-based fields such CharField.cornf for the non-required address formats.
• Ignore avoid using null=True on string-based fields such URLField and ImageField for the images.

Testing information can be found in a separate (https://github.com/grisselfaura/Gris_MS4_project/blob/master/MANUAL_TESTING.md)

In addition to the manual testing, I used Travis CI for Continuous Integration testing of my code. So far 40 tests had been implemented.

The Coverage library was used throughout testing to help keep track of how much of my code was covered by the tests. The tests provide an overall coverage of 45%.

To generate your own coverage report install the package using pip install coverage

• Run coverage run manage.py test

• Then coverage html to generate the report

• The report can be viewed in a browser by opening the index.html file from inside the htmlcov folder.

• Feature work Test coverage percent validation based on threshold for the development process. Developers create a feature branch and then they push the code to the remote branch for review but an automatic process check that the result of running the coverage process flood-fill the set requirements.

The URBAN Designer project was developed using the GitPod online IDE and using Git & GitHub for version control. It is hosted on the Heroku platform, with static files on Gitpod and user-uploaded images being hosted in AWS S3 Basket.

To be able to run this project, the following tools have to be installed:

• An IDE of your choice (I used GitPod for creating this project)
• Git
• PIP
• Python3

Apart from that, you also need to create accounts with the following services:

• Stripe
• AWS to setup the S3 basket
• Gmail

1. You can clone this repository directly into the editor of your choice by pasting the following command into the terminal:
   git clone https://github.com/grisselfaura/Gris_MS4_project
   Alternatively, you can save a copy of this repository by clicking the green button Clone or download , then Download Zip button, and after extract the Zip file to your folder.
   In the terminal window of your local IDE change the directory (CD) to the correct file location (directory that you have just created).

Note: You can read more information about the cloning process on the GitHub Help page.

2. Set up environment variables.
   Note, that this process will be different depending on IDE you use.
   In this it was done using the following way:
   • Create .env file in the root directory.
   • Add .env to the .gitignore file in your project's root directory
   • In .env file set environment variables with the following syntax:

   import os  
   os.environ["DEVELOPMENT"] = "True"    
   os.environ["SECRET_KEY"] = "<Your Secret key>"    
   os.environ["STRIPE_PUBLIC_KEY"] = "<Your Stripe Public key>"    
   os.environ["STRIPE_SECRET_KEY"] = "<Your Stripe Secret key>"    
   os.environ["STRIPE_WH_SECRET"] = "<Your Stripe WH_Secret key>"     

Read more about how to set up the Stripe keys in the Stripe Documentation

3. Install all requirements from the requirements.txt file putting this command into your terminal:
   pip3 install -r requirements.txt
4. In the terminal in your IDE migrate the models to crete a database using the following commands:
   python3 manage.py makemigrations
python3 manage.py migrate
5. Load the data fixtures(categories, services, portfolio) in that order into the database using the following command:
   python3 manage.py loaddata <fixture_name>
6. Create a superuser to have an access to the the admin panel(you need to follow the instructions then and insert username,email and password):
   python3 manage.py createsuperuser
7. You will now be able to run the application using the following command:
   python3 manage.py runserver
8. To access the admin panel, you can add the /admin path at the end of the url link and login using your superuser credentials.

To start Heroku Deployment process, you need to clone the project as described in the Local deployment section above.
To deploy the project to Heroku the following steps need to be completed:

1. Create a requirement.txt file, which contains a list of the dependencies, using the following command in the terminal:
   pip3 freeze > requirements.txt
2. Create a Procfile, in order to tell Heroku how to run the project, using the following command in the terminal:
   web: gunicorn MS4_Project.wsgi:application
3. git add, git commit and git push these files to GitHub repository.
   NOTE: these 1-3 steps already done in this project and included in the GitHub repository, but ilustrated here as they are required for the successfull deployment to Heroku.
   As well as that, other things that are required for the Heroku deployment and have to be installed: gunicorn (WSGI HTTP Server), dj-database-url for database connection and Psycopg (PostgreSQL driver for Python). All of the mentioned above are already installed in this project in the requirements.txt file.
4. On the Heroku website you need to create a new app, assign a name (must be unique),set a region to the closest to you(for my project I set Europe) and click Create app.
5. Go to Resources tab in Heroku, then in the Add-ons search bar look for Heroku Postgres(you can type postgres), select Hobby Dev — Free and click Provision button to add it to your project.
6. In Heroku Settings click on Reveal Config Vars.
7. Set the following config variables there:

8. Copy DATABASE_URL's value(Postrgres database URL) from the Convig Vars and temporary paste it into the default database in settings.py.
   You can temporary comment out the current database settings code and just paste the following in the settings.py:

  DATABASES = {     
        'default': dj_database_url.parse("<your Postrgres database URL here>")     
    }

Important Note: that's just temporary set up, this URL should not be committed and published to GitHub for security reasons, so make sure not to commit your changes to Git while the URL is in the settings.py.
9. Migrate the database models to the Postgres database using the following commands in the terminal:
python3 manage.py makemigrations
python3 manage.py migrate
10. Load the data fixtures(categories, products, itinerary, itinerary_items, events) into the Postgres database using the following command:
python3 manage.py loaddata <fixture_name>
11. Create a superuser for the Postgres database by running the following command(you need to follow the instructions and inserting username,email and password):
python3 manage.py createsuperuser
12. You need to remove your Postgres URL database from the settings and uncomment the default DATABASE settings code in the settings.py file.
Note: for production you get the environment variable 'DATABASE_URL' from the Heroku Config Vars and use Postgress database, while for development you use the SQLite as a default database.
13. Add your Heroku app URL to ALLOWED_HOSTS in the settings.py file. 14. You can connect Heroku to GitHub to automatically deploy each time you push to GitHub.
To do so, from the Heroku dashboard follow the steps:

• Deploy section -> Deployment method -> select GitHub
• link the Heroku app to your GitHub repository for this project
• click Enable Automatic Deploys in the Automatic Deployment section
• Run git push command in the terminal, that would now push your code to both Github and Heroku, and perform the deployment.

Alternatively, in the terminal you can run:

• heroku login
• after adding and comitting to Git, run the following command:
  git push heroku master

15. After successful deployment, you can view your app bu clicking Open App on Heroku platform.
16. You will also need to verify your email address, so you need to login with your superuser credentials and verify your email address in the admin panel. Now you will be able to view the app running!

The static files and media files (that will be uploaded by superuser - product/service images) are hosted in the AWS S3 Bucket. To host them, you need to create an account in AWS and create your S3 basket with public access. More about setting it up you can read in Amazon S3 documentation and this tutorial.

In order to send real emails from the application, you need to connect it to your Gmail account, setting up your email address in EMAIL_HOST_USER variable and your app password generated by your email provider in EMAIL_HOST_PASS variable.

• The project's code was developed by following the Code Institute video lessons and based on the understanding of the Boutique Ado Django Mini-Project, but was customized, modified and enhanced to fit the project purposes. Some comments with credits to that were added to some parts of the code, where needed.
• Stack Overflow was extremely helpful and useful during the process of building this project, credits for the certain solutions are given in the comments.
• I also constantly referred to the following documentation sources during the development: Django, Stripe.

• Most of the text was provided by Franco Faura and translated by me. This version is only an educational exercise.
• Portfolio Images provided by Client and the service images were obtained from google images for the purpose of this exercise, as this is only an educational requirement.

I would like to thank everyone who has helped me throughout the development of this project:

• My mentor [Guido] for his guidance, very useful tips and advice!
• Code Institute tutors Michael, Tim, Johan, Stephen, Miklos, Cormac, Igor and others for their help to debug issues, assistance and support!
  Special thanks to Michael for helping me out during the long code working shift at midnight.
• Many thanks to my fellow students, Slack community and, of course, my friends and my family for the time, patience, help and support!
  For the project itself I received inspiration from bouticado and my tututor and also from other students via Slack.

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

This site is made for educational purposes only.

MIT