dlmedeiro/code-playground

Collection of web applications

Welcome to the CodePlayground

It's messy, it's fun, It's how I learn

View at: https://pink-jellyfish.surge.sh

Learnings

To update the deployment with any changes (Run in Bash):

• Run: ```npm run build``
• Navigate into the build folder
• Run: surge
• Press enter when prompted with the correct project folder
• Enter the current domain pink-jellyfish.surge.sh and press enter

Contents

War Card Game

Description Two-player card game 'War' built to closely replicate game play through a website format. Application allows two users to play against one another on a single device, or against a computer. Technologies Backend API: Node JS, Express, PostgreSQL. Frontend: React, Redux, Bootstrap, CSS.

View Site

View Source Code

Lights Out

Description A logic/puzzle game, played on a gird of individual lights, which can either be lit or unlit. The puzzle is won when when all of the lights are turned off. Technologies React, JavaScript, CSS, HTML

View Site

View Source Code

Connect Four

Description Two players alternate turns dropping a tile down a column until a player gets four-in-a-row (horiz, vert, or diag) or until board fills resulting in a tie. Technologies JavaScript, CSS, HTML

View Site

View Source Code

Memory Match

Description Players are shown a collection of cards, face down, and can click on two cards at a time to reveal what’s underneath. The goal of the game is to match up all the pairs. Technologies JavaScript, CSS, HTML

View Site

View Source Code

Magic Eight Ball

Description Simulation of the classic Magic Eight Ball. Technologies React, JavaScript, CSS, HTML

View Site

View Source Code

Deck of Cards

Description Application that displays a deck of cards, one card at a time. Utilizes the Deck of Cards API for the creation of a full deck of cards. This project practices the use of useState and UseEffect. Technologies React, JavaScript, CSS, HTML

View Site

View Source Code

Action Tracker

Description This application focuses on DOM manipulation and the utilization of local storage to track and save user 'todos'. Technologies JavaScript, CSS, HTML

View Site

View Source Code

Application Notes

To run locally: npm start To update project using Surge, run surge in the project directory and input the same domain already being used as the domain.

Learnings

Deployment of frontend with surge

npm run build cd build cp index.html 200.html surge

Running list of enhancement and notes

• User gets logged out when redirected to home page
• Create a dummy login / account
• optimize login / logout for navigation
• Testing
  • Tests to incorporate: what happens when you log in, how long, what do you see if there is an error
• Profile view and editing capabilities
• Additional Game animation
• Further updates to responsiveness / Formatting updates
• Additional Game stats
• Front-end Component Structure