Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenia1984/easy-cook
Easy Cook a food app
https://github.com/eugenia1984/easy-cook
frontend material-ui react syled-components typescript
Last synced: about 2 months ago
JSON representation
Easy Cook a food app
- Host: GitHub
- URL: https://github.com/eugenia1984/easy-cook
- Owner: eugenia1984
- Created: 2023-06-23T22:57:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-14T00:32:10.000Z (11 months ago)
- Last Synced: 2024-02-14T01:31:38.896Z (11 months ago)
- Topics: frontend, material-ui, react, syled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 2.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
EASY COOK
## Technologies
| Technologies used |
| ------------------------------------------------------------------------------------------------------------------- |
| 
HTML5 |
| 
CSS3 |
| 
React |
| react-router-dom |
| 
TypeScript |
| [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction), for general states |
| [axios](https://axios-http.com/docs/intro), for fetching data |
---
## 
LINKS
💻 -> [Canva with the mockup](https://www.canva.com/design/DAFiuea8ges/_sspazzLlNLHfqRZ10OZDQ/edit)
---
## MVP (Minimum Product Viable)
- Create a React Application, to have the Front End for **Easy-Cook**, an app where you can:
- Login with:
```
user: [email protected]
password: 123456
```
- Search recipes
- Add recipes to favorites list
- See the recipe detail page
Create the **FrontEnd** for a **web site** that use a **public API**, using:
- All the recipes information are fetch with an **API** (Spoonacular)
---
## Requirements
### Web Site/Application:
- That can be **browsed from a PC or cell phone without losing information**.
- 2 sections of **static content**
- 1 section of **dynamic content** consuming **public API** of your choice.
- 1 section with a **contact form** (front-end implementation only).
- 1 user/key protected section that allows to have a private area.
- **1 List ordered** by some criteria.
- **1 List with search engine** by some criteria (can be the same as the previous item).
- The code must be published in an open GIT repository.
- Best practices applied for front-end in general (html, css, js + angular ).
- **Data from different endpoints related to each other**, for example movies associated to directors, or actors.
---
### OPTIONAL REQUIREMENTS
- **Publish** the website on an online hosting.
- Add **good SEO practices**.
---
### FOLDER STRUCTURE
```
> node_modules
> public
> img
> src
> api
> assets
> components
> commond-components
> sections
> ui
> buttons
> form
> headlines
> loader
> text
> views
> languages
> layouts
> models
> types
> pages
Contact
Home
Login
NotFound
Recipe
Search
> routes
> theme
> utils
.eslintrc.js
.gitignore
index.html
package-lock.json
packege.json
README.md
tsconfig.json
stconfig.node.json
vite.config.ts
```
### What you will find?
- `components` all the components that I'm using in the app, as they are many I separate in: `coommond-components`, `sections` and `ui` (all the atomic components like buttons, titles, text, etc).
- `languages` all the text in the app is store in an `enum` or a `constant`.
- `models` as I'm working with TYpeScript here I collect all the `classes`, `interfaces` or `types` that I'm using in the application.
- `pages` for the pages of the app.
- `routes`, to create the constants of the URL of the app, and with **React-router-dom** create one public route (Login page) and the rest converted to protected routes.
- `store` to manage the global stated with **zustand**.
- `theme` where I created the general theme used in the entired application.
---
### COMPONENTS
As I do not use a third party library I create my our components.
- Inside `components/ui` you can find the atom components, such
as: buttons, atom components for forms, headlines, loader, text.
- Inside the `commond-components` you can find some reusable components for the app, such as: cards.
- Inside the `components/sections` you can finde the sections, such as: header, footer.
---
### Image in `assets` folder example:
```TSX
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
return (
<>
EasyCook
>
)
}
export default App
```
---
## NOTE
I appreciate your interest in this Project ⌨️ with ❤️ by [María Eugenia Costa](https://github.com/eugenia1984) 😊 and follow me at [LinkedIn - maria-eugenia-costa](https://www.linkedin.com/in/maria-eugenia-costa/)
---