React Playground
React is a Javascript library for building user interfaces. Learning engineering has become essential as a designer, and the growing complexity of design systems and their implementation makes React JS the right language to solve the problem. React playground is an archive of my engineering journey, documenting each little step forward.
Burger Builder
Burger builder is a single page React application that lets you build the perfect burger. I spent the better part of 2019 going through Maximilian’s React Course and I learned several key React concepts. At the end of my journey I built a fully responsive application that allows you to sign in, build a burger and save your order.
Key Lessons: Single-page App, Redux, Forms and Validation, Authentication, Testing, Higher-order Functions, Firebase and Node.js
Mini-React Projects
After completing my first large-scale React app. I wanted to dive deeper into key React concepts and really feel like I have a solid foundation moving forward. So instead of building another large scale application I decided to focus my target on smaller bite-sized projects.
Key Lessons: Forms, CSS Animations, CSS Grid, Flexbox, Component Lifecycles, API, State Management
Built a simple counter, and worked focused on sharpening my CSS animations to make a fun and reward experience on with each click. It was a great opportunity to build an experience on another designer’s design and bring it to life.(Click the title to try it out)
Simple Clock built with pure javascript and CSS, no web dependencies, once again putting my CSS3 animation skills to test.(Click the title to try it out)
Forms are a key aspect of all web experiences and one concept that I know I need nailed down. In this light-weight form I added input validation, handling events onSubmit and updating a user-card in real time. Got more comfortable with setState, and State Management and the importance of introducing Redux into my workflow.(Click the title to try it out)
Finally one key aspect of React that I struggled with in the larger React app is getting a handle on APIs. So I took this opportunity to work with the Giphy API and build a simple search engine that allows you to search their entire gif library. Got a lot more exposure to CSS grid here especially building a responsive web page.(Click the title to try it out)
React + Material-UI
One aspect of the development process I wanted a bit more experience with was working with UI frameworks. The main reason being they offer a lot of customization options while ensuring strong cross-browser. One of the more popular React UI frameworks right now is Material-UI and I decided to dive in and build a mini exercise app and see how far I could just working with the framework alone.
The most valuable lesson from this project is becoming adept at deciphering documentation, which is an indispensable skill considering all node packages there are available from the React community.
Key-Lessons: Material-UI Components, Dark UI Theme, Context-API, CRUD, Destructuring Assignment
ChatMe
One concept that I keep coming back to is state management and how to do it efficiently in React. The state management favorite in the React Community is Redux which comes with a lot of useful High-order Functions and Middlewares hence the popularity, but in order to understand it on a ground level, I focused my attention on pure Redux and built a simple chat app from scratch. ChatMe features include editing messages, deleting messages and sending messages to multiple contacts.
The most valuable lesson from this project was building my understanding around combineReducers. Instead of have a huge state object, I can focus on the chunks specific to a component and combineReducers brings it all together in the end.
Key Lessons: Redux, combineReducers, node packages(txtgen, faker, lodash)