The app will let user log in using Google Authentication, add items and delete individual items and all at once.
Video of the app in the following link
1.UX
2.Features
4.Testing
6.Credits
- As a user I want to log in using my Google Account.
- As a user I want to be able to add items to my list.
- As a user I want to delete individual items.
- As a user I want to delete all items at once.
Using Colorhunt.co I chose a simple palette with simple colours for an easy site navigation:
#413B88- Navbar and add items button.#ecda92- Hoover buttons.- Tomato for Delete items and delete all.
- Bebas Neue - Site name
- Quicksand - All content on the page.
One of the emojis available on Favicon.io
The user can create, read and delete content in the page.
- Users can sign up and create an account.
- Users can add elements to the list.
- Users can access to their list once they are logged in.
- Users can delete single items.
- Users can delete all items at once.
| Field Description | Collection Key | Data type |
|---|---|---|
| Unique ID | _id | ObjectId |
| User ID | user_id | String |
| First name | fname | String |
Objects inside the list array:
| Field Description | Collection Key | Data type |
|---|---|---|
| Unique ID | _id | ObjectId |
| List | value | String |
Here a screenshot of the collection in the database:
h1> 3. Technologies Used
- Python3 - Used to create the main application functionality
- HTML5 - to build the structure of this site.
- CSS3 - to style the page, and fix media queries and the max width.
- Flask - Python web framework
- PyMongo - PyMongo is a Python tool for working with MongoDB.
- Flask-Pymongo - Flask-PyMongo bridges the gap between Flask and PyMongo.
- Google OAuth 2.0 - To access Google APIs and retrieve the users information when they log in.
- Jinja - Template language for Python.
- VSCode - used as IDE for the project.
- Git - used for version control.
- Github - used to host repository and to generate the live website.
- Google Fonts - used for fonts on the site.
- Chrome Developer Tools - used to test and optimize the site.
- randomkeygen.com - Random secure password & keygen generator used to create the Flask SECRET_KEY.
The app has been manually tested only on the server. Responsiveness tested as well using Google Chrome Developer tools.
As I'm waiting for my Google payment account to be confirmed I haven't deployed it yet.
The main functionality of my site has been found in:
- To set up Google Authorization I followed this tutorial
- Personal project
Also: