markwiltberger.github.io
Mark Wiltberger
https://mark-wiltberger.simple.ink/
Customer List Full-Stack Web App
![customer-list-app-frontend-Screenshot.2023-08-30.141833.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/be40b622-2184-4c76-aafe-ccd3be77d0d7/customer-list-app-frontend-Screenshot.2023-08-30.141833.png)
The Customer List App Product Spec:
- Build a full-stack web application.
- Web application should have a separate layer for the API.
- Web application should have a separation of concerns.
- Web application programming should follow SOLID principles.
- Application is a “proof-of-concept.”
- Application should be able to conduct CRUD transactions: Create, Read, Update, and Delete transactions from a database.
The result is a web application that maintains and tracks a list of customers. The stack is a backend application built in the Nest.js framework running on the Node.js engine, a frontend application built in the Vue.js framework running on Node.js, and storage in a MongoDB NoSQL database.
The Product, Process, and Artifacts
Product:
Here is the **Customer List App Demo:
[Customer List App Demo](https://mark-wiltberger-customer-list-app.netlify.app/)**
Process:
****GitHub Repositories:****
Backend:
Customer List App Backend GitHub Repo
Frontend:
Customer List App Frontend GitHub Repo
The steps taken from initial build to cloud deployment:
Artifacts:
Backend Demo (Must open a Postman account):
Mark Wiltberger Postman Customer List App API
Example of API Request URL to Google Cloud Run:
Request list of customers -
https://customer-list-app-backend-template-1-iftelzoeoa-uc.a.run.app/customer/customers
**MongoDB resides in a personal MongoDB Atlas cloud account**
GitHub Customer List App Project Planning Table:
@MarkWiltberger's Customer List App Features • MarkWiltberger
Outcomes
Successfully created a proof-of-concept full-stack web application using Vue.js, Nest.js, and MongoDB.
Created in local development and then deployed each layer to its own cloud platform.
The following changes could be made to customer-list-app:
- [ ] add security to access of all three layers of the app
- [ ] update from Vue 2 to Vue 3
- [ ] look at directory scaffolding that creator of Nest.js made for Vue.js at vuejsexamples.com
- [ ] build up Vue 3 app from scratch by adding components
- [ ] convert frontend components to use Vue 3 features
- [ ] evaluate frontend design
- [ ] add try-catch error catching for all API connections
- [ ] create documentation for API requests
- [ ] add unit and e2e testing for all apps
- [ ] add validation to frontend Vue forms
- [ ] add validation to backend request-responses
- [ ] add authentication
- [ ] create new frontend component design using tailwind.css
- [ ] create Postgres database to replace MongoDB
- [ ] create a Prisma ORM to have backend interact with Postgres database
- [ ] add fields of different types to customer object
- [ ] add a new relational table to link to customer
Contact me:
****Mark Wiltberger****
LinkedIn: https://www.linkedin.com/in/markwiltberger/