Introduction
Technologies used
Design
User Experience (UX)
Testing
Deployment
Credits

This project is for the milestone project 3 of the Code Institutes Full Stack Developer Course, this Application will allow a user to log baby's daily events. The user can create, read, update and delete baby records for feeding, sleep, nappies and more.

- materialize UI
- HTML
- Custom CSS

- MongoDb
- Python
- Flask
- PostgreSQL
- Heroku

The home page is designed with a side menu on mobile:

and a top menu on larger screen sizes:

All icons are from font-awesome

The site is designed as mobile-first and to be responsive depending on the user media device. I created low fidelity wireframes in balsamiq cloud to plan the key features of the site which were the home, registration pages and the cards for entering and editing cards.

The home page was deisgned with a hero-image and top navigation bar. The user can use the links to login and register from the nav-bar.

when the user logs in they are presented with a home page showing their children, I created a low fidelity wireframe and mapped the links to other screens to help with my required app routing:

The childs record page was made into stacked rows and columns at medium and above screen sizes:

The user must be able to:

• login to the site
• add new children to the site
• record information about a child
• delete a child
• delete and edit a record

see TESTING.md

This project is deployed using Heroku. To deploy to Heroku, follow these steps:

1. In GitPod CLI in the root directoy of the project, run: pip3 free --local > requirements.txt to create a requirements.txt file.
2. In the Gitpod project's root directory, create a new file called Procfile. Open the Procfile, and inside this, check that web: python3 run.py has been added or whatever the name of your application happens to be. Remove the blank line at the bottom of the file if that has been created.
3. Login to Heroku, select 'Create new app', add the desired name for your app and choose your closest region, note all names must be unique.
4. Navigate to the Deploy tab on Heroku dashboard and select Github. Search for your repository and when found, click 'connect'.
5. Navigate to the settings tab, click 'reveal config vars' and input the the following:

** either use your pre configured database url, or provision a postgreSQL database in heroku from the project menu this value will then be pre-populated

6. Return to the Deploy tab and select 'enable automatic deploys'
7. Click 'deploy branch'
8. Click 'Open app' after the build is completed

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

The github deployment text was taken from the code institutes template

the authorisation and login code was taken in part from a previous task project which was created as part of the code institutes coursework.

media and images provided by unspalsh