| Technologies used |
|---|
 HTML5 |
 CSS3 |
 React |
| react-router-dom |
 TypeScript |
| Zustand, for general states |
| axios, for fetching data |
-
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)
-
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.
-
Publish the website on an online hosting.
-
Add good SEO practices.
> 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
-
componentsall the components that I'm using in the app, as they are many I separate in:coommond-components,sectionsandui(all the atomic components like buttons, titles, text, etc). -
languagesall the text in the app is store in anenumor aconstant. -
modelsas I'm working with TYpeScript here I collect all theclasses,interfacesortypesthat I'm using in the application. -
pagesfor 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. -
storeto manage the global stated with zustand. -
themewhere I created the general theme used in the entired application.
As I do not use a third party library I create my our components.
-
Inside
components/uiyou can find the atom components, such as: buttons, atom components for forms, headlines, loader, text. -
Inside the
commond-componentsyou can find some reusable components for the app, such as: cards. -
Inside the
components/sectionsyou can finde the sections, such as: header, footer.
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>EasyCook</h1>
</>
)
}
export default AppI appreciate your interest in this Project ⌨️ with ❤️ by María Eugenia Costa 😊 and follow me at LinkedIn - maria-eugenia-costa
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent