Ingestibles, an Instructables clone, for people to explore, share, and create recipes. We make it easy to learn how to cook anything, one step at a time.
Live Link: Ingestibles
On home page, users can peruse through different recipes, which are grouped by tags/categories.
Users can view all recipes by either clicking on the "Recipes" button in the nav bar or clicking on the user profile dropdown and clicking "All Recipes." Once on this page, user can see all the recipes ordered by date of post starting with the most recent.
Once logged in, user can click on the profile pic to access the dropdown links and navigate to one's own profile page, all recipes page, my-plate page including recipes created by logged-in user and user's favorite recipes, and the form to create a new recipe.
Users can explore single recipe page and logged-in users can like and comment on all recipes.
Users can search recipes by their titles, ingredients, tags on any page through nav bar.
Logged-in users can create recipes, edit and delete their own recipes. As each recipe would have customized number and content of ingredients, steps and tags, a dynamic recipe creation form and a pre-filled recipe edit form will capture the difference and allow customization.
- Python
- Flask
- PostgreSQL
- SQLAlchemy
- HTML
- Vanilla CSS
- JavaScript
- React
- Redux
- AWS S3
The Virtual DOM in React allows dynamic and interactive components. The following code is used to dynamically display tags and manage their states per change of input, in the pre-filled recipe edit form.
{[...Array(tagCounter)].map((el, i) => (<div className='createRecipeEl' key={`tag${i + 1}`}>
<label className='editRecipeLabel'>Tag #{i + 1} </label>
<input
className='listingInput'
type="text"
defaultValue={tags[`tag${i+1}`]}
onChange={(e) => {
setTags(tags=>{
tags[`tag${i+1}`] = e.target.value
return tags
})
}}
placeholder='At least 1 Tag'
/>
</div>))}- View other users' Ingestibles pages including their profiles and recipes
- Follow other users
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent