Merge pull request #104 from szymonpoltorak/DEV-180-readmeHome

Dev 180 - readme home

README.md

@@ -12,6 +12,12 @@ application that is built of few components.
 Whole application has been made in spirit of clean code and architecture. We are thinking about security and performance
 best practices. Project is deeply tested on backend site and uses Github Actions for CI/CD.
 
+## Database diagram
+
+<div align="center">
+    <img src="screenshots/db.drawio.png" alt="TechStack">
+</div>
+
 ## How to run
 
 Application uses docker compose technology to run all components. To run application you have to install docker.
@@ -45,6 +51,10 @@ cd scripts/dev
 
 ## Tech stack
 
+<div align="center">
+    <img src="screenshots/tech_stack.png" alt="TechStack">
+</div>
+
 1. Frontend
 
 * Angular 17,
@@ -74,3 +84,71 @@ cd scripts/dev
 * KeyCloak,
 * Mapstruct,
 * Lombok.
+
+## Screenshots
+
+* Login
+
+<div align="center">
+    <img src="screenshots/login.png" alt="TechStack">
+</div>
+
+* Register
+
+<div align="center">
+    <img src="screenshots/register.png" alt="TechStack">
+</div>
+
+* Projects
+
+<div align="center">
+    <img src="screenshots/projects_list.png" alt="TechStack">
+</div>
+
+* Project settings
+
+<div align="center">
+    <img src="screenshots/project_settings.png" alt="TechStack">
+</div>
+
+* Sprints
+
+<div align="center">
+    <img src="screenshots/sprints.png" alt="TechStack">
+</div>
+
+* Sprints Burndown
+
+<div align="center">
+    <img src="screenshots/sprint_burndown.png" alt="TechStack">
+</div>
+
+* Task
+
+<div align="center">
+    <img src="screenshots/task.png" alt="TechStack">
+</div>
+
+* Task Comments
+
+<div align="center">
+    <img src="screenshots/task_comments.png" alt="TechStack">
+</div>
+
+* Creating new backlog item
+
+<div align="center">
+    <img src="screenshots/new_item.png" alt="TechStack">
+</div>
+
+* Tasks in Boards
+
+<div align="center">
+    <img src="screenshots/board_no_group.png" alt="TechStack">
+</div>
+
+* Tasks grouped by member
+
+<div align="center">
+    <img src="screenshots/board_group_member.png" alt="TechStack">
+</div>

corn-backend/src/main/java/dev/corn/cornbackend/config/PlaceholderData.java

@@ -105,7 +105,7 @@ public void run(String... args) {
 
         for (int i = 0; i < 8; i++) {
             sprintService.addNewSprint(new SprintRequest(
-                    project.getProjectId(), String.format("Sprint %d", i), prevDate, prevDate.plusDays(7),
+                    project.getProjectId(), String.format("Sprint %d", i), prevDate, prevDate.plusDays(7L),
                     String.format("Sprintd %d description", i)
             ), projectOwner);
 

corn-frontend/src/app/core/interfaces/home/feature.interface.ts

@@ -3,4 +3,5 @@ export interface Feature {
     label: string;
     content: string;
     isLeft: boolean;
+    imagePath: string;
 }

corn-frontend/src/app/pages/home/feature/feature.component.html

@@ -1,4 +1,4 @@
-<section class="m-20 flex gap-10 justify-center">
+<section class="m-20 flex gap-10 justify-center overflow-y-hidden">
     @if (feature.isLeft) {
         <article>
             <p class="text-3xl my-2.5">
@@ -11,7 +11,9 @@
         </article>
     }
 
-    <div class="bg-amber-300 w-96 h-96"></div>
+    <div>
+        <img [ngSrc]="feature.imagePath" alt="login-page" width="700" height="520">
+    </div>
 
     @if (!feature.isLeft) {
         <article>

corn-frontend/src/app/pages/home/feature/feature.component.ts

@@ -1,12 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { MatTab } from "@angular/material/tabs";
 import { Feature } from "@core/interfaces/home/feature.interface";
+import { NgOptimizedImage } from "@angular/common";
 
 @Component({
     selector: 'app-feature',
     standalone: true,
     imports: [
-        MatTab
+        MatTab,
+        NgOptimizedImage
     ],
     templateUrl: './feature.component.html',
     styleUrl: './feature.component.scss'

corn-frontend/src/app/pages/home/home.component.html

@@ -1,18 +1,18 @@
-<mat-toolbar class="!bg-dark-color-settings-container-background">
+<mat-toolbar class="!bg-dark-color-settings-container-background" xmlns="http://www.w3.org/1999/html">
     <div class="flex items-center">
         <img alt="icon" class="m-1.5" height="40" ngSrc="../../../assets/icons/icon-128x128.png" width="40">
         <span class="font-extralight font-logo text-corn-primary-300 text-4xl m-1.5">Corn</span>
     </div>
 
     <span class="flex-auto"></span>
 
-    <button mat-fab extended class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
+    <button class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
     bg-dark-color-settings-container-background text-corn-primary-300 font-light" aria-label="Login" (click)="login()">
         <mat-icon class="mr-2">login</mat-icon>
         Login
     </button>
 
-    <button mat-fab extended class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
+    <button class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
     bg-corn-primary-300 text-dark-color-settings-container-background font-light" aria-label="Register" (click)="register()">
         <mat-icon class="mr-2">app_registration</mat-icon>
         Register
@@ -28,7 +28,9 @@
             <p class="text-sm">We offer simple, responsive app to manage small scrum teams</p>
         </article>
 
-        <div class="bg-amber-300 w-96 h-96"></div>
+        <div>
+            <img ngSrc="assets/home/login.png" alt="login-page" width="600" height="600">
+        </div>
     </section>
 </section>
 
@@ -47,38 +49,48 @@
 <section class="flex justify-center p-20">
     <section class="flex items-center gap-10">
         <article>
-            <p class="text-3xl my-2.5">Built with modern technologies</p>
+            <p class="text-3xl my-2.5">Built on top of modern technologies</p>
 
-            <p class="text-sm">We offer simple, responsive app to manage small scrum teams</p>
+            <p class="text-sm">We use modern technologies to achieve best user and developer experience.</p>
         </article>
 
-        <div class="bg-amber-300 w-96 h-96"></div>
+        <div class="rounded-xl">
+            <img ngSrc="assets/home/tech_stack.png" alt="login-page" width="600" height="600">
+        </div>
     </section>
 </section>
 
 <section class="bg-dark-color-settings-container-background flex justify-center p-20">
     <section class="flex items-center gap-10">
-        <div class="bg-amber-300 w-96 h-96"></div>
+        <div class="rounded-xl">
+            <img ngSrc="assets/home/board_group_member.png" alt="login-page" width="600" height="600">
+        </div>
 
         <article>
-            <p class="text-3xl my-2.5">Well documented</p>
+            <p class="text-3xl my-2.5">Productivity first</p>
 
-            <p class="text-sm">Our app has well documented api and code. It is prepared for expansion.</p>
+            <p class="text-sm">
+                We offer easy way to manage your teams tasks in each sprint.<br>
+                You can easily group the board by tasks or each member.
+            </p>
         </article>
     </section>
 </section>
 
 <section class="flex justify-center p-20">
     <section class="flex items-center gap-10">
         <article>
-            <p class="text-3xl my-2.5">Followed by the best practices</p>
+            <p class="text-3xl my-2.5">Security matters</p>
 
             <p class="text-sm">
-                We follow test driven development and material design to achieve best code and ui quality.
+                We care about your privacy, that's why we use the best security practices to keep your data safe. <br>
+                We use keycloak as our authentication provider to ensure application safety.
             </p>
         </article>
 
-        <div class="bg-amber-300 w-96 h-96"></div>
+        <div class="rounded-xl">
+            <img ngSrc="assets/home/register.png" alt="login-page" width="600" height="600">
+        </div>
     </section>
 </section>
 
@@ -88,4 +100,4 @@
     <span class="m-3 cursor-pointer">Privacy Policy</span>
 
     <span class="m-3 cursor-pointer">Contact us: support&#64;cornapp.com</span>
-</footer>
+</footer>

corn-frontend/src/app/pages/home/home.component.ts

@@ -53,25 +53,29 @@ export class HomeComponent implements OnInit {
             content: "We offer easy way to manage your different projects. Each project is one place allowing you to switch between them easily.",
             isLeft: false,
             label: "Manage Projects",
-            title: "All projects in one place"
+            title: "All projects in one place",
+            imagePath: "assets/home/projects_list.png"
         },
         {
             content: "You can easily plan new sprints and manage them. Everything is very simple.",
             isLeft: true,
             label: "Manage Sprints",
-            title: "One view to rule them all"
+            title: "One view to rule them all",
+            imagePath: "assets/home/sprints.png"
         },
         {
             content: "Add, remove and edit tasks in appropriate sprint. Manage descriptions, add comments and assign them to users.",
             isLeft: false,
             label: "Work with Tasks",
-            title: "Easy to add, easy to remove"
+            title: "Easy to add, easy to remove",
+            imagePath: "assets/home/task.png"
         },
         {
-            content: "Manage your backlog entries to easily deal with work to do. Easy view for whole work.",
+            content: "You can easily analyze your sprints and see how your team is doing. You can see how much work is done and how much is left to do.",
             isLeft: true,
-            label: "Deal with Backlog",
-            title: "All tasks in one backlog"
+            label: "Analyze your sprints",
+            title: "Analysis is a key",
+            imagePath: "assets/home/sprint_burndown.png"
         }
     ];
 }