Maxim Shlyaptsev's repositories
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.
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.