https://github.com/hmontarroyos/fortech
Esse Projeto se trata de uma loja de customização de computadores online. A ideia é permitir que os clientes personalizem o seu próprio computador, escolhendo entre diversas opções de hardware. Cada componente do computador tem suas regras específicas de compatibilidade com outros componentes.
https://github.com/hmontarroyos/fortech
front-end polished react styled-component typescript
Last synced: about 2 months ago
JSON representation
Esse Projeto se trata de uma loja de customização de computadores online. A ideia é permitir que os clientes personalizem o seu próprio computador, escolhendo entre diversas opções de hardware. Cada componente do computador tem suas regras específicas de compatibilidade com outros componentes.
- Host: GitHub
- URL: https://github.com/hmontarroyos/fortech
- Owner: HMontarroyos
- Created: 2023-09-28T00:34:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-02T13:06:29.000Z (over 1 year ago)
- Last Synced: 2025-03-29T13:57:44.431Z (2 months ago)
- Topics: front-end, polished, react, styled-component, typescript
- Language: TypeScript
- Homepage: https://for-tech.vercel.app
- Size: 4.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
For Tech |
Tecnologias Utilizadas |
Como Instalar o Projeto |
Como usar |
Deploy da aplicação
## For Tech
#### Desktop
#### Mobile
Esse Projeto se trata de uma loja de customização de computadores online. A ideia é permitir que os clientes personalizem o seu próprio computador, escolhendo entre diversas opções de hardware. Cada componente do computador tem suas regras específicas de compatibilidade com outros componentes.
Para isso fiz uso do ContextAPI para ter um contexto de toda as peças globalmente na minha aplicação, e conforme
ia selecionando cada item eu criei um novo contexto onde seria meus itens selecionados, com isso eu consigo acessar
em qualquer lugar da minha aplicação podendo utilizar ele em qualquer componente criado na minha aplicação.
### Tecnologias Utilizadas
[![React][React]][React-url]
[![Typescript][Typescript]][Typescript-url]
[![Styled_Components][Styled_Components]][Styled_Components-url]
[![Polished][Polished]][Polished-url]
[![React_Circular_Progressbar][React_Circular_Progressbar]][React_Circular_Progressbar-url]
[![React_Lottie][React_Lottie]][React_Lottie-url]
[![React_Icons][React_Icons]][React_Icons-url]
[![Sweet_Alert2][Sweet_Alert2]][Sweet_Alert2-url]
### Utilitários
[![Vercel][Vercel]][Vercel-url]
### Como Instalar o Projeto
```sh
yarn
```
Após baixar todas as Dependências do Projeto dentro da pasta Raiz, inicie o Servidor com o Comando:
```sh
yarn start
```
### Como usar
Para Inicializar o Projeto
Abrir [http://localhost:3000](http://localhost:3000) vizualizar no Navegador.
### Deploy da aplicação
[![Deploy][Deploy]][Deploy-url]
### 🚀 Let's code! 🚀 ###
[contributors-shield]: https://img.shields.io/github/contributors/HMontarroyos/ForTech.svg?style=for-the-badge
[contributors-url]: https://github.com/HMontarroyos/ForTech/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/HMontarroyos/ForTech.svg?style=for-the-badge
[forks-url]: https://github.com/HMontarroyos/ForTech/fork
[stars-shield]: https://img.shields.io/github/stars/HMontarroyos/ForTech.svg?style=for-the-badge
[stars-url]: https://github.com/HMontarroyos/ForTech/stargazers
[issues-shield]: https://img.shields.io/github/issues/HMontarroyos/ForTech.svg?style=for-the-badge
[issues-url]: https://github.com/HMontarroyos/ForTech/issues
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/hebertmontarroyos-developer/
[React]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://pt-br.react.dev/
[Typescript]: https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white
[Typescript-url]: https://www.typescriptlang.org/
[Styled_Components]: https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white
[Styled_Components-url]: https://styled-components.com/
[Polished]: https://img.shields.io/badge/Polished-107C10?style=for-the-badge
[Polished-url]: https://polished.js.org/
[React_Circular_Progressbar]: https://img.shields.io/badge/React%20Circular%20Progressbar-1ED760?style=for-the-badge
[React_Circular_Progressbar-url]: https://www.npmjs.com/package/react-circular-progressbar
[React_Lottie]: https://img.shields.io/badge/React%20Lottie-0078D4?style=for-the-badge
[React_Lottie-url]: https://lottiefiles.com/
[React_Icons]: https://img.shields.io/badge/React%20Icons-FF0000?style=for-the-badge
[React_Icons-url]: https://react-icons.github.io/react-icons
[Sweet_Alert2]: https://img.shields.io/badge/Sweet%20Alert%202-FA5C5C?style=for-the-badge
[Sweet_Alert2-url]: https://sweetalert2.github.io/
[Vercel]: https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white
[Vercel-url]: https://vercel.com/
[Deploy]: https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white
[Deploy-url]: https://for-tech.vercel.app/