Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

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
https://github.com/mar-alv/ignite-daily-diet-web

challenge css html javascript jest js playwright radix-ui react react-hook-form react-query rocketseat storybook tailwindcss ts typescript vite zod

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/mar-alv/ignite-daily-diet-web
Owner: mar-alv
Created: 2024-07-27T00:19:57.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-09-15T19:34:38.000Z (18 days ago)
Last Synced: 2024-09-26T06:32:33.209Z (7 days ago)
Topics: challenge, css, html, javascript, jest, js, playwright, radix-ui, react, react-hook-form, react-query, rocketseat, storybook, tailwindcss, ts, typescript, vite, zod
Language: TypeScript
Homepage:
Size: 7.27 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        
Ignite Daily Diet Web




  ![project-img](./.github/cover.jpg)

  

  [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)

  [🎨 Mobile Design](https://www.figma.com/design/0507XcCgEpjZwM5UKuFmg5/Daily-Diet-%E2%80%A2-Desafio-React-Native-(Community)?node-id=2-12&t=UiGTDLfY7wSTv3rj-0)

  [🇵🇹 Português](./docs/README-pt.md)



## 📚 Summary

- [❕ About](#about)

- [📖 Instructions](#instructions)

  - [📥 Install](#install)

  - [🚀 Run Locally](#locally)

  - [📔 Run Storybook](#storybook)

- [📂 Structure](#structure)

- [🧰 Technologies](#technologies)

- [📸 Screenshots and 🎥 Recordings](#screenshots-prints)

- [👤 Author](#author)

- [📄 License](#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

```sh

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

```sh

pnpm i

```

```sh

pnpm install

```

#### 🚀 Run Locally

Paste the command into a terminal, the application will be accessable through this [link](http://localhost:5173)

```sh

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

```sh

npm run tests-e2e

```

#### 📔 Run Storybook

Paste the command into a terminal, the project's components documentation will be accessible through this [link](http://localhost:6006)

```sh

pnpm run storybook

```

### 📂 Structure

```

│ .github/

│   └── ...

│ .storybook/

│   └── ...

│ docs/

│   └── ...

│ public/

│   └── ...

│ src/

│   ├── api/

│   │     ├── mocks/

│   │     │     └── ...

│   │     └── ...

│   ├── components/

│   │     ├── ui/

│   │     │     └── ...

│   │     └── ...

│   ├── hooks/

│   │     └── ...

│   ├── interfaces/

│   │     └── ...

│   ├── lib/

│   │     └── ...

│   ├── stories/

│   │     └── ...

│   └── ...

│ tests/

│   └── ...

```

## 🧰 Technologies

### Build Tools

[![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)

### Components

[![Lucide React](https://img.shields.io/badge/Lucide-2C3E50?style=for-the-badge&logo=lucide&logoColor=white)](https://lucide.dev/)

[![Phosphor Icons](https://img.shields.io/badge/Phosphor%20Icons-c4e456?style=for-the-badge&logo=phosphoricons&logoColor=black)](https://phosphoricons.com/)

[![Radix UI](https://img.shields.io/badge/Radix_UI-29ABE2?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://radix-ui.com/)

[![shadcn/ui](https://img.shields.io/badge/shadcn%2Fui-000000?style=for-the-badge&logo=react&logoColor=white)](https://ui.shadcn.com)

### Documentation

[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://storybook.js.org/)

### Front-end Framework

[![React.js](https://img.shields.io/badge/React.js-61DAFB?style=for-the-badge&logo=react&logoColor=white)](https://reactjs.org/)

[![React Query](https://img.shields.io/badge/React_Query-FF4154?style=for-the-badge&logo=react-query&logoColor=white)](https://tanstack.com/query/v3)

[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

### Styling

[![PostCSS](https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white)](https://postcss.org/)

[![Tailwind CSS](https://img.shields.io/badge/tailwind--css-38B2AC?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)

### Testing

[![Playwright](https://img.shields.io/badge/Playwright-2EAD33?style=for-the-badge&logo=playwright&logoColor=white)](https://playwright.dev/)

[![Vitest](https://img.shields.io/badge/vitest-506E10?style=for-the-badge&logo=vitest&logoColor=FCC72B)](https://vitest.dev/)

[![MSW](https://img.shields.io/badge/MSW-ff6a33?style=for-the-badge&logo=msw&logoColor=white)](https://mswjs.io/)

### Utilities

[![date-fns](https://img.shields.io/badge/date--fns-770c56?style=for-the-badge&logo=date-fns&logoColor=white)](https://date-fns.org/)

[![React Day Picker](https://img.shields.io/badge/React%20Day%20Picker-42A5F5?style=for-the-badge&logo=react&logoColor=white)](https://react-day-picker.js.org/)

[![react-error-boundary](https://img.shields.io/badge/react--error--boundary-61DAFB?style=for-the-badge&logo=react&logoColor=white)](https://github.com/bvaughn/react-error-boundary)

[![React Hook Form](https://img.shields.io/badge/React_Hook_Form-FF6B6B?style=for-the-badge&logo=react&logoColor=white)](https://react-hook-form.com/)

[![Zod](https://img.shields.io/badge/Zod-007ACC?style=for-the-badge&logo=superman&logoColor=white)](https://zod.dev/)

## 📸 Screenshots and 🎥 Recordings

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



  ![icons-stories](./.github/creating-plates.gif)

   Creating plates





  ![icons-stories](./.github/deleting-plate.gif)

   Deleting plate





  ![icons-stories](./.github/updating-plate.gif)

   Updating plate





  ![icons-stories](./.github/icons-stories.png)

  Icons stories





  ![header-stories](./.github/header-stories.png)

  Header stories





  ![form-stories](./.github/form-stories.png)

  Form Stories 





  ![positive-metrics-stories](./.github/positive-metrics-stories.png)

  Positive metrics stories





  ![negative-metrics-stories](./.github/negative-metrics-stories.png)

  Negative metrics stories





  ![creating-plate-stories](./.github/plates-handling-stories.gif)

  Plates handling stories





  ![other-stories](./.github/plates-stories.gif)

  Plates stories





  ![no-plates](./.github/loading-plates.png)

  Loading plates





  ![no-plates](./.github/no-plates.png)

  No plates



## 👤 Author



    

    

        Marcelo Alvarez

        


        Front-end Developer


        "Some AI generated funny quote here 😗"


				

  				

				

				

  				

				

    



## 📄 License

Licensed under [MIT](./LICENSE)