My Projects
Minesweeper game
The good old game, remastered with new features, using vanilla js. HTML & CSS. The main logic of the game is achieved by using two-dimensional arrays, loops in various levels of complexity, DOM manipulation & rendering, and also a bit of recursion. All in pure ES6 Js in a clean, readable code.
Restaurant order app
A React app to order different meals, fetched from Google FireBase Back-End. This is a cool demo app for takeaway orders, fetching and storing both site data, and user-order details to google firebase. This pure React project features a variety of React hooks (useContext, useEffect, useState, useRef, useCallback and useReducer), and also some custom hooks to manage user and payment details, and HTTP requests, including error handling. Styling is with CSS modules.
Memer
A Meme-generator app to create your own mems to break the internet. using vanilla modern js, HTML, and CSS. This app is based on the HTML <canvas> element that allows drawing graphics via scripting. Built with MVC architecture, the app uses pure ES6+ Js logic, and quite a bit of HTML injection and rendering, to let you search for preferred photos, create new memes and download your work or share it directly to Facebook.
Pirates gambling game
Gamble against your friend on a high-risk dice game! Achieve the highest-total score on dice rolling before your opponent- while the game rules are designed to bring you down*. This game is an excellent example of how simple Js, HTML & CSS can be used to create a good-looking & addicting game. The logic is pure ES6+ JavaScript and basic DOM manipulation, styled with CSS. * roll 1 and you lose your turn, roll two 6's in a row and you'll lose your entire score.
Shopping List
A small React-Typescript project, featuring several hooks such as useContext, useState and useRef, and Typescript class model. styled with CSS modules.
Quotes app
A React app using React-Router-DOM and custom hook. This project uses the third-party library, React-Router-Dom, to create a React app with file-based, dynamic routing- meaning routing that takes place as the app is rendered and enables the navigation among views of various components in the application, allows changing the browser URL, and keeps the UI in sync with the URL. other than this library and its new features (such as the useLocation and useHistory hooks, that help with progremmatic navigation), this app uses quite a few standard React features like the hooks useState, useRef, useEffect, and useCallback, plus a custom hook to handle HTTP requests in order to fetch all the stored quotes and comments from google firebase back-end, and for adding new ones.
Expense tracker
A React app to keep track of your ongoing expenses over time. This little demo project utilize pure React features such useState hook and functional components.
Speed-Click
Fun little game to test your instincts and visual perception. Although looking like a matrix, the game logic is achieved with a normal (one-dimension) array, using Js methods to manipulate it and to render it as a game board for the user. This game is built only by ES6+ Js, HTML and CSS.
Meetups app
NEXT.js demo app for social meetups, featuring both SSG & ISR, by integrating Google Map API and server-side code (node.js) to get & post data from/to MongoDB. Next.js (React Fullstack framework) renders the meetups data from MongoDB on the server at build-time, (and not in the client's browser) and uses Incremental Static Regeneration to revalidate the data every X time, which, in a nutshell, is great both for SEO's and for performance without compromising on UX. in this project I use both standard-React hooks, such as useEffect, useState, and useRef, as well as Next.js hooks such as useRouter, and other key Next features.
Redux shopping cart
A small demo project using Redux (and Redux-Toolkit) for global state management, using Redux features such as useSelector, useDispatch, and custom Thunks, for managing the cart state and storing the state in google firebase.
This website
This very website you're on right now! I've built this website especially for you, so you could get a better glimpse at my development skills and capabilities. I used NEXT.js, as I find it the most complete full-stack framework- combining frontend with backend under one comprehensive roof, with all the benefits of React ecosystem. This portfolio website uses many core features of React and NEXT.js, written in clean & DRY ES6 js, and styled by CSS modules. Some of the features you'll see if you explore the code (which I highly encourage you to do), are React hooks (useState, UseEffect, and useRef), React-Portal, NEXT.js useRouter hook, and various NEXT components. for the Contact-form, which I also encourage you to use ;) , I chose to experiment with the third-party package: React-Form-Hook, which I find quite awesome..! and I integrated it with SendGrid by twilio. All the data you see on this website is fetched from MongoDB by Node.js, and prerendered by NEXT.js SSG feature.