Limitless Recipes is a website for users to find and upload recipes, accessible on a wide range of devices for all users.
- "As a user I want to add my own recipes to the website."
- Using CRUD (Create) a user could input thier recipe by using a form, which submitted to the database (MongoDB) then shown on the website. Add recipe form Recipe shown on website
- "As a user I want to be able to edit my recipe."
- Using CRUD (Update) a user can edit thier submitted recipes using a provided form, which updates the database (MongoDB), showing the updated version the website. Edit recipe button Edit recipe form
- "As a user I want to be able to delete my recipe."
- Using CRUD (Delete) a user could delete thier uploaded recipe from the database, which would then remove it from the website. Delete recipe button
- "As a user I want to be able to easily view other users recipes."
- Using a button on the website called 'view', it opens the specific users website into a full page to be viewed easily. View recipe button View recipe page
- "As a user I want to be able to use a search bar to find recipes."
- Using CRUD (Read) a user can search the database (MongoDB) to find a specific recipe, it will then return results. search bar Search bar returned results
- "As a user I want to be able to create an account."
- This is accomplished by adding a form where the user can input thier details and submit into the database (MongoDB). register page form Logged in
- "As a user who has created an account I want to be able to login."
- This is completed where a user can input thier details previously used to sign up, which is then checked in the database (MongoDB) and is then logged in. Log In Page Logged In
- "As a user I want to be able to write a review for a recipe."
- This was achieved using CRUD (Create) where a user added thier review and it was then submited into the database (MongoDB).Add review button add review form review showing
- "As a user I want to be able to delete my review."
- This was done by using CRUD (Delete) which as a user they can only delete thier reviews. review delete button one
- "I want my users to be able to add thier own recipes".
- "I want my users to be able to find/view other users recipes".
- "I want my users to be able to sign up, sign in and logout".
- "I want my users to be able to review other user recipes".
- "I want my users to be able to search for recipes".
- For users to upload theri recipes onto the website.
- Users to review other users recipes.
- Profile page where users can see thier uploaded recipes.
- Log In/ Log out functionality.
- Ease of use.
- Users can make full use of CRUD functionality for the recipes.
- Allow users to register an account on the website.
- Allow registered users to Create, Read, Update and Delete (CRUD) recipes.
- Create functionality for users to Create, Delete reviews on recipes.
- Create using my current skills, HTML, CSS, JavaScript, Python, Flask and MongoDB
- Navigation bar located at the top of the website for ease of navigation through site.
- Logged in users to be able to use CRUD functionality with recipes.
I have chosen these set of colours for my website:
- #ffcb9a A beige colour used for the main title on the navbar and important messages for example when a recipe is added
- #116466 A dark green used throughout as the main theme colour, I found this colour easy on the eye and flowed well with the rest of the styles.
- #d1e8e2 A light blue, used for the profile page as it gives good contrast between the recipe cards and username titles.
- white was used for a lot of text with backgrounds as I found it popped well against multicolour backgrounds.
- black was used in key places against a white background to make text stand out.
In the project, icons were obtained from Font Awesome. Icons were used for two different settings, one way was functional such as social media. The others were for lists in the recipes such as ingredients and steps.
- "Lexend Mega" Used for main pieces of content like titles and headings.
- "Lato" Used for most of the text throughout the website, as it is a clean font and makes it very user-friendly and easy to read.
When choosing imagery I used Pexels. Images were used mainly for background images in the site as well as a fallback image if user's uploaded image is not avaliable.
- Register Form:
- The register form has validation that limits the amount of characters for a username and password, the password must contain at least one number and one uppercase and lowercase letter.
- Add and Edit Recipe Form:
- Recipe name is limited from 2-44 characters and must start with a letter and contain no special characters.
- 'How many people does this recipe serve?', only accepts number inputs with a maximum of 100, and positive numbers only.
- The description must be between 10-150 characters.
- Image URL will only accept URL's ending with jpeg, jpg, gif and png.
- Preparation and cooking time will only accept positive numbers to a maximum of 1000.
- All fields are required.
- Add Review Form:
- Description must be between 10-49 characters.
- All fields are required.
- A recipe and review can not be deleted with one click, it will open a modal with a yes or no option.
The project has four collections in MongoDB, the layout implemented is:
Review ID's are also stored in the recipe collection as an array in there corrisponding recipe.
-
Wireframes are created with
Any changes from the wireframes were design choices whilst developing
- Created with HTML5, CSS3, Javascript, jQuery, Materialize and MongoDB.
- Home/Index page to give the users an idea of the website with the use of imagery and text, with a call to action button to discover recipes.
- Responsive design.
- Footer with social media links.
- 'Add Recipe' page for users to create thier own recipe and add it to the website.
- Reviews button which opens a form, for users to review recipes.
- Search bar for users to search the website for specific recipes using the recipe name or the user who added it.
- Profile page showing when the user signed up and the recipes they have added.
- A future feature that would be a good addition would be a favorite button on recipes. This button would save the recipe in the users profile for ease of use to come back to later.
- A future feature I would like to implement would be for more functionality for users to edit thier usernames or even delete thier account.
Languages Used:
- HTML5
- HTML5 provides the structure for my content.
- CSS3
- CSS3 is used for styling HTML5.
- JavaScript
- Used to create functionality.
- jQuery
- Used to create functionality.
- Python
- Python is used for the backend.
Frameworks, libarys and Other
- Google Fonts
- Used to provide 'Lexend Mega' and 'Lato' fonts for the project.
- Materialize
- Materialized is used for the design framework
- FontAwesome
- FontAwesome is used for icons in the website such as social links.
- MongoDB
- MongoDB is used as the database for the project.
- Flask
- Flask is the web framework used to provide libraries, tools and technologies for the app.
- Jinja
- Jinja is used for templating Python.
- Werkzeug
- Werkzeug is used for password hashing and authentication and autohorization.
- Git
- Git was used for version control.
- GitHub
- GitHub is used to host the project.
- Heroku
- Heroku is used as the cloud platform to deploy the app.
- Balsamiq
- Balsamiq is used for creating wireframes
- Gitpod
- Gitpod was used to develop the project.
Testing Tools/ Code validity
- Chrome dev tools
- Used to check responsiveness and find problems/ bugs.
- Autoprefixer
- Autoprefixer is used to parse the CSS and to add vendor prefixes to CSS rules.
- W3C Markup Validation
- The W3C Markup Validation Service is used to check whether there were any errors in the HTML5 code.
- W3C CSS Validation
- The W3C CSS validator is used to check whether there were any errors in the CSS3 code.
- JShint
- JShint is a JavaScript validator that is used to check whether there were any errors in the JavaScript code.
- PEP8
- The PEP8 validator is used to check whether there were any errors in the Python code.
- Pyton Tester
- Python code syntax checker
- Closing Tag Checker for HTML5
- Validates all tags are opening and closing correctly.
The full testing process can be found here
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site Link in the "GitHub Pages" section.
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...
- 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.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY-NAME
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY-NAME
> 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.
-
Login to your MongoDB account
-
Create a cluster
-
Create a database
-
Create four collections in the database named:
- users
- countries
- blogs
- Create a file called .gitignore in the root directory of your project
- Add the following text in your .gitignore file: env.py
- Create a file called env.py. This will contain all your environment variables
- Create your own personal secret key and password. In env.py add the following text and replace YOURPASSWORD, YOUR-CLUSTER-NAME, YOUR-DATABASE-NAME and YOURSECRETKEY
- Open your terminal window in your IDE
- Type in python3 app.py to run the app
- Create a Heroku account
- Create a new app and select your region
- In the terminal window of your local IDE type pip3 freeze --local > requirements.txt to create a requirements.txt file. This file is needed so that Heroku knows which files needs to be installed
- In the terminal window of your local IDE type python app.py > Procfile to create a Procfile. This file is needed so that Heroku knows which file is needed as its entry point to get the app up and running
- In the terminal window of your local IDE type in heroku login or heroku login -i and fill in your heroku credentials and password
- Commit all your files and type in the same terminal window git push heroku master. Now all your files are committed to Heroku
- Go back to your Heroku account and go to settings
- Click on Reveal Config Vars to reveal the keys and the values
- Set the keys and values as follow:
(KEY: VALUE)
- IP: 0.0.0.0
- PORT: 5000
- MONGO_DBNAME: YOUR-DATABASE-NAME
- MONGO_URI: mongodb+srv://root:YOURPASSWORD@YOUR-CLUSTER-NAME.2qobt.mongodb.net/YOUR-DATABASE-NAME?retryWrites=true&w=majority
- SECRET_KEY: YOURSECRETKEY
- Click on Open app in the right corner of your Heroku account, the application will open in a new window
- The live link is available from the address bar
- Code Institute Course Content
- Youtube
- W3C
- Balsamiq
- Stack Overflow
- Code Institute Slack community
- Pexels was used for imagery.
- Mentor Can Sucullu for his feedback and advice throughout, Mentor Precious Ijege for his support and knowledge.
- Tutor support at Code Institute for their assistance.
- Slack community for assistance and questions.
For any queries or support contact jack200034@hotmail.com