FoodsViewer

A private and secure front-end interface to the digest package.

First and foremost, built for me and my girlfriend.

Overview

Description

FoodsViewer is a responsive web application to better visualize results stemming from Viome Gut Intelligence Test® kits. It uses the data structures of digest to better combine results of a couple, here mine. It is a private application. You cannot sign up, and you cannot use it. This is because I am not affiliated to Viome® in any way. For more information on this, see section Disclaimer below.

Why is this code public?

Because you can easily clone this project, deploy it, and use it privately, just like I do. I made my best to make it production ready. Note that you will have to go through the following steps before deploying.

1. Create a private, untracked, crypt/ folder. This folder will contain your users' information and data (basically JSON files containing unparsed digest::FoodCollection).

2. Create a private, untracked, .env file with some secret SESSION_TOKEN environment variable. Make it random, really long, and hide it at all costs. You will also have to set a second environment variable NODE_ENV equal to development or production.

3. Compile the production versions of the CSS and JS scripts with the npm commands defined in package.json.

4. Create a private/images/foods folder, and populate it with images of all the foods included in your digest::FoodCollection(s). Make sure that names passed to all Food::imgFile match the names of your foods' images.

5. Finally, publish to the web, in one click. (Anyone else tired of these annoying YouTube's Webflow ads?)

Anyone else tired of these annoying YouTube's Webflow ads? - Litterally every developer on the planet.

Implementation

This web application is an Express application embedded into a single Node process. It uses

• EJS as its templating system;
• memorystore to store sessions' IDs and cookies on the server;
• bcrypt to manipulate sensible information such as passwords;
• Passport for the authentication strategy;
• SASS to build CSS files;
• PostCSS to minify CSS files and
• UglifyJS to compress and minify client-side JS scripts.

The code is straightforward, follows usual Express conventions, and is well documented. It won't be complicated to adapt, I guarantee it. 😄🌈

Disclaimer

I am not affiliated to Viome® in any way. FoodsViewer is an independent project.

No Viome® data is exposed by FoodsViewer. It assumes that each user builds its own application and its own datasets manually, from their personal results.

Viome® and Viome Gut Intelligence Test® are registered trademarks. Buy your own kit online from their online store.

Bugs and feedback

Submit them here. Also, if you have the time to give me some feedback, I would really appreciate it. It is always reassuring to have someone else look at your code. Thank you!