Code Monkey home page Code Monkey logo

timelinebubbles's Introduction

TimelineBubbles

Build Coverage Status

Describing historical data? Why not to use a timeline?

GIF

App

Greetings

Hi ✋! My name is Nickolas, known as nickolasrm, the creator of this app.

Today I'm gonna guide you through the usage of this simple, but elegant app that helps you making timelines.

What is a timeline?

A timeline is a solution for visualizing historical data in a form similar to the way we measure length with a ruler.

What is TimelineBubbles?

TimelineBubbles is a project I developed to reduce the amount of time I spend building timelines for my presentations. Most of my presentations have a historical background, and because of that, I wasted lots of time building timelines. I just don't want it to happen again.

Should I use this app?

If you're going to make a presentation or just want to create a historical representation, for sure, use it!

Usage

Go to the app page

For installing locally (only if you are going to edit the code):

  1. Clone the repository
  2. Run npm install
  3. Run npm start
  4. A browser tab will be opened at localhost:3000. Enjoy

Theming

Of course you can theme your timeline. Here below are some examples:

Theme example 1

Theme example 2

Theme example 3

Credits

If this app helped you in some way, don't forget to give it a star!

❤️ Made with love by nickolasrm

timelinebubbles's People

Contributors

nickolasrm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

timelinebubbles's Issues

Toolbar

  • Add primary color option
  • Add accent color option

Design

  • Add title
  • Add favicon
  • Add animations on bubble creation
  • Centralize toolbar in portrait mode
  • Check typography responsiveness

CSS Theming

  • Create a component to configre css variables
  • Calculate foreground color as black and white based on primary color
  • Calculate panel background adding a:
    • luminosity if foreground = white and
    • darkening if foreground = white

File operations

  • Add a new file operation clearing current bubbles
  • Add a save operation to save bubbles data into a json and letting user to download it
  • Add a load operation to restore bubbles data into the app
  • Look at it: https://www.programmersought.com/article/67736782131/
  • Add a image saving operation to save the app screen into an image

deploy on release

  • Create a release branch
  • Add a github actions build for deploying it

Tests

  • Create automated tests for bubble manipulation
  • Create automated tests for comment writing
  • Create automated tests for theming
  • Create automated tests for file operations
  • Add ci

Comment

  • Add vertical line
  • Mix it with bubble
  • Fix font size
  • Add image support
  • Add width adjusting support

Refactoring

Find which components should be refactored.

  • Folder structure
  • Component naming
  • Component structure

Tutorial

  • Add a instructions page containing a tutorial of how to use the app

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.