Clone build of Kindmeal.my

3 min readApr 5, 2021

This is about my whole experience of building a Clone website of a Malayasian Food website called Kindmeal. With a very basic UI but a lot of features to offer. it is a very unique website. Users can use this website for various purposes that are related to food. Including sharing recipes, sharing posts of their favorite food, searching for restaurants, and a lot more.

Tech Stacks used for this project are:

HTML
JavaScript
CSS(Cascading style sheets)

Landing Page-

This is the landing page of the website. It shows all the offers on different restaurants in a slide show and other relevant information including local news. This page has setTimer component to manage the offers plans to showcase the slideshow.

Sign in and Sign up-

These are the Sign-in and Sign-up pages of the website, we have tried to simulate the login and logout process using Localstorage. We have two options to sign up to the site, either as a user or as a shop owner. This site can cater to both

Meals Deals Page —

This is the Meal deals page, this page is designed to show information related to restaurants and deals available. The user can filter and sort restaurants according to the type of food and location of restaurants. Also if the user wishes they can search the restaurant through the search bar by the name of the shop or deal. We have tried to implement these features using map, filter, find functions.

These are the cards that are shown for each restaurant's offers. Users can click on the cards they wish to avail. These cards also show ratings for the restaurants. Which has been implemented using Javascript and CSS. Each card is rendered with template and JSON data. That is locally stored due to a lack of API.

On clicking the card, the user is taken to that restaurant's page giving them all the necessary information about the offer and the restaurant.

Recipes Page-

The recipes page lets the user share and also browse through different food recipes. The user can add images, instructions, and also videos to the page. Users can search and filter the food items required. Although we couldn't implement it for this part of the project.

Conclusion:

This has been a great experience.We learned a lot of things. Especially the importance of an API for the data. This project has helped me personally to collaborate better and have a better understanding of how different things can be implemented to such as HTML, CSS, and Javascript to create a dynamic website.

Thank you for taking the time to read. If you want to check this project out, feel free to go through this link- https://github.com/abhi5iet/Ganga.