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

1. Clone down the repo: $ git clone https://github.com/IsenrichO/react-timeline
2. Navigate to the newly created folder on your machine: $ cd react-timeline
3. Install the project's dependencies: $ npm i
4. Start Mongo: $ npm run db:dev
5. To run the app using Webpack's virtual server, execute $ npm run serve
6. 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