Box Factory Full stack 📦

Compulsory assignment | Systems development

View demo · Report Bug

Table of Contents

1. Screenshots of the main page features
2. Deployment
   • Front end
   • Back end
   • Database
3. About The Project
   • Built With
   • Repos
4. Tech stack
5. Strict minimal requirements
6. Extra requirements
7. License
8. Contact
9. Acknowledgements

Screenshots of the project features

Main Dashboard page

Light mode dark mode

Box Management page

Box data table | Search | Sort | Pagination

Create box modal | Validation | Error handling

Box page (ID) | Delete box | Update box | Validation | Error handling | Expandable Navbar

Extra info on the Apex chart | Sales data | Past orders

Deployment

You can go and run the app locally or visit the demo version of the app which is deployed on Azure and Vercel. Frontend was deployed to Vercel in two stages (preview and production) where preview was on development branch and production on master branch.

Backend was tested locally and finally deployed to Azure Web App.

Front end

• Vercel Fully deployed via Git Actions to Vercel

➡️ Visit View demo || https://frontend-phi-ten-59.vercel.app/management/boxes

Back end

• Azure
• AzureWebApp Fully deployed via Git Actions to Azure Web App

➡️ Visit View demo || https://box-factory.azurewebsites.net/api/boxes

About The Project

The boomer boss of the box factory wants to modernise by having an inhouse application to keep track of their products (boxes).

He wants employees to be able to add new boxes to their catalogue, edit existing, remove and find particular boxes based on searching and sorting preferences.

You, as the CTO, must decide what properties boxes have in the IT system. (In other words, there's no prebuilt database schema or starter app foundation to rely on)

Built With (Tech stack)

---

Front end

• Angular-Tailwing Started Kit
• Angular
• Tailwind
• Typescript
• HTML
• SCSS
• Playwright
  • E2E testing
• Jest
  • Unit testing

Back end

• Dotnet
• Rest API
• Playwright
• NUnit

Database

• ElephantSQL

Angular Started Kit

To speed up the development workflow and avoid all the boilerplate code I used the Angular-Tailwind Started Kit and basically adjusted how I wanted and build my features on top of it.

Thanks to the author of the starter kit for the great work and time saved.

https://github.com/luciano-work/angular-tailwind

Author

https://github.com/luciano-work

Repos

---

Front end

• https://github.com/TomasSirotek/frontend

Back end

• https://github.com/TomasSirotek/factory-backend

Strict minimal requirements:

---

• The client application must be built using Angular. ✅

• The backend must be built using a .NET Web API + Relational Database. ✅

• Communication between client and server should be done using HTTP. ✅

• There must be data validation on both the client and server side. ✅

• There must be at least 1 business entity and 1 table in the database. ✅

There must be at least the following CRUD operations: ✅

• Create a new box

• Delete an existing box

• Search boxes (Client side)

• See all details for one given box on it's own page (get by ID)

• Updating a box

• Any testing deemed relevant must be conducted in order to assure quality. This can be E2E testing using Playwright (SDK is free of choice, but I recommend .NET Playwright) or integration testing of API's (simply calling the API with an HTTP client in an NUnit test and making assertions). ✅

• You must have at least one workflow on Github Actions which automates building, running and testing of your application. ✅

Extra requirements:

---

❗Optional hard feature ❗

The boomer boss also wants to keep track of orders. There must now be at least a box table, an order table and junction table. (1 order can have many box models and 1 box model can be on many orders, so this is a many-to-many relationship). ✅

⚠️Optional very hard feature⚠️

The boomer boss also wants visualisations of box sales from past orders. He likes to look at diagrams that show how many boxes are being sold over time, and wants you to use https://www.npmjs.com/package/apexcharts to visualise sales data coming from the API. ✅

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Tomas Sirotek - @twitter- @linkedIn