The app allows the user to promote their energy consultant business and their YouTube channel. The user can blog, update the charts and collect the email addresses of prospects through the energy and tax check-up functionalities.
The website should have:
- a blog
- charts (line plot and barplot)
- interactive energy check-up and tax check-up
- the ability to send an automatic email to visitors completing the energy check-up
- the ability to store email addresses in a database
Working in team with an Art Director
# Clone the following repository - frontend
$ git clone https://github.com/StefanoFrontini/pilloledienergia.git
# Go into the repository
$ cd pilloledienergia
# Install Gridsome CLI
$ npm install --global @gridsome/cli
# Install dependencies
$ npm install
# Run the frontend
$ gridsome develop
Gridsome is a static site generator for Vue.js.
A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.
Gridsome adds a GraphQL layer that helps you bring data from API's, CMS's with ease at build time.
Serverless functions let you run server-side code without having to run a dedicated server.
Netlify let you code your functions in Javascript. An example of a function called hello.js would be:
exports.handler = async function(event, context) {
return {
statusCode:200,
body: JSON.stringify ({message: "Hello World"})
}
}
That's it! Your little server is ready!
In this project I used Netlify Serverless Functions to send a notification email with nodemailer and to update the database with a graphQL query (FaunaDB).
Responsive email is hard. Each client renders HTML in its own way and some don’t even support HTML, which can cause delivery issues.
I used the MJML framework to send the email to the visitor who completes the energy check-up
D3 and Vue both want to handle the DOM.
I decided to let Vue handle the DOM and use the powerful D3 primitives.
- HTML
- CSS Flexbox
- SASS
- Javascript
- Vue
- Gridsome (Static Site Generator)
- D3
- GraphQL
- Markdown
- MJML responsive email framework
- FaunaDB
- Netlify Serverless Functions
I deployed the frontend to Netlify.
When I push a new commit on Github, Netlify triggers a new build.