/OfficeBoard

Web application for office communication (messages & tasks boards). Using ASP.NET Core 5.0 for back-end & Angular for the client-side.

Primary LanguageCSSGNU General Public License v3.0GPL-3.0

OfficeBoard

🎯 My project for the Angular course at SoftUni. (August 2021)

Web application for office communication:

  • Messages board for sharing important messages with team members.
  • Tasks board for keeping track of tasks which should be done inside the team.
  • Comments option for the tasks.

⚒️ Built With

Back-end Data access technology Database system Client-side
ASP.NET Core 5.0, SwaggerUI Entity Framework (EF) Core 5.0 MS SQL Server Express Angular

⚠️ Prerequisites

⚙️ Configurations

1. Server

  • If you don't use SQLEXPRESS, you should check the connection string in appsettings.json and replace Server=.\\SQLEXPRESS; with Server=.;.
  • Run dotnet run in the OfficeBoard.Server App's directory. Seeding sample data would happen, including test accounts.
  • You should see SwaggerUI in your browser on https://localhost:44390.
  • ( The server app is set to listen on https://localhost:44390. If you need to change that, you may do it inside UseUrls() in the Program.cs file, but note that the apiUrl in the file Client/src/environments/environment.ts should be the same. )

2. Client

  • The OfficeBoard.Server App should be running in order to use the Client.
  • Run npm install in the Client directory.
  • Run ng serve --open (in the Client directory) for a dev server.
  • You should see OfficeBoard's client-side open in your browser on http://localhost:4200/.

Seeded test accounts:

  • Username: testuser / password: 123456
  • Username: anothertest / password: 123456

ℹ️ Structure

Public part (visible without authentication):

  • Dashboard - shows the count of messages, tasks and comments for the day, for the month and for the year;
  • Login page - user login form;
  • Register page - user registration form;

Only for Logged Users:

  • Profile
    • view and edit own profile info;
    • view other user's info;
  • Messages
    • messages board - all messages with search bar;
    • create messages with title and content;
    • edit or delete own messages;
  • Tasks
    • tasks board - all tasks in three columns - to do, doing and done;
    • change task's status by moving the task across the three columns;
    • create tasks with title and description;
    • edit or delete own tasks;
    • view task's details with comments;
  • Comments
    • shown in task's details page;
    • create comments for existing tasks;
    • edit or delete own comments;

👀 Screenshots

Dashboard

OfficeBoard-MessagesBoard-Screenshot

Messages Board

OfficeBoard-TasksBoard-Screenshot

Messages Create

OfficeBoard-TasksBoard-Screenshot

Tasks Board

OfficeBoard-TasksBoard-Screenshot

Tasks Edit

OfficeBoard-TasksBoard-Screenshot

Task Details With Comments

OfficeBoard-TaskDetailsWithComments-Screenshot

Task Comment Create

OfficeBoard-TaskDetailsWithComments-Screenshot

Edit User Profile

OfficeBoard-TaskDetailsWithComments-Screenshot

404

OfficeBoard-TaskDetailsWithComments-Screenshot

License

This project is licensed under the GPL-3.0 License.

Acknowledgments

1) Thanks to Ivaylo Kenov and Ines Ivanova for the great video tutorials in the YouTube channel Code It Up with Ivo.

2) Using code from SB Admin 2 Template by Start Bootstrap.