Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gustavo-victor/reactgram
https://github.com/gustavo-victor/reactgram
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/gustavo-victor/reactgram
- Owner: Gustavo-Victor
- License: mit
- Created: 2024-06-09T00:24:33.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-22T01:25:40.000Z (5 months ago)
- Last Synced: 2024-06-23T05:29:59.484Z (5 months ago)
- Language: JavaScript
- Homepage: https://reactgram-alpha.vercel.app
- Size: 595 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ReactGram
Sobre |
Layout |
Funcionalidades |
Tecnologias e Ferramentas |
Como usar |
Licença |
✔ Projeto concluído
## ❓ Sobre
Este projeto é uma aplicação web fullstack que simula algumas das principais funcionalidades de uma rede social.
Projeto baseado no curso de Node.js da empresa ['Hora de Codar'](https://horadecodar.com.br/).
Clique [aqui](https://reactgram-4yia.onrender.com/) para conferir como ficou a aplicação hospedada na plataforma [Render](https://render.com/).
## 🎨 Layout
## ⚙️ Funcionalidades
- [x] Cadastro de usuários
- [x] Autenticação de usuários
- [x] Gerenciamento de perfil de usuários
- [x] Gerenciamentos de fotos de usuários
- [x] Upload de imagens
- [x] Like em fotos
- [x] Comentário em fotos
## 🛠 Tecnologias e Ferramentas
- [ReactJS](https://react.dev/)
- [React Icons](https://www.npmjs.com/package/react-icons)
- [React Router](https://reactrouter.com/)
- [React Redux](https://www.npmjs.com/package/react-redux)
- [Redux Toolkit](https://www.npmjs.com/package/@reduxjs/toolkit)
- [Vite](https://vitejs.dev/)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Events](https://www.npmjs.com/package/events)
- [BcryptJS](https://www.npmjs.com/package/bcryptjs)
- [Cors](https://www.npmjs.com/package/cors)
- [JWT](https://www.npmjs.com/package/jsonwebtoken)
- [MongoDB](https://www.npmjs.com/package/mongodb)
- [Mongoose](https://mongoosejs.com/)
- [MongoDB Atlas](https://www.mongodb.com/pt-br/atlas/database)
- [Multer](https://www.npmjs.com/package/multer)
Confira melhor as dependências do projeto:
- [Front-End](./client/package.json)
- [Back-End](./package.json)
## 💻 Como usar
Antes de continuar, é recomendado possuir alguns conhecimentos básicos de [HTML5](https://developer.mozilla.org/pt-BR/docs/Web/HTML), [CSS3](https://developer.mozilla.org/pt-BR/docs/Web/HTML), [JavaScript](https://www.javascript.com/), [Node.js](https://nodejs.org/docs/latest/api/) e [ReactJS](https://react.dev/) para entender os códigos do projeto.
Além disso, você precisa ter instalado em sua máquina o [GIT](https://git-scm.com/), [Node](https://nodejs.org/en) e um **editor de texto** de sua preferência. Recomendo sempre utilizar o [Visual Studio Code](https://code.visualstudio.com/).
Um guia básico sobre como instalar e executar o projeto em modo de desenvolvimento na sua máquina local:
1. Clone o projeto ou faça download do ZIP:
```bash
# abra o terminal (Git Bash de preferência) e digite
# não precisa fazer isso se já tiver feito download do projeto (nesse caso, só extraia a pasta e entre nela)
$ git clone https://github.com/Gustavo-Victor/reactgram.git
```
2. Entre na pasta do projeto:
```bash
$ cd reactgram/
```
3. Instalar as dependências e executar o Back-End:
```bash
$ npm install && npm run server
```
4. Instalar as dependências do Front-End:
- Abra outra aba do terminal
- Entre na pasta do Front-End, instale todas as dependências e execute a aplicação
```bash
$ cd ./client && npm install && npm run client
```
5. Abra o projeto no seu navegador de preferência:
- Digite no seu navegador o URL: http://localhost:5173/
## 📝 Licença
O projeto está sob a Licensa MIT
Qualquer pessoa pode usar, clonar e contribuir com este projeto.
Clique [aqui](./LICENSE) para saber mais