Encourage your kids to become more active in the kitchen and give them a basic knowledge of how to prepare food them self!
MongoDB database project stored in GitHub and deployed to Heroku.
The UX Framework (Strategy Plane)
The idea of this website is to create meals and snacks by follow easy instructions. Target audience is primary the younger generation. Recipes can are displayed on website for free. An options to become a user to create users own recipes to share with other users.
Build a recipe webpage with HTML, CSS, JavaScript, Python, MongoDB, Flask technologies where users can manipulate CRUD functions (create, read, update and delete). The user will also be able to store data.
The type of users for the website are kid, guest user, parents of kids, registered users, admin user.
Kids goals
As a kid I want:
- the recipes to be easy to find on the website, so I won’t lose interest.
- the recipes to be easy to follow and be understandable, so I won’t be discouraged to make things in the kitchen.
- the webpage to have an appealing layout with fun picture, so I would be inspired to try the recipes.
Guest user goals
As a guest user I want:
- navigation to be easy on the website, so I won’t be discouraged to use the website.
- have the option to register as a user, if I like the page and want to see more.
- information on purpose of website and how it’s used, so I would know what it’s about.
- all links to work without error, so I wont chose to search of other pages.
Parent goals:
As a parent I want:
- the only communication possible is through posts that are public, to prevent unsupervised contact with predators or bad influences.
Registered user goals
As a registered user I want:
- to share my own recipes, so others can try them.
- to know how advance the recipes are, so I can consider if I can or want to make it.
- to be able to delete my recipes, if I don't want to display it.
- to be able to edit my recipes, if want to change something with it.
Admin and Goals
As an admin I want:
- to be able to create new categories, if it's needed.
- to be able to edit or delete categories, if it's needed.
- users to be able to contact me if something is wrong with the website.
Font style used for the website is Atma and Oswald. Atma for headers and logo and Oswald for all other text.
Except for black and white the 3 basic colors used through the website are:
• Light gray
• Purple
• limegreen
In the top navbar there is a dropdown button with all recipe categories open for public. Once I select one of them rows with recipes are shown in the body. To view the you click on the name or pic.
For the first time user, the option to “Register” or “Sign In” on the first page. When choosing “Register” user have to fill in a username and a password. Then click “Create account” and the page automatically takes the user to their profile page. If user already has an account they just click on the “Sign In” button and fill in the username and password.
When you’re a logged in user you will see a button in the top navbar called “Categories”. When clicked a dropdown list shows of all category options shows. Once I select one of them a list with all of those recipes should show in the main window.
For Admin, the categories link in top navbar gives access to add/edit/delete the categories.
As a registered user you should see a button called “Create Recipes” in your profile. Once clicked it should clear how to fill in the fields.
By clicking on the "Edit" button on your recipe you should be able to open up the edit form and save the changes.
If you want to delete a post, it should be easily done by clicking on “Delete Recipe” button on the page of your recipe. You will get a confirmation message that the post has been deleted.
In the top navbar the “Sign In” button should be displayed if your an unregistered user or if you not logged in yet.
The “Sign Out” button in the top navbar should be clickable and log you out of your account. You will get a confirmation popup message that you've been logged out.
- Snacks
- Lunch
- Dinner
- Healthy
- Sweets
- Party
- Category
- Name of the recipe
- Created by user
- Recipe Image
- Cooking Time
- Portion size
- Difficult level
- Ingredients need
- Cooking instructions
- Tips on things to think about or to improve the recipe
First Page
Login
Register
Admin Profile
Add Category
Manage Categories
Categories
Unregistered User
Create Recipes
Recipe Layout
Popup window First Page: From Materialized
As using The Category layout as First Page layout, a popup show for welcoming and explaining short the page perpose.
Top Navbar: From Materialized
Navbar with links aligned to the right for recipes, login, register. As a user you will have access to links create recipes and delete recipes.
Bottom Navbar: From Materialized
Toggler with categories inspiration, nutrition.
Register Form: From TravelTim at CI
User create a username and password that get stored in the database under user.
Login Form: From TravelTim at CI
Login with username and password.
Logout Function: From TravelTim at CI
When user logout it brings them back to the login site.
Profile Page setup: From TravelTim at CI
Personalized profile page for logged in user. If you have created any recipes then they will show here.
Admin's profile is a little different. It will give access to editing categories.
Links: Responsive links to recipes, forms, profile, add recipes, categories and contact.
Recipe Form:
Includes input fields for name, ingredients, instruction, and additional notes. A dropdown menu for cooking time, difficulty options, categories, portions. The information saved in database.
Edit/delete Recipe:
If user wants to edit recipe it will call for selected recipe and open it in the add recipe layout. If user choose to delet recipe it will bring them back to category site.
Images:
All images are taken from internet and box sized to fit the recipes pages, except for the logo and categoriy pictures. They are save in the project with reference under media.
Add Image to recipes Code from Gazza J MS3
With help from Gazza's project, I used the funtion of adding url to the database recipe and display it.
Flash messages:
Vertification to users when creating, editing or deleting post or deleting account.
Recipe Buttons:
In the top right coner of every recipe that profile user has created is an option to edit the recipe or delete it. When register an account or login there is a comfirmation button at the end.
Footer From Materialized
Repitition links at the bottom from the navbars, copyright information, and a back to top button.
Bring to Top Button :
Subscription Could be added of weekly updates.
Categories More categories could be added if needed.
Delete Delete account function, either for Admin or user.
Text Editor:
- GitPod – the editor to build, commit, and push data to GitHub.
Control System:
- GitHub – used to host the project.
Database:
- MongoDB – cloud based service used for managing the database.
Platform Host:
- Heroku – Cloud based platform for deployment of app.
Key Generator:
- RandomKeygen – used to create user key for website.
Languages:
- HTML – for the basic structure of the project.
- CSS –for the overall style of website.
- JavaScript - used to activate fuctions
- jQuery – used as the main JavaScript function.
- Python – for the backend of project.
Frameworks:
- Materialize – For Navbar
- Flask –
- Werkzeug -
Style:
- Google Fonts – For using and Oswald and Atma fonts on website.
- Balsamiq Wireframes – used for the websites wireframes.
Validations:
- W3C CSS Validator - Validate CSS
- W3C HTML Validator - Validate HTML
- Chrome DevTools - Errors in console
- Jshint](https://jshint.com/) - Validate JavaScript
- PEP8 – for validate the Python code.
Deployment for this GitHub repository project is done through Heroku through the following steps;
1. Heroku
-
Create an account on Heroku and Login
-
We have to register the MongoDB database information for the project. Under “Settings” scroll down to “Config Vars”. We need to add following variables for our env.py to secure the webpage;
- IP : (Add ip address)
- PORT : (0.0.0.0)
- SECRET_KEY : (Add secret key)
- MONGO_URI : (Add string from MongoDB cluster connection button)
- MONGO_DBNAME : (Add your MongoDB project name)
-
To create new application, click on “New” on the dashboard and then choose “Create new app”.
-
Choose an app name without spaces.
-
Click on Deployment and choose the deployment method of your choice (in this case it GitHub).
-
Click on your GitHub Name that appears in the window as a dropdown list and select your project.
-
Click on the “Connect” button for sync app and project.
2. GitPod
-
Create 2 new files in terminal called Procfile and requirements.txt for connecting project information to Heroku.
-
$ echo web: python app.py > Procfile
-
$ pip3 freeze – local > requirements.txt
-
$ git status
(To check that all required app installed equals to the list in requirements.txt.) -
Commit the files to GitHub by typing this in the terminal;
-
$git add requirements. txt
-
$ git commit -m “Add requirements.txt”
-
$ git push
(Do the same for Procfile (remember that it’s a big “P”. Double check your GitHub project.)
3. Heroku
- Go back to Heroku. Under “Deploy” section select the “Enable Automatic Deploys” for Automatic Deploys and select “Deployment Branch” for Manual Deploy.
(Heroku connects with GitHub and start building the app with the required packages. Confirmation in the bottom of the window will show when its done.)
- Your project is now deployed and updates every time you push information to GitHub.
Clone the project:
- Log in to GitHub and locate the repository you like to clone.
- Click on the “Code” button on the left side of the GitPod.
- In the dropdown menu click on the HTTP option in the left top corner.
- Click on the copy icon for the repository url.
- In your local IDE choose the location where you want your clone directory.
- Type “git clone” in Terminal and paste the url. Enter.
Clone to GitHub Desktop:
- Log in to GitHub and locate the repository you like to clone.
- Click on the “Code” button on the left side of the GitPod.
- In the dropdown menu click on the HTTP option in the left top corner.
- Click on the “Open with GitHub Desktop.
- Then follow the prompts GitHub Desktop instructions to complete the clone.
Link to Media.md information.
Acknowledgementsacknowled
• I received inspiration for this project from X
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent