React-Timeline

Visualize timelines in a beautiful layout with React

What's This Project About?

Pretty simple. You got times you want to remember. We got an app. On the off chance you're looking to have yourself a visualization of some period in time or another, React-Timeline affords itself as a niche web application built for just these purposes. The scope remains limited now, but hopefully other uses will arise. See the Roadmap for more.

Running The Project

Clone down the repo: $ git clone https://github.com/IsenrichO/react-timeline
Navigate to the newly created folder on your machine: $ cd react-timeline
Install the project's dependencies: $ npm i
Start Mongo: $ npm run db:dev
To run the app using Webpack's virtual server, execute $ npm run serve
In your browser, navigate to the running instance of the app: localhost:3000

Tech Stack

This project makes use of the MERN stack — MEAN's younger brother. Data persistence with MongoDB is, in part, managed using the popular MongooseJS ORM. On the front-end, Facebook's astronomically popular React view manager (as in MVC) is utilized. However great it may be, a full-stack web application's functionality would nonetheless be hampered without the aid of certain complementary technologies. Chief among these is, of course, Redux — the go-to choice of many for front-end state management. From the side of the server, the NodeJS JavaScript runtime environment is employed in conjunction with Express — the de facto standard insofar as back-end JavaScript frameworks go.

A bevy of other tools/packages/modules/libraries are indispensable to the app as a whole. Among these are:

Webpack: An awesome build tool
Babel: Helps achieve cross-browser compliance by transpilation to (near) universally supported JavaScript standards (i.e., the ES5 spec). Of the many plugins and presets it provides, babel-preset-env, babel-register, babel-preset-react and babel-plugin-transform-object-rest-spread are particularly noteworthy.
NPM: A widely-used package manager for building applications and capitalizing on the labors of others
Sass: A stylesheet language for more logically organized CSS and with support for functions, state (i.e., @mixins, %placeholders, etc.)
PostCSS: A modular framework allowing ad hoc inclusion of the tools (and only those tools) necessary to your workflow (e.g., Autoprefixer, svgo, cssnext, import among a great many more)
Lodash/jQuery:* General-purpose utility libraries for all your functional programming needs
React-Router: Front-end router technology
Redux-Thunk: An integration for using thunks in conjunction with asynchronous Redux code, thereby helping assimilate Promiseified structures inside your app's workflow
ESLint: Code syntax linting tool that is holistically configurable and helps to maintain standards of code quality
Mocha/Chai: Unit-testing suite
Nodemon: A Node.js development utility and file watcher for automated server restart

General Utility NPM Scripts:

build: Deletes existing dist/ directory (if any) and outputs a recompiled build
clean: Employs the rimraf module to recursively delete a directory. This is most often used as a supplementary operation to another script (e.g., in running $ npm run build);
db:dev: Runs the Mongo shell (via the $ mongod command) passing the --httpinterface flag to enable HTTP debugging utilities (e.g., Postman, cURL)
db:drop: Drops the application's persistent storage and starts afresh
db:rs: Restarts MongoDB (via Homebrew
db:seed: Now deprecated automation formerly used to cue the node-mongo-seeds package to seed the database
db:start: Runs the Mongo shell (again, via the $ mongod command) with the --dbpath flag to explicitly define the /data/db directory as Mongo's storage point
db:start1: Runs the Mongo shell via Homebrew
db:stop: Terminates any running instances of the Mongo shell initiated by Homebrew
dev: Runs webpack-dev-server. This does not write any changes to disk; they are simply served from memory via a "virtual" Express server used in conjunction with Sock.js
dev:start: Runs webpack-dev-server and the ordinary webpack command in unison. Affords the benefits of the dev-server (e.g., hot-reloading, faster compile time, iframe/inline modes, etc.) while also writing changes to your machine; not sure this is the best option for other reasons, however, including possible lag, perceived interference.
lint: Performs linting on the contents of the src (read: client) directory using ESLint
rf-mods: Recursively deletes the contents of the node_modules package folder, cleans the NPM cache registry and reinstalls declared dev/depencies (as per what's listed in package.json)
serve: Runs webpack-dev-server with additional CLI options. This is ideal for development purposes.
start: Runs the root-level server.js file inside the Node.js runtime
stats: Writes a JSON-file format analysis file [Ref. stats.json] to the project folder's root. This is useful in conjunction with freely available Webpack bundle analyzers that can provide insight into where optimizations may be had.
test: Runs all written tests (via the Mocha test suite in conjunction with the Chai helper library)
test:watch: Analogues to Webpack's --watch flag for continuous monitoring of file changes, this command likewise watches for changes to the project and, in the event such are detected, will automagically rerun our Mocha test suite files. Note that while Mocha comes equipped with a --watch flag (or, in the equivalent shorthand, -w) out of the box, usage with MongoDB can be quarrelsome and is prone to issues. Consequently, this script instead relies on Nodemon to re-run all tests by executing the mocha CLI command (via its --exec flag), additionally passing the -R min options. The latter instructs Mocha to run these tests using the min reporter — an option that restricts terminal test output to only a summary view (save for errors hit) while also clearing the terminal to ensure this test summary remains in view.
watch: Instructs Webpack to watch (or -w) for all file changes, avoiding the tedium of manually rerunning the compilation command (i.e., webbpack). Note that changes made to the Webpack configuration itself fall outside the scope of the watch command and require a manual restart before changes are made evident.

Roadmap

At this juncture, the project is still very much in its infancy. As such, we're still actively kneading out bugs and working on adding in all those features you expect. Beyond just a basic CRUD app that stores and reads dates, other possibilities may include project management, personal planners, etc.

Support & Contact

Got problems? Submit an issue with details so we can squash dem bugs. Something missing? Or just want to make the project better? Submit a PR and help us out. I promise we're friendly. For comments, questions or other concerns, get at me:

✉ Email