‘SickSims’
A game promoting awareness and safety to improve our unfortunate reality of COVID-19.
See My Code on GitHub or
Demo Video
Included
React
for a highly interactive user interface through a declarative, stateful, modular and efficient framework
Redux
for optimum state management in a global store with async actions to send data to and receive data from the server
Thunk
to handle redux logic separately for organization, while allowing actions with dispatch for promises
Props & State
for dynamic and reusable components conforming to immutability principles for React’s enhanced virtual DOM content re-rendering
Hooks
for simplicity, modularity and higher performance with lifecycle methods and stateful logic
Virtual DOM
with advanced reconciliation through React’s diffing algorithm for fast and efficient content rendering
Lifecycle Methods
across creation, updating and deletion to delineate methods for optimum application performance
Client-Side Routing
for the user to experience an even faster application speed than from server-side routing
ES6
including arrow functions, destructuring, promises and spread operators
Controlled Forms
to more easily manipulate and restrict the display of user input through state
Actions
wrapped in functions to handle various payload properties for the reducer
NPM Plugins / Packages
for added functionality and effects including game sounds and animations
Single Page Application
to send and receive data quickly for an optimum user experience
HTML, CSS, JSX Frontend
to create the document, to style the content and to provide interactivity with integrated remote servers
Ruby on Rails API Backend
to fetch data from a server for application to use
Object Orientation
with classes to organize code into reusable pieces that are more easy to read, understand, change and maintain
JSON
to translate backend data into JavaScript model objects using ES6 class and constructor function syntax
Async React & AJAX
to link DOM manipulation with event requests asynchronously from fetch and JSON
Event Handlers
to detect user events that trigger the execution of the event handler’s work in callback functions
DOM Manipulation
to use a system (model) that changes any thing (object) on a web page (document)
Serialized Data Structures
to optimize the organization from the rendered API backend JSON strings for frontend DOM manipulation and asynchronous requests
Destructuring
for more clarity around object data assignment, extraction and manipulation
Functions & Methods
to perform actions on objects and to group together related bits of code with abstraction
Hoisting
to appropriately declare functions at the tope of their scope while declaring variables with const and let
Scope
to maintain conventional execution context with declared variables and methods only being available where needed
Variables
to initialize, retrieve and change data
Arrow Functions
for simpler code with implicit returns and binding of execution context in class instances of object oriented programming
Responsive Design
to adjust to the size of a browser at any point vs. adjusting at specific breakpoints
PostgreSQL
for a relational production-grade datastore off of memory (e.g. SQLite), compliant with an ephemeral filesystem (e.g. Heroku)
Semantic HTML
to structure and grow the application more intuitively with added meaning, rather than simply having the html define the website's or application's presentation/look
CSS
to style html using css grid, the basic Box Model (Content, Padding, Border, Margin), fonts, colors, etc.
Rails Backend Framework
to enable me to focus on the hard bits and to decrease repetitive work
CRUD with Fetch
to create, read, update and destroy data by convention
Associations & Join Tables
to define data relationships across database tables amid join tables with foreign keys
Validations
to ensure data is not bad by validating models before they even touch the database
Strong Parameters
to protect data from undesired user assignment on model attributes
ActiveRecord
for an object relational mapper to enable the application to manage data in a method driven structure
MVC
with Model-View-Controller convention for separation of concerns: logic for the application in the model files, managing the code flow in the controllers, and displaying content to the user in the views
REST
to standardize URL structure of the web app, for convention over configuration
Forms
to accept user data for user interaction with built-in associated validations to protect the data