markwiltberger.github.io
Mark Wiltberger
https://mark-wiltberger.simple.ink/
Customer List Full-Stack Web App
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:
- Went through tutorial: Build a Customer List Management App Using Nest.JS, MongoDB and Vue ( https://www.myhsts.org/tutorial-customer-list-management-app-using-nest-mongodb-and-vue.php ) also at: Building a modern app using Nest.js, MongoDB and Vue.js | DigitalOcean ( https://www.digitalocean.com/community/tutorials/building-a-modern-app-using-nestjs-mongodb-and-vuejs ) Both by: Olususi Kayode Oluyemi
- Installed Vue 2 in development
- Installed Nest.js in development
- Coded Nest.js app with assistance of tutorial
- Coded Vue 2 app with assistance of tutorial
- Created MongoDB in local development
- Created frontend and backend repositories locally and in GitHub
- Created customer-list-app repository in GitHub for Project Management using GitHub Issues and Projects
- Created cloud MongoDB using MongoDB Atlas
- Deployed Nest.js backend app to cloud platform using Google Cloud Run
- Deployed Vue 2 frontend app to cloud platform using Netlify.
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****