Milestone 3 for Code Institute - A database web application.

MiDev Glossary app offers users such as professionals like Project Managers or Product Owners the possibility to understand their development teams better.

You can find links to the application and github repository below:

The application live here.

The Github link here.

UX

Very often abbreviations are used within development teams and this app helps Managers to gather what they hear and also use this app as an internal dictionary. Developers, Designers, Marketing specialists also have a chance to help the team and create a better way of working. Users can add/edit words, also add/edit categories, they can search words and navigate according to the alphabet.

Design process

Discover (research focus groups and existing apps, platforms, code) > Define (define issues, brainstorm) > Deliver (create structure, user scenarios and user flow) > Develop (wireframes and prototype, tools: html, css, js, python, scss, mongodb and heroku, test: usability and collect feedback then update)

Discover:researched the right focus group which are Project Managers and Product Owners, researched and gathered other glossary apps, that I later got inspired from. Decided which platform to code the app on and where to deploy, the database, which code language I should use. Languages and platform - html, css, scss, javascript, python, gitpod. Database - MongoDB, Deployment platform - Heroku.

Define:this process involve defining what the issues for our users and how we solve them, what is expected from an MVP (Minimum Viable Product) and what is expected from Product Owners and Project Managers who do not always have a full technical background. This app offers them a place where they can search words they hear from development teams and also store words with a description to save for themselves or share with others. It important that everyone speaks the same language and understand eachother in a project. Users search words differently, which is why both an input search field and alphabet navigation are good options.

Deliver:before developing the app it is important to undertand it's structure and user flow. After I finished with the structure and user flow I continued with creating sketches, wireframes and even Hi-fidelity prototype. I collected feedback and iterated my design numerous times before I started developing. I used Adobe XD to create the wireframe and prototype.

Develop:minor changes were performed in the UI (User Interface) before on prototypes and after being coded. I made sure I had the right structure and followed the UX/UI deliverables as close as possible. During this process I used html, css, js, python, scss, mongodb and heroku. I tested the on responsiveness and also with users. The code itself was tested on W3C HTML Validator, W3C CSS Validator, Pep8online to test app.py, ami.responsivedesign.is and Inspect to test for responsiveness.

Note that the Design process is known as Double Diamond, normally used a framework within UX Designers. This project was not done by the book due to lack of time, but much of the methods in the process were included.

To understand better how users interact with the app it is recommended to do evaluation after the app is launched in production. Gathering feedback surveys, contacting users for an interview and using tools like Hotjar, Google analytics, Google Tag Manager may be very useful.

Image above: Protoype environment in collaboration and prototyping tool Adobe XD.

Final thoughts for front-end: Creating a functional design system according to Atomic Design may be handful in the future.

User Stories

As a new User I would like to:

be able to understand how to navigate in the application.

be able to find/search meaning of words and abbreviations.

be able to sort fast words with alphabet.

be able to create and edit words.

be able to create and edir categories.

Wireframes

Wireframes are attached in my github repository as MiDev_Glossary_Victoria.pdf

The document contains the app structure, mobile and desktop wireframes.

Features

Layout

This is a multi-page layout designed as minimalistic and functional as possible, also responsive and pleasing for the user. The home page displays short information about this app, search input, alphabetical navigation and accordions containing words in the clossary with their description. Each accordion can be deleted and edited.

Colors

Colors are taken from Sass in materialize to make the it easier to change without risking to have multiple colors of the same tone.

Background color: #f5f5f5 grey lighten-4

Primary button color: #004d40 teal darken-4

Secondary button color: #26a69a teal lighten-1

Header and Footer color: #004d40 teal darken-4

Buttons

Buttons in this application are from component library Materialize.

Font

One font set is used from google fonts, called "Roboto". It gives a modern appeal, simplicity and most important easy to read.

Existing Features

Header and footer - The header contains a linked to home logo, menus: Home, New Word, Manage Catergory. The footer below repeats the name of the app and the author. Both the Header and Footer are components from Materialize.

Button "Edit" - This button is found in the accordion with hex color: #004d40 teal darken-4.

Button "Delete/Del" - This button is found in the accordion with hex color: #26a69a teal lighten-1.

Buttons Add Category and Add Word - These buttons are found Add Word and Manage Category pages. Button colors: #004d40 teal darken-4.

Form - The forms are taken from materialize and contain input fields and category dropdown. Forms are found at Add Word page and Manage Category page.

Features Left to Implement

Authentication

Images

Flash messages

Pagination

Search under Manage Categories

Separate field for links in Add New Word

Main Technologies Used

For this project I used Python, HTML, CSS, javascript and Sass programming languages.

Tools used

Used Heroku for uploading the app and Mongo DB for keeping database.

PIP3 for installation of tools needed in this project.

Github to handle version control

Gitpod to code

Other technologies and libraries used:

Jinja to simplify data displaying from the backend.

PyMongo - containing tools for working with MongoDB.

Materialize for components and to make the website responsive easily. https://materializecss.com/

Fontawesome to provide icons from it's library. https://fontawesome.com/

Google Fonts to easily use simple and recognizable fonts on the internet https://fonts.google.com/.

Testing

User Testing - people were are asked to visit the app and test. Reason is to collect feedback and improve the app.

Tested browser lists: Google Chrome, Chrome Lighthouse for audit of website, Safari.

HTML, CSS and JS code

W3C HTML Validator.

W3C CSS Validator.

Pep8online to test app.py.

ami.responsivedesign.is and Inspect to test for responsiveness.

Meeting the needs of the user stories (described earlier in the UX section of this README file)

As a new User I want to be able to understand how to navigate around the web application.

On landing page, the user is welcomed with a welcome text and information about this app, imediately followed below by search, alphabet navigation and common glossary.

Navigation in the header at the top of the page. The Logo, when clicked, redirects the user to Landing page

As a user I would like to be able to add words, edit them and also add, edit categories.

As a user I would like this application to be responsive.

Deployment

heroku - git - PIP - Python 3 - Flask - A MongoDB Atlas account

The app is designed in Gitpod environment and committed to GitHub. Issues occured when I deployed manually, the tried to this through gitpod. Recommendation: Do not deploy manually, only through gitpod terminal.

The following steps were taken to deploy this project to Github:

created a master branch in Github repository through Gitpod fulltemplate.

Committed files using bash terminal commands: git status; git add (specify directory); git commit -m "Initial commit"

Commited and pushed files to the working environment with commands git push, which updates the repository.

To set .gitignore environment variables:

Create file env.py in the root directory of your project. You will then define your variables there because you do not want to expose your MONGODB password and credentials to public.

Create .gitignore in the root directory of your project.

You will nedd to stop git from pushing this file to github, and so keep your environment variables secret. Open .gitignore file add the following text: env.py

Type import os at the top of your env.py file. Once added, type underneath your environment variables using the following syntax: os.environ["Variable Name Here"] = "Value of Variable Goes Here"

Now your environment variables are set in your env.py file. After this you can use them using the following syntax: MONGODB_NAME = os.environ.get('MONGODB_NAME')

To deploy the project to Heroku :

Create a Heroku account

Create requirements.txt file in Gitpod workspace for Heroku to understand installation files to run app.

Then from CLI type pip3 freeze --local > requirements.txt.

Type in terminal Heroku login.

To get the application running create a Procfile that istructs Heroku which file is the entry point.

Follow these commands to create this: echo web: python app.py

To push from Github to Heroku use following CLI commands: git add ., git commit -m "fist Heroku commit", git push

To scale dynos and run the app in Heroku, use commands: heroku ps:scale web=1

We will need to run our Flask application in Heroku, so we need to specify IP and Port in Heroku. To do this go to Settings tab > Config Variables and input: IP Address: 0.0.0.0; Port: 8080

To Deploy using Heroku Git, use git in the command line:

Deploy your changes. Make some changes to the code you just cloned and deploy them to Heroku using Git.

$ git add .

$ git commit -am "commit message"

$ git push heroku master

Go to Heroku. In the heroku dashboard, click on the button "Open App".

Credits

The content is all from the developer, also inspired from Code Institute lessons, RobSimons1 and David Hayden.

code-institute-submissions / midevglossary Goto Github PK

midevglossary's Introduction