Ignite Daily Diet Web

🎨 Mobile Design

🇵🇹 Português

📚 Summary

• ❕ About
• 📖 Instructions
  • 📥 Install
  • 🚀 Run Locally
  • 📔 Run Storybook
• 📂 Structure
• 🧰 Technologies
• 📸 Screenshots and 🎥 Recordings
• 👤 Author
• 📄 License

❕ About

A web implementation of the NodeJs and React Native challenge of Ignite, Rocketseat's programming course, made to use the API created in the NodeJs modeule, where you can handle your diet, by creating, listing, visualizing, editing your diets, besides retrieving metrics of them

📖 Instructions

📥 Install

Paste this 1º command into a terminal opened within a folder of your preference to clone the project

git clone https://github.com/mar-alv/ignite-daily-diet-web.git

Then run one of the versions of the 2º command to install the dependencies

pnpm i

pnpm install

🚀 Run Locally

Paste the command into a terminal, the application will be accessable through this link

pnpm run dev

🏁 Run End-To-End Tests

Paste the command into a terminal, the tests will be open in a browser tab automatically, controlling it like an actual user, clicking on buttons, interacting with forms, etc... The results will appear within the own interface

npm run tests-e2e

📔 Run Storybook

Paste the command into a terminal, the project's components documentation will be accessible through this link

pnpm run storybook

📂 Structure

│ .github/
│   └── ...
│ .storybook/
│   └── ...
│ docs/
│   └── ...
│ public/
│   └── ...
│ src/
│   ├── api/
│   │     ├── mocks/
│   │     │     └── ...
│   │     └── ...
│   ├── components/
│   │     ├── ui/
│   │     │     └── ...
│   │     └── ...
│   ├── hooks/
│   │     └── ...
│   ├── interfaces/
│   │     └── ...
│   ├── lib/
│   │     └── ...
│   ├── stories/
│   │     └── ...
│   └── ...
│ tests/
│   └── ...

🧰 Technologies

Build Tools

Components

Documentation

Front-end Framework

Styling

Testing

Utilities

📸 Screenshots and 🎥 Recordings

For a longer video demonstration click here and like my post on LinkedIn

Creating plates

Deleting plate

Updating plate

Icons stories

Header stories

Form Stories

Positive metrics stories

Negative metrics stories

Plates handling stories

Plates stories

Loading plates

No plates

👤 Author

Marcelo Alvarez
Front-end Developer
"Some AI generated funny quote here 😗"

📄 License

Licensed under MIT