https://github.com/domfabio/countdown-react
Aplicação de contagem regressiva desenvolvida com React.js, utilizando React Router, Context API e Hooks. Permite configurar eventos futuros com data, hora, imagem de fundo e tema personalizado.
https://github.com/domfabio/countdown-react
countdown hooks-api-react react-router-dom reactjs usecontext
Last synced: 2 months ago
JSON representation
Aplicação de contagem regressiva desenvolvida com React.js, utilizando React Router, Context API e Hooks. Permite configurar eventos futuros com data, hora, imagem de fundo e tema personalizado.
- Host: GitHub
- URL: https://github.com/domfabio/countdown-react
- Owner: domfabio
- Created: 2025-03-18T20:59:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-08T14:53:28.000Z (about 1 year ago)
- Last Synced: 2025-12-26T04:32:11.132Z (6 months ago)
- Topics: countdown, hooks-api-react, react-router-dom, reactjs, usecontext
- Language: JavaScript
- Homepage: https://cowntdown-livid.vercel.app
- Size: 2.93 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
⏳ Countdown React
### 🧭 Navegação Rápida
- 📝 [Sobre](#-sobre)
- ✅ [Funcionalidades](#-funcionalidades)
- 🚀 [Screen e Deploy](#-screen-e-deploy)
- 🧩 [Principais Dependências](#-principais-dependências)
- ▶️ [Como Configurar o Projeto no VS Code](#️-como-configurar-o-projeto-no-vs-code)
- 🤝 [Contribuição](#-contribuição)
---
### 📝 Sobre
Projeto desenvolvido durante o curso **Formação Front-end - HTML, CSS, JavaScript, React e +**, da Comunidade Hora de Codar. Construído em **React.js**, simula uma aplicação de contagem regressiva para eventos. Inclui rotas para visualização da home e da contagem, utilizando contexto global para gerenciamento de estado e hooks personalizados.
O objetivo principal é praticar o uso do **React Router**, **Context API**, **React Hooks** e a manipulação de tempo no Front-end.
---
### ✅ Funcionalidades
Com essa aplicação é possível:
- 🕐 **Definir um evento futuro com título e data**
- 🖼️ **Inserir imagem de fundo via URL personalizada**
- 🎨 **Escolher a cor do tema da interface**
- 🔁 **Redirecionamento entre páginas com React Router**
- ⏳ **Exibir uma contagem regressiva em tempo real**
---
### 🚀 Screen e Deploy
---
### 🧩 Principais Dependências
- **[React](https://reactjs.org/)** – Framework para construção da interface
- **[React Router DOM](https://reactrouter.com/)** – Para navegação entre páginas
Para a lista completa de dependências e versões, consulte o arquivo [`package.json`](./package.json).
---
## ▶️ Como Configurar o Projeto no VS Code:
### 📌 Pré-requisitos
Antes de prosseguir com a configuração, certifique-se de ter todos os pré-requisitos instalados corretamente para evitar erros durante a instalação e execução do projeto:
`Git 2.4+` `Node.js 12+` `Live Server`
### ⚙️ Configurando o Projeto
1. Clone este repositório:
Abra o **VS Code**, pressione `Ctrl + Shift + P`, digite **"Git Clone"** e cole o link do repositório:
```sh
https://github.com/domfabio/Countdown-React.git
```
2. Instalar Dependências:
```sh
npm install
```
3. Inicie o servidor de desenvolvimento:
```sh
npm run dev
```
4. Acesse o projeto no navegador:
No terminal, pressione `Ctrl + Clique` no link gerado:
➜ Local: http://localhost:5173/
---
## 🤝 Contribuição
**Se deseja contribuir, siga os passos:**
1. Fork o repositório
2. Crie uma branch: `git checkout -b feature-minha-feature`
3. Faça commit das suas mudanças: `git commit -m 'Minha nova funcionalidade'`
4. Faça push para a branch: `git push origin feature-minha-feature`
5. Abra um Pull Request
---
Este projeto é distribuído sob a [Open Source License - MIT](https://opensource.org/licenses/MIT).
Veja a documentação para mais detalhes.
