Coder Social home page Coder Social logo

thelastairsicklowlander / mischiefmanaged Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 71 KB

This is a project that I am doing most for the purpose of learning who React & Redux works. This is trying to learn the basic concepts and work flow in the project.

HTML 1.12% CSS 9.67% JavaScript 89.21%

mischiefmanaged's Introduction

Mischief Managed

Description

This app will be a collection of all of the adventures I have had. The purpose of this app is to show the locations I have been. Each adventure will be set in a time and a place.

The Design

This app will be based upon the idea of a stream. Since life is a stream of events so will be my adventures, which in action will be called mischiefs. This will concentrate in a few core ideas.

  1. All Mischiefs will flow from the latest to the earliest
  2. They will be situated on a timeline that is in the center of the screen.
    • The time line will have notations of of the years
    • i.e. 2016, 2015, 2014, etc.
  3. if the screen is large enough the Mischiefs will be alternating
    • if the screen is to small the time line will be on the right with the mischiefs on the left pointing to the line
    • this design is inspired by the new stack over flow portfolio look, I am wanting to do something simliar in react

The Road Map

This project is essentially for me to learn the core design principles of the react language having it integrate into a controlled server that is pulling data dynamically and quickly. I believe This will be broken down into some rought stages.

1. Get it running

  • Get all the pictures uploaded to the a 3rd party hosting with static links
  • Generate the data for the trip locations as well as
    • this will be stored in a json file on the server. This wil not be a dynamically updated in a database
  • have a basic list view of all the Mischiefs in the order they have happened.
  • upon selecting a mischief you navigate to a new view where you view all this pictures in the order that they happened
  • add a future view to manage new and upcoming trips
  • Push to live

2. Design the time line & dynamic backend data

  • have the design modify to how the mischiefs are displayed when you resize the window
  • take all the data and append it into a database struct that fits the best for this situation
  • add a dynamic login to the future page that allows for the editing of the said events

3. Polish

  • Add transitions to all pages to make the seem smoothly generated

mischiefmanaged's People

Contributors

thelastairsicklowlander avatar

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.