An open API service indexing awesome lists of open source software.

https://github.com/irfnd/fe-masakin-app

Masakin App (Frontend) - "A place to find inspiration for cooking recipes anywhere and anytime"
https://github.com/irfnd/fe-masakin-app

chakra-ui javascript react vercel

Last synced: about 2 months ago
JSON representation

Masakin App (Frontend) - "A place to find inspiration for cooking recipes anywhere and anytime"

Awesome Lists containing this project

README

          



Logo

Masakin App (Frontend)


A place to find inspiration for cooking recipes anywhere and anytime


View Demo
|
Report Bug
|
Request Feature


## About The Project

**Masakin App** is a simple website that provides a variety of user-entered recipes, the recipes provided display ingredients and cooking stages with videos. Users can leave comments for the displayed recipes. In addition, users can also give likes and save the recipes they want.

### Built With

This app was built with some technologies below:

[![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)](https://www.ecma-international.org/publications-and-standards/standards/)
[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
[![Chakra UI](https://img.shields.io/badge/Chakra--UI-319795?style=for-the-badge&logo=chakra-ui&logoColor=white)](https://chakra-ui.com/)
[![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com/)

## Getting Started

### Prerequisites

Before going to the installation stage there are some software that must be installed first.

[![Node JS](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)](https://nodejs.org/en/download)

### Optional

You can install yarn package manager for your project

[![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white)](https://yarnpkg.com/)

### Installation

If you want to run this project locally, I recommend you to configure the [backend](https://github.com/irfnd/be-masakin-app/) first before configuring this frontend repo.

- Clone this repo

```bash
git clone https://github.com/irfnd/fe-masakin-app
```

- Go to folder repo

```bash
cd fe-masakin-app
```

- Install packages

```bash
npm install
```

- or install packages with yarn

```bash
yarn
```

- Setup Environment
- Type `npm run start` or `yarn start` to start project
- Type `npm run build` or `yarn build` to build production

### Setup Environment

- Read `.env.example` to get all detail environment for this project.
- Create your `.env` file based on .env.example
- Put `.env` to root project folder
- Example:

```
REACT_APP_MODE_ENV=[production/development]
REACT_APP_REST_API=[your-deployed-backend]
REACT_APP_REST_API_LOCAL=[your-local-backend]
```

## Screenshots









Register Page
Login Page






Home (without login)
Home (with login)






Profile + My Recipes
Liked Recipes






Saved Recipes
Add Recipes






Search Recipes
Detail Recipes

## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch `git checkout -b feature/AmazingFeature`
3. Commit your Changes `git commit -m 'Add some AmazingFeature'`
4. Push to the Branch `git push origin feature/AmazingFeature`
5. Open a Pull Request

## License

Distributed under the [MIT](/LICENSE) License.