Purpose of this app:
As cannabis laws are changing, its medical use and recreational use are increasing in states where it is legal. Hence, this app's main purpose is to allow the recreational and/or medical cannabis user to sort through the myriad number of different cannabis strains available today. It's secondary purpose is to help educate others about the different strain types, strain flavors, and strain effects so that beginners are able to make an informed decision when buying cannabis legally. The app utilizes The Strain API database (http://strains.evanbusse.com/?ref=public-apis) of cannabis strains can be viewed by name, type, flavor, positive effects, negative affects, and medical symptoms that the strain helps to treat.
How to use:
Anyone can access the website. Simply, go to http://cannabis-strain-app.surge.sh/ or click the Cannabis Strain App link below in order to start at the website's homepage. A user does not need to enter any credentials to access the app information. One can access the different pages of the website by either clicking on the naviagtion bar or by clicking on the cards below the image carousel on the home page. If the user clicks on any of the carousel images, the website opens up a new tab to an informational article related to the image caption.
Features on the app:
Upon entering the home page of the website, the image carousel is most likely the first thing that the user notices. As described above, the user can click on any carousel image to have the website open another tab to an educational article. Above the image carousel is the navigation bar which has a link to the homepage on the top left that is named "Cannabis Strain App." While still on the navigation bar, one can click "View" that displays a dropdown list of navigation links such as "Strain Type", "Strain Effect", "Strain Flavor", and "All Strains." To the right of "View", the user will see "About Us." The navigation bar and the image carousel was created with utilization of Bootstrap. Underneath the image carousel, one will see cards. The top card says "Why Cannabis." This card explains why we as a group decided to choose this particular website project. The rest of the cards have titles that include "Cannabis Strain by Effects", "Cannabis Type Information", "Cannabis Strain by Flavor", and "All Cannabis Strain Information". If the user clicks on any of these cards, the website will go to the same pages that are on the navigation bar. The only links that do not have a card are the home page link and the "About Us" link on the navigation bar. The navigation bar is replicated on each page of the website for uniformity and ease of use. If the user navigates to the strain type page, they will see three buttons that allow them to filter through the cannabis strains by either "Sativa", "Hydrid", or "Indica". Each button, if clicked, will fetch from the API database all of the cannabis strains of that type, and it will display the cannabis strain information on cards below the buttons. There is also a paragraph with an explanation of the different strain type characteristics. After that, the user can navigate to the strain effect page where they will see three selector tools with three buttons. The top selector tool allows the user to filter through the cannabis strains by either positive effects, medical ailments, or negative affects. Once the user has selected an effect and clicked the adjacent button corresponding to that effect, all of the cannabis strains with that chosen effect will display on the same card format as the strain type page. The display card format was designed with a combination of bootstrap and CSS code. If the user clicks on the strain flavor webpage link, the user will see a selector tool with a click button that allows the user to chose a flavor. After the user clicks the adjacent button, the webpage will display all the cannabis strains with that particular flavor. The results will be displayed below the selector in with the same formatted display cards as the other webpages. If the user desires to search the cannabis strain API database by name and/or display all the cannabis strains with their associated information, they would have to click the all strains webpage link. Once they get to the all strain webpage, the user will see a text box with a search button were they can search any text associated with the cannabis names. For example, if the user types "haze" into the textbox and clicks on the button, then all of the cannabis strains that have the word "haze" in them would be displayed below the selector and "All Strains" button. If the all strains button is clicked, it will display all of the 2000+ cannabis strains and cannabis strain information on cards below the button. Lastly, the user can click on the "About Us" link in order go to the last webpage which has pictures, descriptions, and LinkedIn url buttons for each group member that created the website. If the user wishes to return to the home page, they can click the "Cannabis Strain App" link on the top left of the navigation bar.
- HTML
- CSS
- JavaScript
- Bootstrap