Cloud Mind, A MeaningCloud Frontend

Summary
Technologies
Features
Unit Testing
Structure
Usage and Installation

Summary

Cloud Mind is a frontend for MeaningCloud and was built using that I built to practice front end development and Webpack as part of my Advanced Front End Nanodegree from Udacity.

It uses a NodeJs backend server to connect and resolve MeaningCloudAPI to retrieve content sentiment (Agreement, Subjectivity, Confidence, Irony).

Webpack was the buildtool of choice and was configured according to the project requirements.

It demonstrates my understanding of Webpack, Webpack's loaders, Webpack's plugins, Preprocessed styles (Sass) and NodeJS.

Technologies

NodeJS was used as the server. Webpack was used as the buildtool. Jester was used for the unit-testing. HTML, CSS, JS, SASS used for the front end. Axios was used to handle web requests in the backend.

Features

NodeJS backend configured with DotEnv to retrieve.
NodeJS backend configured with Axios to make web requests to the API.
Webpack configured with loaders and plugins for the buildtool.
Validate the input using regular expressions to make sure the link is valid.
Display sentiment (Agreement, Subjectivity, Confidence, Irony) from MeaningCloud.
Implemented service workers to serve cached versions of the website.
Implemented unit testing for the javascript functions using Jester.

Unit Testing

Two test files that include three tests are included in the test folder.
To Run the tests

npm run test

Structure

|   .babelrc
|   package-lock.json
|   package.json
|   Showcase.gif
|   webpack.dev.js
|   webpack.prod.js
|
+---src
|   +---client
|   |   |   index.js
|   |   |
|   |   +---images
|   |   |       favicon.png
|   |   |       logo.png
|   |   |       robot.gif
|   |   |
|   |   +---js
|   |   |       handleSubmit.js
|   |   |       linkChecker.js
|   |   |
|   |   +---styles
|   |   |       base.scss
|   |   |       footer.scss
|   |   |       form.scss
|   |   |       header.scss
|   |   |       resets.scss
|   |   |
|   |   \---views
|   |           index.html
|   |
|   \---server
|           index.js
|           mockAPI.js
|
\---_test_
        testFormHandler.spec.js
        testLinkChecker.spec.js

Usage and Installation

You can get the project up and running in 3 simple steps.

Use the following command to install the required packages

npm install

Use the following command to build the project using webpack

npm run build-prod

Alternatively a development build is also available using

npm run build-dev

Use the following command to run the server

npm start

HossamAbubakr / CloudMind