Advanced 'TODO' application
TS/React/Firebase/RestAPI ToDo application
Technologies used
What was implemented
Advanced TODO application written on TypeScript. Fetching 10 users from RestAPI (JSON Placeholder) with images by ID of each user. When user is opened, Todo's are fetched from JSON Placeholder and also from firebase.Todos from firebase can be deleted and edited. Visitor can also create a new todo, which will be saved to firebase by users ID. Website deployed on firebase. Axios is responsible for requests and Material UI for Components UI. Application actively working with link's parameters from React-router-dom
Skill Set
- ES6 syntax
- React: Hooks, React-Router-Dom
- Requests to RestAPI
- TypeScript
- Using vendor library for UI
Libraries and frameworks
- react-router-dom
- Firebase
- Material UI
- axios
TypeScript Drag and Drop
TS w/ Vanilla JS
Technologies used
What was implemented
Was developed by: TypeScript course from Maximilian Schwarzmüller. Simple drag and drop application created on TypeScript and based on Class constructor. Base idea resemling React core features. User can create new project and drag and drop it with mouse between two boxes. In developments was used concepts like: Decorators, Generics, Typeguard, Advanced Types and typescript's class syntax.
Skill Set
- ES6+ syntax
- TypeScript (Typeguard, Advanced types, Generics, Class Syntax, Decoratos)
- Webpack
Libraries and frameworks
- webpack
React Burger Builder
React complex legacy application with Class Containers
Technologies used
What was implemented
Was developed by: React course from Maximilian Schwarzmüller. Application built on class containers which considered legacy approach. Lets user create customly composed 'burger' and then checkout with simple form. Uses react-router-dom's link parameters to access composition of created burger. Axios creating each instance in firebase Db. Main point is to show skills with legacy lifecycle methods and clear and clean approach for creating small pieces of UI (each with own folder and css.module file).
Skill Set
- React Class Components
- react-routed-dom API
- requests to RestAPI Db (Firebase)
- ES6+ syntax
Libraries and frameworks
- react
- react-router-dom
- axios
'TODO' application
React/Firebase ToDo application
Technologies used
What was implemented
Fully functional ToDo application with authentication system, which capable of signup, restore password via email, and update user profile. Authentication and storage was created on Firebase. Firebase functionality was used through useContext hook. Application was built solely on functional component with hooks. UI made with React-Bootstrap. In development also was used Higher Order Component concept and React-router-dom.
Skill Set
- ES6 syntax
- React: Hooks, HOC's, React-Router-Dom, Context
Libraries and frameworks
- react-router-dom
- Firebase
- React-Bootstrap
Superdrone
Drone shop layout from PSD template
Technologies used
What was implemented
This project's layout has been built by PSD template (Not mine). There is a few animated elements and custom video player (>992px). Design of player it self left a lot to be desired, but it wasn't crucial goal in this particular case. Play button on each video is surrounded by <svg> circles, animated by HTML5 <animate> tag. Layout is cross browser compatible and responsive to resolution. Images are responsive by HTML5 <img> attributes. Two sections using different sliders, both had arrows and switch dots. In one section items has been fetched from JSON file. Vast majority of layout working on Bootstrap grid classes. Smaller container aligned with CSS's Flexbox technology.
Skill Set
- Vanilla JS
- SVG/animation
- CSS animations
- Mobile First
- Adaptive layout(CSS), images(HTML5)
- Crossbrowser layout
- HTMLMediaElement API
- Fetching from JSON file
- Bootstrap: Grid, Slider
- BEM
Libraries
- Bootstrap 4.5
- SlickSlider
Taicco's
Taicco's restaurant layout & order system
Technologies used
What was implemented
Layout design was inspired by image from Pinterest. Main accent was on order system to show my skills in handling objects, strings and arrays. Content filling starts by creating suitable elements, classes and functionality if needed, continues with adding text content by async/await function which fetching data from JSON file, and finished by appending to container. Order system based on LocalStorage API. Each added item id appends to LocalStorage string property called order, plus and minus button allows user to pick specific amount which appends to id. In "Order" page, function filtering and transforming string to object and appending items to container with quantity and some information. Order page allows user to change amount, delete item or delete everything at once, LocalStorage.order updating accordingly at the same time.
Skill Set
- Vanilla JS (Strings, Objects, Array) methods
- CSS animations
- Mobile First
- Adaptive layout(CSS)
- Crossbrowser layout
- LocalStorage API
- Fetching from JSON file
- Bootstrap: Grid
- Vendor JS/CSS libraries
Libraries used
- Bootstrap 4.5 (Only Grid)
- WOW.js
- Animate CSS