Skip to content

Latest commit

 

History

History
190 lines (156 loc) · 8.63 KB

README.md

File metadata and controls

190 lines (156 loc) · 8.63 KB

Programa Orange Juice Hackathon - V5.0 | Squad-24 | Front-end

Favicon

Bem-vindo ao repositório oficial do front-end desenvolvido durante a participação no hackathon Orange Juice! Este projeto foi concebido como parte de uma colaboração envolvendo uma equipe de cinco pessoas, incluindo o criador deste repositório.

👩‍💻 Acesse a aplicação aqui 👉 Orange Portfólio

1. O Projeto

O objetivo principal do desafio é fornecer uma interface de usuário intuitiva e responsiva para a nossa aplicação. O Orange Portifólio é uma plataforma única que reúne os melhores talentos de desenvolvimento e design em um só lugar. Desenvolvida com React.js e utilizando a API desenvolvida em Node.js, Express e PostgreSQL, a aplicação oferece ótimo desempenho e fácil manutenção. Além da possibilidade de cadastrar e buscar projetos, incluímos algumas funcionalidades, como checkbox de requisitos de senha e darkmode.

👉 Figma do projeto

👉 Repositório da API

2. Funcionalidades

2.1. Requisitos

  • Página de login
    • Login com conta google
  • Header navegável e responsivo
  • Design responsivo
  • Feedbacks para o usuário por meio de toast ou modal
  • Página de cadastro
  • Página Meus Projetos
    • Input de busca por tags
    • Possibilidade de cadastrar projetos
    • Visualização de detalhes do projeto ao clicar no card
    • Visualização de projetos com cards
    • Visualização de detalhes do projeto ao clicar no card
    • Possibilidade de deletar o projeto
  • Página Descobrir
    • Input de busca por tags
    • Visualização de projetos com cards
    • Visualização de detalhes do projeto ao clicar no card

2.2. Em desenvolvimento

  • Possibilidade de editar o projeto
  • Paginação

2.3. Inovação

  • DarkMode
  • Checkbox de requisitos de segurança da senha
  • Possibilidade de enviar uma foto de perfil na hora de fazer o cadastro
  • Foto padrão para cards sem imagens
  • Melhorias no design original

3. Tecnologias

4. Estrutura do Repositório

Este repositório contém o código fonte do app, enquanto o back-end está armazenado em um repositório separado. A separação destes permite uma melhor organização e modularidade do código, facilitando o trabalho em equipe e a manutenção a longo prazo.

5. Integração e Deploy

O app está atualmente integrado à API, consumindo as funcionalidades fornecidas pela API para porporcionar uma experiência do usuário fluida. Além disso, o deploy foi implantado na plataforma Vercel para garantir um ambiente de produção estável e confiável. Este README fornece informações essenciais para começar a trabalhar com o app, incluindo instruções de instalação, configuração e utilização. Sinta-se à vontade para explorar o código fonte e contribuir para o crescimento e aprimoramento contínuo deste projeto.

6. Instruções de Instalação

Siga os passos abaixo para configurar e executar localmente o projeto em sua máquina:

6.1. Pré-requisitos

Antes de começar, certifique-se de ter as seguintes ferramentas instaladas em seu ambiente de desenvolvimento:

  • Node.js - versão 18 ou superior
  • npm (gerenciador de pacotes do Node.js)
  1. Clone o Repositório
git clone https://github.com/vinicioscst/orange-portfolio-frontend-squad24.git cd orange-portfolio-frontend-squad24
  1. Instale as dependências
npm install
  1. Configure as variaveis de ambientes

Crie um arquivo .env na raiz do projeto e configure as variáveis de ambiente necessárias. Consulte o arquivo .env.example para referência.

  1. Inicie o servidor local
npm run dev

6.2. Testando a instalação

Para verificar se a instalação foi bem-sucedida, abra seu navegador e acesse http://localhost:5173/. Você deverá ver a interface do usuário da aplicação.

7. Rotas

Aqui estão algumas das principais rotas que você encontrará no front-end:

  • /: A rota inicial com o login.
  • /register: A rota para a página de registro.
  • /discover: A rota para a página dos projetos da comunidade.
  • /my-projects: A rota para a página dos seus projetos.

Lembre-se, cada rota corresponderá a um componente React diferente, e esses componentes podem ser encontrados na pasta src/components.

Se você tiver mais perguntas ou precisar de mais ajuda, sinta-se à vontade para perguntar.

8. Conheça a Squad-24!


Álvaro Garcia

Frontend Developer
Carlos Wylliam

Backend Developer
Mariana Moreira

Backend Developer
Ravena Campos

Frontend Developer | PO
Vinícios Soares

FullStack Developer