Sobre - Especificações - Como Rodar o Projeto? - Resultados de Desenvolvimento - Features - Conteúdo externo - Nossa Equipe

Sobre

O Orange Evolution é a plataforma ideal para quem busca se tornar um #SangueLaranja, dando os primeiros passos ou se aprimorando em várias áreas de conhecimento, com conteúdos de qualidade criados com muito carinho e disponibilizados de forma gratuita!

A plataforma foi construída pelo Squad 12 durante o Hackathon do Programa de Formação Season 4, da FCamara.

Especificações

O front-end foi construído utilizando JavaScript, com auxílio da biblioteca React para construção das telas dinâmicas. Além disso, foi utilizada a biblioteca Styled-Components para estilização, seguindo o padrão mobile-first. A biblioteca Axios foi utilizada para realizar as chamadas ao back-end. Para gerenciar a renderização conforme as rotas foi utilizado React-Router.

Como rodar o projeto?

Realizamos o deploy da nossa solução na plataforma Heroku. Você pode acessá-la através do seguinte link! 🤓✨

Para acessar nossa plataforma em ambiente de desenvolvimento, siga os passos a seguir:

O projeto está dividido em dois repositórios no GitHub. O tutorial abaixo informa como fazer a configuração completa do projeto.

#Faça o clone dos repositórios Front-end e Back-end:
##Front-end
$ git clone https://github.com/season4-squad12/orange-evolution-frontend

##Back-end
$ git clone https://github.com/season4-squad12/orange-evolution-backend

#Em seguida, entre na pasta do front-end e instale as dependências:

$ npm install

#Ainda na pasta do front-end, crie um arquivo .env na raiz, utilizando as variáveis de ambiente informadas pelos desenvolvedores:

$ URL_BASE="****"

#Feita a configuração da pasta do front-end, entre na pasta do back-end e instale as dependências:

$ npm install

#Crie um arquivo .env na raiz da pasta do back-end, utilizando as variáveis de ambiente informadas pelos desenvolvedores:

 DEV_DATABASE_URL="****"
 NODE_ENV="****"
 DIALECT="****"
 SECRET_KEY="****"
 PORT="****"


# Após instalar as dependências e configurar as variáveis de ambiente, entre na pasta do Back-end e rode: 

$ npm run dev

# Com o servidor back-end rodando, entre na pasta front-end e rode o comando:

$ npm start

Resultados de desenvolvimento

• Implementação de design responsivo seguindo padrão mobile-first;
• Seleção das trilhas de estudo;
• Visualização das trilhas de estudos e seus respectivos módulos;
• Campo para enviar feedback, bem como o armazenamento dos mesmos para serem acessados pelo admin;
• Possibilidade de criação de novas trilhas, módulos e conteúdos, além da atualização ou exclusão das trilhas já existentes por parte dos administradores da plataforma;

Futuras implementações

Para o futuro da nossa aplicação, planejamos as seguintes implementações:

• Recuperação de senha na tela de login;
• Permitir atualização de foto de perfil;
• Acompanhamento do percentual de conteúdos já estudados;
• Avaliação de 1 até 5 estrelas dos conteúdos disponibilizados;
• Campo para que os admins disponibilizem testes para os usuários da plataforma;
• Sistema de gamificação em que os usuários ganham XP ao completarem as atividades;

Conteúdo externo

* No nosso artigo é possível encontar uma visão mais completa do processo de desenvolvimento: Artigo

• Confira como utilizar nossa plataforma e todas suas funcionalidades:

• Veja nosso Pitch:

Nosso Squad

Luiz Felipe (Desenvolvedor) LinkedIn

Dheniarley Cruz (Desenvolvedor) LinkedIn

Alex Matos (UI/UX Design) LinkedIn