Find wireframes here : https://docs.google.com/presentation/d/1b8cGAnQ1cPWpWl9jxb-ygo3gx9H5H7fphBi4suBce_8/edit?usp=sharing
In this section, you will include a few paragraphs providing an overview of your project. Essentially, this part is your "sales pitch".
At this stage, you should have a name for your project so use it! Don't introduce the project as a "portfolio project" for the diploma.
In this section, describe what the project hopes to accomplish, who it is intended to target, and how it will be useful to the target audience.
Consider adding a mockup image using the "Am I Responsive" website. Here's your deployed site as an example: https://ui.dev/amiresponsive?url=https://victoria-bakery-blog.herokuapp.com
Screenshots for the README and testing should not be inside of assets/ or static/ image folders.
(reminder: assets/ and static/ are for files used on the live site, not documentation)
Consider adding a new folder called documentation, and add the amiresponsive screenshot inside of that folder.
To add the image into your README, use this format:
(assuming you have a new folder called documentation with an image called "mockup.png")
Note: Markdown files (.md) should not contain HTML elements like img, br, div, a, etc, only Markdown formatting.
Find out more about using Markdown elements here:
https://pandao.github.io/editor.md/en.html
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
In this section, you will briefly explain your design processes.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
Explain your colours and the colour scheme.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
#000000used for primary text.#E84610used for primary highlights.#4A4A4Fused for secondary text.#009FE3used for secondary highlights.
Consider adding a link and screenshot for your colour scheme using "coolors". https://coolors.co/generate
When you add a colour to the palette, the URL is dynamically updated, making it easier for you to return back to your colour palette later if needed.
Example:
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
I used coolors.co to generate my colour palette.
If you've used CSS :root variables, consider also including a code snippet here!
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
I've used CSS :root variables to easily update the global colour scheme by changing only one value, instead of everywhere in the CSS file.
:root {
/* P = Primary | S = Secondary */
--p-text: #000000;
--p-highlight: #E84610;
--s-text: #4A4A4F;
--s-highlight: #009FE3;
--white: #FFFFFF;
--black: #000000;
}Explain any fonts and icon libraries used, like Google Fonts and/or Font Awesome.
Consider adding a link to each font used, and the Font Awesome site if used (or similar icon library).
Example:
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
-
Montserrat was used for the primary headers and titles.
-
Lato was used for all other secondary text.
-
Font Awesome icons were used throughout the site, such as the social media icons in the footer.
In this section, list all of your user stories for the project.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
- As a new site user, I would like to ____________, so that I can ____________.
- As a new site user, I would like to ____________, so that I can ____________.
- As a new site user, I would like to ____________, so that I can ____________.
- As a new site user, I would like to ____________, so that I can ____________.
- As a new site user, I would like to ____________, so that I can ____________.
- As a returning site user, I would like to ____________, so that I can ____________.
- As a returning site user, I would like to ____________, so that I can ____________.
- As a returning site user, I would like to ____________, so that I can ____________.
- As a returning site user, I would like to ____________, so that I can ____________.
- As a returning site user, I would like to ____________, so that I can ____________.
- As a site administrator, I should be able to ____________, so that I can ____________.
- As a site administrator, I should be able to ____________, so that I can ____________.
- As a site administrator, I should be able to ____________, so that I can ____________.
- As a site administrator, I should be able to ____________, so that I can ____________.
- As a site administrator, I should be able to ____________, so that I can ____________.
In this section, display your wireframe screenshots using a Markdown table.
Instructions on how to do Markdown tables start on line #213 on this site: https://pandao.github.io/editor.md/en.html
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes. I've used Balsamiq to design my site wireframes.
| Size | Screenshot |
|---|---|
| Mobile |  |
| Tablet |  |
| Desktop |  |
| Size | Screenshot |
|---|---|
| Mobile |  |
| Tablet |  |
| Desktop |  |
| Size | Screenshot |
|---|---|
| Mobile |  |
| Tablet |  |
| Desktop |  |
Repeat for any addition wireframe pages you have.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
In this section, you should go over the different parts of your project, and describe each in a sentence or so.
You will need to explain what value each of the features provides for the user, focusing on who this website is for, what it is that they want to achieve, and how your project is the best way to help them achieve these things.
For some/all of your features, you may choose to reference the specific project files that implement them.
IMPORTANT: Remember to always include a screenshot of each individual feature!
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
-
Title for feature #1
- Details about this particular feature, including the value to the site, and benefit for the user. Be as detailed as possible!
-
Title for feature #2
- Details about this particular feature, including the value to the site, and benefit for the user. Be as detailed as possible!
-
Title for feature #3
- Details about this particular feature, including the value to the site, and benefit for the user. Be as detailed as possible!
Repeat as necessary for as many features as your site contains.
Hint: the more, the merrier!
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
Do you have additional ideas that you'd like to include on your project in the future? Fantastic! List them here! It's always great to have plans for future improvements! Consider adding any helpful links or notes to help remind you in the future, if you revisit the project in a couple years.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
- Title for future feature #1
- Any additional notes about this feature.
- Title for future feature #2
- Any additional notes about this feature.
- Title for future feature #3
- Any additional notes about this feature.
In this section, you should explain the various tools and technologies used to develop the project. Make sure to put a link (where applicable) to the source, and explain what each was used for. Some examples have been provided, but this is just a sample only, your project might've used others. Feel free to delete any unused items below as necessary.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
- HTML used for the main site content.
- CSS used for the main site design and layout.
- CSS :root variables used for reusable styles throughout the site.
- CSS Flexbox used for an enhanced responsive layout.
- CSS Grid used for an enhanced responsive layout.
- JavaScript used for user interaction on the site.
- Python used as the back-end programming language.
- Git used for version control. (
git add,git commit,git push) - GitHub used for secure online code storage.
- GitHub Pages used for hosting the deployed front-end site.
- Gitpod used as a cloud-based IDE for development.
- Bootstrap used as the front-end CSS framework for modern responsiveness and pre-built components.
- Materialize used as the front-end CSS framework for modern responsiveness and pre-built components.
- Flask used as the Python framework for the site.
- Django used as the Python framework for the site.
- MongoDB used as the non-relational database management with Flask.
- SQLAlchemy used as the relational database management with Flask.
- PostgreSQL used as the relational database management.
- ElephantSQL used as the Postgres database.
- Heroku used for hosting the deployed back-end site.
- Cloudinary used for online static file storage.
- Stripe used for online secure payments of ecommerce products/services.
- AWS S3 used for online static file storage.
Entity Relationship Diagrams (ERD) help to visualize database architecture before creating models. Understanding the relationships between different tables can save time later in the project.
Using your defined models (one example below), create an ERD with the relationships identified.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
class Product(models.Model):
category = models.ForeignKey(
"Category", null=True, blank=True, on_delete=models.SET_NULL)
sku = models.CharField(max_length=254, null=True, blank=True)
name = models.CharField(max_length=254)
description = models.TextField()
has_sizes = models.BooleanField(default=False, null=True, blank=True)
price = models.DecimalField(max_digits=6, decimal_places=2)
rating = models.DecimalField(
max_digits=6, decimal_places=2, null=True, blank=True)
image_url = models.URLField(max_length=1024, null=True, blank=True)
image = models.ImageField(null=True, blank=True)
def __str__(self):
return self.nameA couple recommendations for building free ERDs:
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
Using Markdown formatting to represent an example ERD table using the Product model above:
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
-
Table: Product
PK id (unique) Type Notes FK category ForeignKey FK to Category model sku CharField name CharField description TextField has_sizes BooleanField price DecimalField rating DecimalField image_url URLField image ImageField
GitHub Projects served as an Agile tool for this project. It isn't a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.
Through it, user stories, issues, and milestone tasks were planned, then tracked on a weekly basis using the basic Kanban board.
Consider adding a basic screenshot of your Projects Board.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
GitHub Issues served as an another Agile tool. There, I used my own User Story Template to manage user stories.
It also helped with milestone iterations on a weekly basis.
Consider adding a screenshot of your Open and Closed Issues.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
I've decomposed my Epics into stories prior to prioritizing and implementing them. Using this approach, I was able to apply the MoSCow prioritization and labels to my user stories within the Issues tab.
- Must Have: guaranteed to be delivered (max 60% of stories)
- Should Have: adds significant value, but not vital (the rest ~20% of stories)
- Could Have: has small impact if left out (20% of stories)
- Won't Have: not a priority for this iteration
For all testing, please refer to the TESTING.md file.
IMPORTANT:
⚠️ DO NOT update the environment variables to your own! These should NOT be included in this file; just demo values!⚠️ ⚠️ DO NOT update the environment variables to your own! These should NOT be included in this file; just demo values!⚠️ ⚠️ DO NOT update the environment variables to your own! These should NOT be included in this file; just demo values!⚠️
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
The live deployed application can be found deployed on Heroku.
This project uses ElephantSQL for the PostgreSQL Database.
To obtain your own Postgres Database, sign-up with your GitHub account, then follow these steps:
- Click Create New Instance to start a new database.
- Provide a name (this is commonly the name of the project: VictoriaBakeryBlog).
- Select the Tiny Turtle (Free) plan.
- You can leave the Tags blank.
- Select the Region and Data Center closest to you.
- Once created, click on the new database name, where you can view the database URL and Password.
This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn't persist this type of data.
To obtain your own Cloudinary API key, create an account and log in.
- For Primary interest, you can choose Programmable Media for image and video API.
- Optional: edit your assigned cloud name to something more memorable.
- On your Cloudinary Dashboard, you can copy your API Environment Variable.
- Be sure to remove the
CLOUDINARY_URL=as part of the API value; this is the key.
This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
| Key | Value |
|---|---|
CLOUDINARY_URL |
user's own value |
DATABASE_URL |
user's own value |
DISABLE_COLLECTSTATIC |
1 (this is temporary, and can be removed for the final deployment) |
SECRET_KEY |
user's own value |
Heroku needs two additional files in order to deploy properly.
- requirements.txt
- Procfile
You can install this project's requirements (where applicable) using:
pip3 install -r requirements.txt
If you have your own packages that have been installed, then the requirements file needs updated using:
pip3 freeze --local > requirements.txt
The Procfile can be created with the following command:
echo web: gunicorn app_name.wsgi > Procfile- replace app_name with the name of your primary Django app name; the folder where settings.py is located
For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
Either:
- Select Automatic Deployment from the Heroku app.
Or:
- In the Terminal/CLI, connect to Heroku using this command:
heroku login -i - Set the remote for Heroku:
heroku git:remote -a app_name(replace app_name with your app name) - After performing the standard Git
add,commit, andpushto GitHub, you can now type:git push heroku main
The project should now be connected and deployed to Heroku!
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
pip3 install -r requirements.txt.
You will need to create a new file called env.py at the root-level,
and include the same environment variables listed above from the Heroku deployment steps.
Sample env.py file:
import os
os.environ.setdefault("CLOUDINARY_URL", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")
# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:
- Start the Django app:
python3 manage.py runserver - Stop the app once it's loaded:
CTRL+Cor⌘+C(Mac) - Make any necessary migrations:
python3 manage.py makemigrations - Migrate the data to the database:
python3 manage.py migrate - Create a superuser:
python3 manage.py createsuperuser - Load fixtures (if applicable):
python3 manage.py loaddata file-name.json(repeat for each file) - Everything should be ready now, so run the Django app again:
python3 manage.py runserver
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/Alena18/VictoriaBakeryBlog.git
- Press Enter to create your local clone.
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.
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 owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
Use this space to discuss any differences between the local version you've developed, and the live deployment site on Heroku.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
In this section you need to reference where you got your content, media, and extra help from. It is common practice to use code from other repositories and tutorials, however, it is important to be very specific about these sources to avoid plagiarism.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
Use this space to provide attribution links to any borrowed code snippets, elements, or resources. A few examples have been provided below to give you some ideas.
Ideally, you should provide an actual link to every resource used, not just a generic link to the main site!
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
| Source | Location | Notes |
|---|---|---|
| Markdown Builder | README and TESTING | tool to help generate the Markdown files |
| Chris Beams | version control | "How to Write a Git Commit Message" |
| W3Schools | entire site | responsive HTML/CSS/JS navbar |
| W3Schools | contact page | interactive pop-up (modal) |
| W3Schools | entire site | how to use CSS :root variables |
| Flexbox Froggy | entire site | modern responsive layouts |
| Grid Garden | entire site | modern responsive layouts |
| StackOverflow | quiz page | Fisher-Yates/Knuth shuffle in JS |
| YouTube | leaderboard | using localStorage() in JS for high scores |
| YouTube | PP3 terminal | tutorial for adding color to the Python terminal |
| strftime | CRUD functionality | helpful tool to format date/time from string |
| WhiteNoise | entire site | hosting static files on Heroku temporarily |
Use this space to provide attribution links to any images, videos, or audio files borrowed from online. A few examples have been provided below to give you some ideas.
If you're the owner (or a close acquaintance) of all media files, then make sure to specify this. Let the assessors know that you have explicit rights to use the media files within your project.
Ideally, you should provide an actual link to every media file used, not just a generic link to the main site!
The list below is by no means exhaustive. Within the Code Institute Slack community, you can find more "free media" links
by sending yourself the following command: !freemedia.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
| Source | Location | Type | Notes |
|---|---|---|---|
| Pexels | entire site | image | favicon on all pages |
| Lorem Picsum | home page | image | hero image background |
| Unsplash | product page | image | sample of fake products |
| Pixabay | gallery page | image | group of photos for gallery |
| Wallhere | footer | image | background wallpaper image in the footer |
| This Person Does Not Exist | testimonials | image | headshots of fake testimonial images |
| Audio Micro | game page | audio | free audio files to generate the game sounds |
| Videvo | home page | video | background video on the hero section |
| TinyPNG | entire site | image | tool for image compression |
Use this space to provide attribution to any supports that helped, encouraged, or supported you throughout the development stages of this project. A few examples have been provided below to give you some ideas.
🛑🛑🛑🛑🛑 END OF NOTES (to be deleted) 🛑🛑🛑🛑🛑
- I would like to thank my Code Institute mentor, Tim Nelson for their support throughout the development of this project.
- I would like to thank the Code Institute tutor team for their assistance with troubleshooting and debugging some project issues.
- I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self doubt and imposter syndrome.
- I would like to thank my partner (John/Jane), for believing in me, and allowing me to make this transition into software development.
- I would like to thank my employer, for supporting me in my career development change towards becoming a software developer.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent