Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/arthur-llevy/costs-desafio-react

Desafio de conclusão do curso de React do canal Matheus Battisti - Hora de codar https://github.com/matheusbattisti
https://github.com/arthur-llevy/costs-desafio-react

javascript reactjs styled-components typescript

Last synced: 8 days ago
JSON representation

Desafio de conclusão do curso de React do canal Matheus Battisti - Hora de codar https://github.com/matheusbattisti

Host: GitHub
URL: https://github.com/arthur-llevy/costs-desafio-react
Owner: Arthur-Llevy
Created: 2023-12-21T23:49:11.000Z (11 months ago)
Default Branch: main
Last Pushed: 2023-12-26T23:08:32.000Z (11 months ago)
Last Synced: 2024-04-15T06:27:30.614Z (7 months ago)
Topics: javascript, reactjs, styled-components, typescript
Language: TypeScript
Homepage: https://costs-hazel.vercel.app
Size: 139 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Costs

## O que é o Costs?
O Costs é um projeto de conclusão do curso de React do canal [Matheus Batistti - Hora de Codar](https://www.youtube.com/@MatheusBattisti) que consiste em um site que serve para o gerenciamento projetos, criando novos, preenchendo campos como nome, custo do projeto, serviços internos... A ideia inicial era treinar o que foi visto no curso, o React em si, porém, eu decidi colocar em prática outras habilidades, como TypeScript e Styled-Components para aprimorar o projeto, o que deixou as coisas mais interessantes.

## Sobre o Costs
- ### Stack - Front End
![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Styled-Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)

- ### Stack - Back End
Até o momento, o "Back End" foi feito com o [json-server](https://www.npmjs.com/package/json-server), uma biblioteca para o JavaScript.
> "Obtenha uma API REST totalmente falsa com zero codificação em menos de 30 segundos (sério)".

Como está escrito em sua documentação, é basicamente uma API REST baseada em um arquivo .json, muito últil para testes.
Mas, em breve, o Back End completo virá...

- ### Como rodar o projeto em sua máquina?
Baixe o repositório manualmente, ou com o comando abaixo:
```bash
git clone [email protected]:Arthur-Llevy/Costs-Desafio-React.git
```

Na pasta do projeto, use o npm install ou o yarn install para baixar as dependências.

Após isso, use o npm run dev ou yarn dev para iniciar o projeto, o link de acesso estará disponível no terminal.

Para iniciar o "servidor" basta usar o comando yarn run backend ou npm run backend

Pronto! O projeto já está rodando em sua máquina.

Obrigado por ter lido até o final :)

## English version

## What is Costs?
Costs is a React course completion project from the [Matheus Batistti - Hora de Codar](https://www.youtube.com/@MatheusBattisti) channel. It is a website designed for project management, allowing users to create new projects and fill in fields such as project name, project cost, internal services, and more. The initial idea was to practice what was covered in the course, specifically React itself. However, I decided to put into practice other skills such as TypeScript and Styled-Components to enhance the project, making things more interesting.

## About Costs
- ### Stack - Front End
![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Styled-Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)

- ### Stack - Back End
So far, the "Back End" has been implemented using [json-server](https://www.npmjs.com/package/json-server), a JavaScript library.
> "Get a full fake REST API with zero coding in less than 30 seconds (seriously)."

As stated in its documentation, it is essentially a REST API based on a .json file, very useful for testing purposes. However, a complete Back End will be implemented soon.

- ### How to run the project on your machine?
Download the repository manually or using the following command:
```bash
git clone [email protected]:Arthur-Llevy/Costs-Desafio-React.git
```

In the project folder, use either npm install or yarn install to install the dependencies.

After that, use npm run dev or yarn dev to start the project; the access link will be available in the terminal.

To start the "server," simply use the command yarn run backend or npm run backend.

There you go! The project is now running on your machine.

Thank you for reading until the end :)