React Mini Project

Notes

A self-study ReactJS project that implements a kanboard (trello) board.

 Scroll

01

Intro

overview

The course book used to construct this app is called SurviveJS, by Peter Kalivkinky. A Javascript vet takes you through React and shows his method on how to build a kanban app. View Project

  • Role

    Developer

  • Course

    SurviveJS

  • Framework

    ReactJS

A kanboard board allows you to create notes for yourself, or others, and then give you the functionality to categorize those notes. Categories are known as lanes and you’re able to pick up notes and drop them into different lanes.

Brief

Learn the fundamentals of React. I’m not a fan of coding exercises that ask you to write simple functions (recursive, get a number squared, return a string/array with something modified). I’ve noticed that I’ve always learned quickest when coding a program with purpose.

ALT

The store used for this react implementation.

Firebase

the original implementation used primarily local storage as the database to hold notes and lanes. Switched it over to a combination of an online DB and local storage.

02

Insights

Insights

As my first react project, the new jargon and vocabulary proved to be the most challenging aspect. But once that clicks, then it's all blue skies from there.

Component

React components can be thought of as html partial blocks. The entire app is built using your components.

Drag and Drop

React Drag and Drop plugin used. Used to be able to drag notes across lanes.

Lanes

Lanes are held in an array. And each individual lane holds an array of notes. The notes are tracked by their unique ID.

Notes

Notes have an input field that can be adjusted and have a little "priority" dot that can be toggled from: green, yellow, and red. Notes are objects that have a unique ID.

Global Store

Global state containers are my favorite tools to use with React. "Alt" is used in this project. A truly very powerful mechanism that allows you to save variables, properties, data, whatever you want to call it, into a single object accessible throughout the app. This makes it extremely maintanable and easily modifiable.

Firebase

Took advantage of Firebases’s real time database. Took this approach because I was bit worried of using my own database and opening it up to everyone. With Firebase I don’t worry about the security of simultaneous connections.

03

Branding

branding

I stumbled upon a Trello redesign project on Behance that was very beautiful. Well I thought this might be a small opportunity to bring their design to life (at least in a minimal way). But of course I'm'missing a lot of the Trello functionality so it just isn't as complete as the design. But... that'll do pig, that'll do.

Trello-Atlassian-Redesign

Trello Atlassian - Redesign - Netguru Team, Michal Parulski, Serge Soskowiec, Anna Klawikowska

special thanks

  • Inspiration

  • BASIC BB Dakota

  • BASIC Beats by Dre

  • SuperCrowds Agency Website

  • Maria Callas Personal Website

  • Steve Mengin Portfolio Website

  • Samsy Ninja WebGL Website

  • Ben Mingo Creative Website

  • Hands Agency Website

  •  

  • MindCastle Studio Website

  • RESN Agency Website

  • Bruno Quintela WebGL Website

  • Vaalentin WebGL Website

  • Big Horror Athens Studio Website

  • red collar Agency Website

  • Gucci Gift 2017

  • Kuon Yagi Design Website

  •  

  • Yara Lapidus Experience Website

  • Andre Ribeiro Creative Website

  • Reed.be Studio Website

  • Jenny Johannesson Portfolio Website

  • Leviev Group Studio Website

  • Nadine Schneuwly Creative Website

  • Mr Doob ThreeJS

  • Active Theory Studio Website