Uma rede social para desenvolvedores!
Confira a aplicação: https://devsocialnetwork.netlify.app//
O projeto se chama Dev Social Networking e foi realizado através de um Pair Programming. Ele é uma rede social direcionada para os desenvolvedores, sendo possível: registrar uma conta, editar o perfil, criar publicações, encontrar repositórios da API do Github, salvar publicações, entre outras funcionalidades.
A tela inicial do projeto é a tela de login que necessita de uma conta criada para ter acesso ao site. Assim, você deve clicar no botão para cadastrar-se e criar uma conta. Após criar a conta, o usuário será direcionado automaticamente para a timeline do site.
Na timeline a pessoa tem acesso a diversas funcionalidades disponíveis.
- Início: a opção de criar uma publicação, acessar as notícias na barra lateral, acessar a nossa comunidade do discord, acessar o menu que apresenta a opção de “meu perfil”, “seguidores”, “meus projetos”, “encontrar repositórios” e “salvos”.
- Perfil: o usuário consegue alterar a imagem do perfil, definir um banner, alterar o nome de usuário, adicionar a função, adicionar localização, adicionar uma biografia, adicionar o link do github e linkedin.
- Meus projetos: a opção de adicionar um projeto que vai abrir um modal para que possa completar as informações, como, por exemplo, imagem do projeto, descrição do projeto, link do projeto e da aplicação.
- Encontrar repositórios: a página consome a API do github com os repositórios de qualquer pessoa que tenha um repo público.
- Notícias: elas são fictícias, mas simulam notícias que o site apresenta na sidebar na timeline.
O site tem no total 13 páginas, sendo elas:
- SignIn: página de login.
- SignUp: página de cadastro de usuário.
- Dashboard: página principal, onde estão as publicações.
- Contributors: página dos contribuidores dos projetos.
- Followers: página dos seguidores.
- ForgotPassword: página para resetar senha.
- Message: página de mensagens.
- MyProjects: página para registrar e visualizar os projetos do usuário.
- News: página de notícias.
- Profile: página de perfil do usuário logado.
- ProfileUser: página de perfil de algum usuário.
- Repositories: página para procurar repositórios de acordo com a API do GitHub.
- Repository: página que mostra repositório.
- NotFound: página para rotas não encontradas.
- Entendimento do projeto
- Instalação das dependências
- Conexão com o firebase
- Contexto de autentincação
- Privatização de rotas
- Cadastro de usuário
- Login do usuário
- LogOut do usuário
- Desenvolvimento das páginas: Dashboard, SignIn, SignUp, News e ForgotPassword
- Estilização
- Adição de modais na aplicação
- Hook usePublication
- Desenvolvimento das páginas: Profile, Repositories, Repository e MyProjects
- Implementação da seção "Meus projetos" na página Profile
- Responsividade da página Dashboard
- Variáveis de ambiente
- Implementação da página para visualizar usuário
- Implementação dos componentes NewsBox e JoinDiscord
- Página contribuidores
- Página NotFoundUser
No projeto foram utilizadas as seguintes tecnologias:
- ReactJs
- Sass
- React Icons
- Axios
- ContextAPI
- SweetAlert2
- Firebase
- React Router Dom
- React Toastify
- Swiper
- MUI Design
Antes de iniciar 🏁, você precisa ter Git e Node instalados.
# Clone this project
$ git clone https://github.com/jguilhermesl/devs-social-network
# Access
$ cd devs-social-network
# Install dependencies
$ yarn or npm
# Run the project
$ yarn start or npm start
# The server will initialize in the <http://localhost:3000>Agradecemos às seguintes pessoas que contribuíram para este projeto:
 João Guilherme |
 Marcus Begheli |
Este projeto está sob licença. Consulte o arquivo LICENSE para obter mais detalhes.