MaximShly

Frontend-Application

Frontend Bad Bank Application

Full-Stack-Banking-App

Full stack banking app, see it live at Maxim-ShlyaptsevFullStackBankingApplication.com

Adding-React-Templates

This project demonstrates how to add a simple react component and install into html and jsx

Authenticate-Express-Routes

This program handles user authentication for a web app using Firebase. When a user isn't logged in, the system prompts them to enter credentials. Once logged in, it provides user data, including email and other meta-info. The program fetches data from a local server endpoint (localhost:3000/open) and retrieves an ID token.

Bootstrap-NavBar

Here I demonstrate a simple navbar with routing made with Bootstrap

Build-a-Formik-Form-Starter

Here I establish everything required to host a local web server that demonstrates basic functionality of Formik and Yup validation schemas, with screenshots of how it appears to operate on your local machine.

Express-routes-with-JSON-web-tokens

This program demonstrates express routes that require JWT authentication as 'admin' level in order to remove books from the book.js file, a simple demo of how member/admin login could be differentiated on a web app.

Express-Server-Setup

Here I set up a basic Express server and modified the port to 9600 and added some data text to display when going to localhost:9600/data

Firebase-Authentication-using-Google

The program authenticates users via Firebase, allowing email/password & Google login. To integrate, I used Webpack, imported Firebase modules in login.js, & ensured HTML referenced bundled JS. Errors like missing index.js & dynamic import issues were addressed by adjusting Webpack configurations.

Full-Stack-Holy-Grail-Application

In this project, I set up a backend using Express.js and connected it to a Redis database via Docker. The backend provides endpoints to initialize and retrieve data (layout sections) and update specific key-value pairs. On the frontend, accessing the /data route fetches and displays the layout data from Redis.

GraphQL-playground

Here I demonstrate a build schema that allows for a query to GraphQL to access the data inside the index.js file as well as the object data contents.

GraphQL-Restaurant-Query-mutations

Here I complete a program to take queries through GraphQL to show specific data as well as manipulate/delete.

Managed-and-Unmanaged-Forms

This React app features a form with a name field. As a user types into the field, the input is stored in state and displayed below the form. Upon submitting, an alert displays the entered name. The form uses React's useState and onChange to manage and update state.

Manipulate-Backend-Form-Data

Here I implement a deleteall endpoint using superagent.

Map-Animation

The JavaScript code creates an animated marker on a Mapbox map, which moves through a series of predetermined coordinates (representing bus stops between MIT and Harvard) every second, visualizing a bus route.

MaximShly.github.io

Mounting-and-Unmounting

This React app is a game where each square on the board can be marked by a player. Once a square is clicked, it gets unmounted and won't reappear unless the page is refreshed.

OnClick-Elements

Here I demonstrate OnClick listeners and have them respond to when the user clicks on certain buttons. These can be modified to do many things.

Parent-and-Child-Rerender

This React program allows two players to take turns changing the color of squares in a Tic-Tac-Toe grid. Player state is managed in the parent "Board" component and colors in the "Square" child component.

React-ATM

This React application simulates an ATM where users can select a transaction mode ("Deposit" or "Cash Back"), enter an amount, and submit the transaction. It prevents withdrawals exceeding the current balance by disabling the submit button.

React-Pagination

This React app fetches data from the Hacker News API, specifically articles about MIT. It uses Axios to handle the API requests, and shows a paginated list of articles using Bootstrap styles. When data is loading, it displays a loading message.

React-Shopping-Cart

This React application displays a list of products in stock. Each item has a button that, when clicked, moves the item from the stock to a shopping cart. It handles stock updates and maintains the cart state.

Refactoring-a-Unit-Test

Here I install node and refactor the unit test from checking for 'Learn React' to 'Learn More React' just to show how easy it is to edit unit tests

Same-Page-Routing

This program demonstrates simple same page routing, which is a trick to prevent unnecessary loading times from interacting with the website, creating a smooth, seamless experience.

Setting-up-a-Basic-LowDB-Database

Here I set up a basic LowDB database that features a few .get and .push orders in the database.js

Shopping-Cart

This is a simple program that connects front end with back end (via Strapi DB) to render a shopping cart of items that can be restocked from the database.

Task-Tracker-Styling

This program is a task tracker where users can add tasks to a list. Tasks are clickable and are removed when clicked. It's styled with CSS, featuring a light grey background, and tasks are styled individually. The input field for new tasks also has interactive styles.

Testing-a-MERN-app-with-Puppeteer

This program uses Puppeteer to automate a web browser, navigate to a specified URL, click "Create User" button, wait 2 seconds for details to appear, and then captures and saves a screenshot of the page to show the results.

Unit-Testing-with-Jest

Here I implement 5 different unit tests to check the dragon.js file.

Web-to-React-Component-Conversion

This program fetches movie data from a JSON file and renders a list of movie cards using React. Each card displays the movie title, showtime, screen, row, seat, and an image from a URL.