Horticulture webapplication

For our Advanced Fullstack Development class project, we're crafting a comprehensive web application tailored for a horticulture company. This all-in-one solution will streamline management tasks related to employees, clients, appointments, schedules, materials, and more.

Technologies

Design

• Figma for collaborative design.

Frontend

• Vue.js with TypeScript for a dynamic and type-safe user interface.
• UnoCSS for clean and responsive styling.
• PrimeVue for feature-rich UI components.
• Firebase Authentication for secure authentication.
• Firebase Storage for secure file storage.
• yup and vee-validate for robust frontend validation.
• TomTom for enhanced location services.

Backend

• NestJS and TypeORM for a robust backend connected to a MongoDB database.
• GraphQL API for efficient data communication.
• Firebase-admin for secure backend authentication.
• Nodemailer with Handlebars for templated email communication.
• Jest for thorough testing.

Tools & Deployment

• Docker for seamless deployment and scalability.
• Kubernetes for container orchestration.
• Azure for kubernetes hosting.
• Prettier for consistent code formatting.
• ESLint for maintaining code integrity.
• Lerna for simplified development.
• LogRocket for detailed frontend error logging.

Getting started

Environment variables

Frontend

Go to packages/tuinbouw and add the following environment variables to the .env and .env.production.local files:

# .env
# Firebase > Project settings > General > Your apps > Firebase SDK snippet > Config
VITE_apiKey=
VITE_authDomain=
VITE_projectId=
VITE_storageBucket=
VITE_messagingSenderId=
VITE_appId=

VITE_BACKEND_URL=http://localhost:3001/graphql

# TomTom Developer > Developer portal > My projects > API keys
VITE_TOMTOM_API_KEY=

# OpenWeather > My API keys
VITE_OPENWEATHER_apiKey=

# LogRocket > Create Account 
VITE_LOGROCKET_ID=

# .env.production.local
VITE_apiKey=
VITE_authDomain=
VITE_projectId=
VITE_storageBucket=
VITE_messagingSenderId=
VITE_appId=

VITE_BACKEND_URL=http://localhost:3001/graphql

VITE_TOMTOM_API_KEY=

VITE_OPENWEATHER_apiKey=

VITE_LOGROCKET_ID=

Backend

Go to packages/backend and add the following environment variables to the .env and .env.production.local files:

# .env
# Path to the firebase service account key file
GOOGLE_APPLICATION_CREDENTIALS= 

# Add email and password for the email account that will be used to send emails
MAIL_USER=
MAIL_PASSWORD=
MAIL_FROM=noreply@noreply.com

URL_FRONTEND=http://localhost:5173 #CORS origin External port of the Tuinbouw service
DB_HOST=localhost
DB_PORT=27027
DB_NAME=api

# Firebase > Project settings > General > Your apps > Firebase SDK snippet > Config
FIREBASE_STORAGE_BUCKET=

NODE_ENV=development

# .env.production.local

MAIL_USER=
MAIL_PASSWORD=
MAIL_FROM=

URL_FRONTEND=http://localhost:8081 #CORS origin External port of the Tuinbouw service
DB_HOST=mongodb
DB_PORT=27017
DB_NAME=api

NODE_ENV=production

FIREBASE_STORAGE_BUCKET=

CLI_PATH=./packages/api/dist/cli.js

Running the application locally with Docker

Open your docker desktop and run the following command in the root folder of the project:

docker-compose up --build

Running the application in Azure Kubernetes Service (AKS) & Netlify

The api & database are deployed in Azure Kubernetes Service (AKS) and the frontend is deployed in Netlify.

Here more information about how to deploy the application in Azure Kubernetes Service (AKS) & Netlify.

Link

Seed the database

Here more information about how to seed the database.

Link

Testing

Here more information about how to test the application.

Link