Skip to content

feat: added full Docker support (backend, frontend, mongo)first commit #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MiqueiasBueno wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: added full Docker support (backend, frontend, mongo)first commit #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
253 changes: 81 additions & 172 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,209 +1,118 @@
<!-- INTRO SECTION -->
<br />
<p align="center">
<a href="https://github.com/Jenil-Vekaria/Trackit">
<img src="client/src/assets/Trackit_Background.png" alt="Trackit">
</a>

<h3 align="center">Issue and Project Tracking System <a href="https://trackit-demo.vercel.app/">(DEMO)</a></h3>
# 🚀 TrackIt - Dockerizado

<p align="center">
Use Trackit! Tracking system that allows team members to collaborate, discuss and manage projects effectively
<br />
<br />
</p>
</p>
> Dockerização completa do projeto [TrackIt](https://github.com/Jenil-Vekaria/Trackit) feita por [MiqueiasBueno](https://github.com/MiqueiasBueno).

<!-- FEATURE SECTION -->
## 📦 Sobre o Projeto

## ✨ Features
TrackIt é um sistema para rastreamento e gestão de tickets, projetos e usuários.
Esse repositório traz a aplicação **totalmente dockerizada**, facilitando o setup e deploy.

- Team management
- Project management
- Ticket management
- User assignment
- Project statistics
- Advanced searching
- Commenting
- Role based organization (Create custom permissions)
- Custom field creation
- Attachments (Not done yte)
- Change tracker (Not done yet)
---

<!-- TECHNOLOGY SECTION -->
## 🐳 Dockerização

## 🛠️Technologies
O projeto foi estruturado com:

| **Front-end** | <p align="center"><img src="https://www.rlogical.com/wp-content/uploads/2021/08/Rlogical-Blog-Images-thumbnail-1.png" width="100" height="100" /><br/>NextJs</p> | <p align="center"><img src="https://avatars.githubusercontent.com/u/54212428?s=200&v=4" width="100" height="100" /><br/>Chakra UI</p> | <p align="center"><img src="https://axios-http.com/assets/logo.svg" width="100" height="100" /><br/>Axios</p> | <p align="center"><img src="https://img.stackshare.io/service/11559/zustand.png" width="100" height="100" /><br/>Zustand</p> |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Back-end** | <p align="center"><img src="https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_f0b606abb6d19089febc9faeeba5bc05/nodejs-development-services.png" width="100" height="100" /><br/>NodeJs</p> | <p align="center"><img src="https://w7.pngwing.com/pngs/925/447/png-transparent-express-js-node-js-javascript-mongodb-node-js-text-trademark-logo.png" width="100" height="100" /><br/>ExpressJS</p> | <p align="center"><img src="https://cdn.icon-icons.com/icons2/2415/PNG/512/mongodb_original_wordmark_logo_icon_146425.png" width="100" height="100" /><br/>MongoDB</p> | <p align="center"><img src="https://cdn.freebiesupply.com/logos/large/2x/jest-logo-png-transparent.png" width="100" height="100" /><br/>Jest</p> |
- ✅ Dockerfile para o frontend (Next.js)
- ✅ Dockerfile para o backend (Node.js + Express)
- ✅ MongoDB como banco de dados
- ✅ Orquestração via Docker Compose

##### Project will be dockerized soon
---

## 🚀 Quick start
## 🚀 Como rodar localmente com Docker

Start developing locally.
### 1️⃣ Clone o repositório:

### Step 1: Download Node.js and MongoDB

Download: [MongoDB](https://www.mongodb.com/try/download/community)
Download: [Node.js - 18.14.0](https://nodejs.org/en/)
```bash
git clone https://github.com/MiqueiasBueno/TrackIt.git
cd TrackIt
```

### Step 2: Clone the repo
### 2️⃣ Crie os arquivos `.env`:

Fork the repository then clone it locally by doing
- Arquivo `.env` na raiz:

```sh
git clone https://github.com/Jenil-Vekaria/Trackit.git
```env
MONGO_URI=mongodb://mongo:27017/trackit
NEXT_PUBLIC_API_URL=http://localhost:5000
```

### Step 2: Install Dependencies
- Arquivo `.env` no backend (`/server`):

cd into the client and server directory, and install the dependencies

```sh
cd client & npm install
```env
NODE_ENV=development
MONGO_URI=mongodb://mongo:27017/trackit
PORT=5000
JWT_SECRET=6b8d882e-4dcb-4c3c-b4ea-8a6a7bff86e3
JWT_TOKEN_EXPIRATION=1h
```

```sh
cd server & npm install
- Arquivo `.env` no frontend (`/client`):

```env
NEXT_PUBLIC_API_ENDPOINT=http://localhost:5000
```

### Step 3: Setup .env
### 3️⃣ Suba os containers:

To run the server, you will need the `.env` variables
```bash
docker-compose up --build
```

Aguarde até que os serviços estejam rodando.

Rename [.env.EXAMPLE](./server/.env.EXAMPLE) file to **.env**
---

### Step 4: Seed database
## 🧠 **Povoar o Banco de Dados (Seed)**

Execute the following command to seed the database
Execute o comando abaixo para popular o banco com dados de teste (usuários, permissões, etc):

```sh
npm run seed
```bash
docker exec -it trackit_backend npm run seed
```

##### Login Info
---

| Email | Password | Role | Permissions |
| ---------------------------- | -------- | --------- | ---------------------------------- |
| james.smith@bugtracker.com | password | Admin | Manage admin page/projects/tickets |
| michael.smith@bugtracker.com | password | Developer | Manage projects/tickets |
| robert.smith@bugtracker.com | password | Submitter | Manage tickets |
## 🔑 **Informações de Login (Acesso de Teste)**

#### You are all setup!
| Email | Senha | Papel | Permissões |
| ----------------------------------- | --------- | ---------- | -------------------------------------------- |
| james.smith@bugtracker.com | password | Admin | Gerencia admin, projetos e tickets |
| michael.smith@bugtracker.com | password | Developer | Gerencia projetos e tickets |
| robert.smith@bugtracker.com | password | Submitter | Cria e gerencia tickets |

Run client application
---

```sh
npm run dev
```
## 🖥️ Acesso:

- 🔗 Frontend: [http://localhost:3000](http://localhost:3000)
- 🔗 Backend API: [http://localhost:5000](http://localhost:5000)
- 🔗 MongoDB: [localhost:27017](mongodb://localhost:27017)

Run server application
---

```sh
npm run start
## 🏗️ Estrutura de Pastas

```
TrackIt/
├── client/ # Frontend (Next.js)
├── server/ # Backend (Node.js + Express)
├── docker-compose.yml
├── .env
└── README.md
```

**Setup Issue?**
Create an issue in this repository

### Give a ⭐, if you liked the project

## 📸 Screenshots

<div>
<h3>Login</h3>
<p>Log into the application with your credentials. If you don't have an account, click <strong>Sign Up</strong> to create a new account. Once you have logged in, you will be directed to projects page</p>
<img src="./screenshots/login.png"/>
</div>

<div>
<h3>View All Projects</h3>
<p>You will find all the projects you have created or belong to. You can also search and sort the projects. Click on <b>Add Project</b> to create new project</p>
<em><b>If your permissions doesn't allow you to manage project, "Add Project" will not be displayed</b></em>
<img src="./screenshots/all_projects.png"/>
</div>

<div>
<h3>Add Project</h3>
<p>Enter your project information here (Title and description)</p>
<img src="./screenshots/add_project.png"/>
</div>

<div>
<h3>Add Project (Contributor)</h3>
<p>Select all the project contributors. You will also see what type of role the user belong to.</p>
<img src="./screenshots/add_project_contributors.png"/>
</div>

<div>
<h3>View Project Info</h3>
<p>Once you have created your project, you will see all your project tickets (intially none). You create new tickets, view project info and edit exisiting ticket.</p>
<em><b>If your permissions doesn't allow you to manage tickets, "Add Ticket" will not be displayed</b></em>
<img src="./screenshots/view_project.png"/>
</div>

<div>
<h3>Project Overview</h3>
<p>Click on <b>Overview</b> to see the project statistics</p>
<img src="./screenshots/project_overview.png"/>
</div>

<div>
<h3>View Ticket Info</h3>
<p>Click on the existing ticket, you can edit the ticket info, add comment or update the ticket assignee</p>
<em><b>If your permission doesn't allow you to manage tickets, all the fields, comments, assigness will be disabled</b></em>
<img src="./screenshots/view_ticket.png"/>
</div>

<div>
<h3>View Ticket Comments</h3>
<p>Click on comments tab, you will see all the ticket comments and you can also comment on it.</p>
<em><b>If your permission doesn't allow you to manage comments, you will not be able to comment</b></em>
<img src="./screenshots/ticket_comments.png"/>
</div>

<div>
<h3>My Tickets</h3>
<p>Click on <b>Tickets</b> tab to see all your tickets regarless of what project it belongs to. Clicking on the ticket will allow you to edit it</p>
<img src="./screenshots/my_tickets.png"/>
</div>

<div>
<h3>Admin - Manage Users</h3>
<p>Click on <b>Admin</b> to manage the organization (Users, Roles, Custom Ticket Type)</p>
<p>Click on <b>Manage User</b> to manage all the users and their roles. Clicking on the user will allow you to update their role</p>
<em><b>This tab will only be displayed if you are the admin</b></em>
<img src="./screenshots/admin_manage_users.png"/>
</div>

<div>
<h3>Admin - Manage Roles</h3>
<p>Manage Roles tab will display all the roles and their respective permissions. To create custom role, click on <b>Add New Role</b></p>
<img src="./screenshots/admin_manage_roles.png"/>
</div>

<div>
<h3>Admin - Manage Roles (Add)</h3>
<p>You can create your custom role by giving a role name and selecting the types of allowed actions</p>
<img src="./screenshots/admin_create_role.png"/>
</div>

<div>
<h3>Admin - Manage Ticket Types</h3>
<p>You will see all the ticket types here. There are some pre-defined ticket types (Feature, Bug, Documentation, Support), but you may create custom ticket types by clicking on <b>Add New Ticket Type</b></p>
<img src="./screenshots/admin_manage_ticket_types.png"/>
</div>

<div>
<h3>Admin - Manage Ticket Types (Add)</h3>
<p>Create custom ticket type by giving ticket type name, selecting an icon, and the icon colour</p>
<img src="./screenshots/admin_create_ticket_types.png"/>
</div>

## Author

- Github: [@Jenil-Vekara](https://github.com/Jenil-Vekaria)
- Portfolio: [Jenil-Vekaria.netlify.app](https://jenil-vekaria.netlify.app/)
- LinkedIn: [@JenilVekaria](https://www.linkedin.com/in/jenilvekaria/)
---

## 🙌 Créditos

- Projeto original: [Jenil-Vekaria/Trackit](https://github.com/Jenil-Vekaria/Trackit)
- Dockerização: [MiqueiasBueno](https://github.com/MiqueiasBueno)

---

## 🐙 Licença

Distribuído sob a licença MIT.