4ntent-code-challenge

the goals of this project:

The purpose of this challenge is for you to show that you know javascript, css, html, and how to utilize a vue ui library to create fully responsive vue components while keeping a "minimum viable product" mindset. Be sure to make some dummy data to demonstrate the functionality of your code. Normally we would make requests to our database, get data back, and manipulate it. For now, to demonstrate your ability to handle data, please make an object containing your own dummy data similar to the style of a json object you might receive back as a response to an API request.

setup your project:

fork the repo, clone the repo, create a branch, make changes. when you are done, commit, push changes, and submit a pull request

in your project:

use npm to install the following:

vue cli from here: https://cli.vuejs.org

vuetify from here: https://vuetifyjs.com/en/

wireframe:

check out the wireframe in the images folder. this is a rough draft of what your component is to include

the scenario:

the company LifeOnPurpose offers health and wellness services to it's clients via it's website. Clients access these services by logging into their account and utilizing various tools available to them based on the subscription they purchased. Each client has a mentor who is assigned to them when they sign up. The first thing the mentor does is has a video call with the client to figure out the client's wellness goals. After that call, the mentor will create a personalized Wellness Plan for them and send the info to the client's account. The Wellness Plan will be viewable by the client on their Wellness Plan page within their personal acount.

your mission:

first check out the wellness plan wireframe in the images folder. Using it as a rough guide, create a fully responsive mvp Wellness Plan page to be displayed on the CLIENT's account. please use either vuetify's layout grid system or bootstrap. in addition, use the vuetify ui library to build this page

create a json object in its own .json file. the json object needs to have dummy data organized in the same way the fields are organized within the wireframe. aka the json object needs values for fields such as "my intention", "name", etc.

from the Wellness Page, make an axios request for the .json file you created and pass the response data into it's cooresponding fields shown within the wireframe

make sure everything is fully responsive. it should look clean but don't focus on style. focus on function and reponsiveness.

BONUS POINTS:

create a button like the one shown on the wireframe where the user clicks on it and the Wellness Plan becomes an easy to read nicely laid out PDF for download or to print

Once you are finished:

Push your branch, make a pull request

Awesome!!! Can't wait to see what you can do! Ask me any questions as a Git Issue here: https://github.com/joannawheeler/4ntent-code-challenge/issues. I should be able to get back to you within a few hours or so. Good luck!