Company Directory is a mobile-first contacts for managing a registry of employees. Main focus was put on responsivenes and clear design which would allow the user to quckly locate necessary information.
Key functionalities include displaying details, filtering, sorting, updating and deleting entries. Each action sends an Ajaxrequest to PHP server which performs CRUD operation on MariaDB database. Navigation between sections uses Bootstrap tabs.
Gazetteer is a mobile-first educational app focusing on geography and providing various details regarding chosen country. The app predominantly uses live information fetched from various APIs ranging from geographical coordinates and statistical data to current news and photos.
Upon checking location or choosing country (dropdown menu or click on the map) the app makes a jQuery AJAX request to PHP coded backend, then iteratively renders received data in aesthetcialy pleasing and clear manner. If geolocation is not supported the user receives a subtle notification with additional information which can be easily dismissed
The map is plotted using geoJSON data and Leaflet JS library with supporting npm packages. Combination of Easybuttons and markers allows to toggle necessary information on the map and marker clusters clears up the high-level view
Responsiveness and additional styling is achieveed by newest Bootstrap 5 library with some custom css.
Demo Account:
login: mail@mail.com
password: 12345678
Home Repository is an e-commerce full-stack PERN app for a household items online shop and is my most complex project so far. It includes front-end React App and Node/Express JS Server with Postgres Database and user login.
State in the app is managed by Redux store with asynchoronous actions dispatched to API endpoints using Async Thunks. Server routes manage queries to SQL database creating, returning, updating and deleting entries. User authentication is done with the use of Express Sessions and Passport JS.
I have added interactivity using various react packages to provide pop up success and error messages as well as zoom in feature for images. It was challenging at times but really helped me grasp and solidify my skills especially regarding the concepts of user authentication and deploying full-stack app and how the front-end and the back-end tie together. As registration does not require email verification please feel free create an account to see the full functionality of the app.
Jamming app allows you to search through songs, add, remove and create new playlist which are added to your Spotify account in real time.
App's frontend is build with React with data being managed in a Redux store and fetched from API using Async Thunks. The app also utilizes Spotify OAuth with implicit grant flow
Due to recent changes in spotify Web API policy, the email address associated with the account would need to be added to the application whitelist in order to use the app features. While I am happy to do so on requests, I also attached a short video presenting app’s main features.
25 Reddits a day is a reddit client which displays 25 most recent reddit posts either in chosen category or keyword search. The idea behind the project was to allow visitors to procrastinate a little while making sure they won’t spend too much time going “down the rabbit hole” of endless posts.
The website also supports images and videos provided by Reddit API (although in line with reddit limitations no audio available) and when reddit is a forum discussion, a link is provided. The user can also view and read comments displayed in a responsive container.
The website also fully adapts to mobile devices. The app uses React and Redux with associated libraries and asynchronous requests to Reddit API. I hope the app will help you to waste (a little) time...
Hackbridge Art Centre was the first project created by me in its entirety from the initial idea through the design writing code to deployment with no guidance. Although quite simple it has given me some confidence in researching, trying and using coding elements on my own. The color scheme consistent through the website relates to the banner which is the focal point for the whole website. This website is also fully compatible with mobile devices through the use of flexbox.
Intelligence Construction is a plain HTML and CSS website presenting an people and services of a construction company. Main focus here was on creating a clear and responsive website with at glance overview of basic information. The website is fully adaptable to mobile devices and makes use of external features like google maps iframes.