Skip to content
View gunnar-miklis's full-sized avatar
🙃
🙃
9 followers · 5 following

Achievements

Achievement: Pull Sharkx2

Achievements

Achievement: Pull Sharkx2

Block or report gunnar-miklis

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
gunnar-miklis/README.md

🧑‍💻 TypeScript Web Developer


🚀 What?

With a dedication for user-centered experience, I develop web applications
by bringing together frontend and backend technologies.

🎯 Goal

I'm committed to deliver maintainable and high quality software,
while staying flexible with evolving tech trends.

🤝 How?

I thrive in collaborative environments where I passionately and conscientiously
contribute and strive to exceed expectations.



🙃 About Me

🌱 Loves new challenges, eager to learn.
🧘 Calm and patient individual, easy to get along.
🔍 Attention-to-detail, conscientious and diligent, high quality delivery.

📲 Get in Touch

   Connect



✅ TypeScript, JavaScript (ES6+), Node.js
✅ Web Applications SPA/CSR/SSR (React, Next.js)
✅ RESTful Api (Express)
✅ Databases and ODM/ORM (MongoDB, SQLite, Mongoose, Prisma)
✅ Layout, Design, Typography, Accessibility (HTML, CSS, Lighthouse)
✅ Version Control (Git), Collaboration (CI/CD), Unit Testing
✅ Agile Methodologies (Kanban, Scrum)

Top Langs






Semi-Professional Projects


Playlist Editor (for Spotify) 🎧🎵📲

Playlist Editor (for Spotify) is a simple tool to edit and manage playlists, utilizing the Spotify API. Users can filter, sort, randomize track order and create new playlists. The interface offers a light and a dark theme, and offers responsiveness across devices.

Technologies: TypeScript, Next.js, Next-Auth (OAuth with Auth.js)


View Live Demo 👀


Playlist Editor (for Spotify)

Ticketing App 🎫📲

App for validation of event tickets at the door check-in (scan QR-Code tickets or check-in Box Office tickets).
Intentionally built for offline use, because the current venue has poor internet coverage.
**not public yet, but version 1.0.0 got already tested recently during a music festival.

Technologies: TypeScript, React Native Expo Go, SQLite


Features
App
  • Start Screen
  • App Icon
  • Loading Screen
  • Select an event
  • Light/Dark theme
  • Switch Language (en/de)
  • Show prompts before performing operations
  • Toastbar / Info box
  • Always keep screen awake
Home
  • Fetch and display current event details
  • Stats: total sales
  • Stats: daily checkins
Check-in
  • Qr-code scanner/camera
  • Request phone camera permissions
  • Validate pre-saled tickets
  • Add box office tickets
  • Counter for checkins
  • Camera can turn on flashlight
Ticket
  • Offline/Local storage with SQLite
  • Manually trigger sync process with API (upload, download, update, delete)
  • Upload recent checkins
  • Download new tickets and Update existing tickets
  • Show ticket status (valid, used, payment pending, etc.)
  • Search and filter tickets

App: Select Event App: Start Screen App: Loading Screen
Select Event Start Screen Loading Screen
Home: Switch Language EN/DE Home: Light/Dark Mode Home: Statistics Sales/Checkins
Switch Language Light/Dark Mode Statistics
Checkin Checkin: QR-Code Checkin: Camera Permissions
Checkin QR-Code Camera Permissions
Tickets: Overview, Manage Data Tickets: Search and Filter Tickets: Create or Update
Overview, Manage Data Search and Filter Create or Update





Practice Projects


FILTER COFFEE ☕✨

Filter Coffee is small application lets users filter a dataset of fictional (AI-generated) coffees based on various criteria.


View Live Demo 👀


Learning Goals
  • Get familiar with advance filtering techniques, handle multiple filters effectively and update the URL (search params).
  • React: Enhance my knowledge (complex state management, custom hooks, separation of concerns, MVVM).
  • TypeScript: Handle more complex types.
  • CSS conventions: Learn an follow BEM methodology for clean and reusable styles.
Features
  • Dynamically Multiple Filtering: Use multiple filters to filter a dataset by different categories.
  • Filter Status Managment: See which filters are "available" and which are currently "active".
  • Interactive Filter Selection: Click to move filters between "available" and "active" lists.
  • Adaptive Remaining Filters: Available filters show only those options that the user can still choose from.
  • URL Sync: Active filters are reflected in the browser URL. Simply share the current filter combination, or paste a URL to revisit a specific set of filters.
  • Reset Filters: Clear all active filters and reset the URL to start over.
Technologies
  • TypeScript
  • React
  • Vite

Multi Filter Tablet


Task / Todo / Notes App 📝📲

Develop a fully functional RESTful API Full-Stack Web Application using JavaScript, Node.js, React, Express, MongoDB (in less than 48-hours).


View Live Demo 👀

home all-todolists one-todolist one-todolist-delete-confirmation one-todo


Re-create frontend components

Layout and Design Frontend Components using: HTML, CSS, React, React Native, Bootstrap, Material Ui, JavaScript, DOM Manipulation, JSON, etc.

summary-component-pc summary-component-phone web-platform web-platform-form web-platform-stepper tip-calculator-pc tip-calculator-phone qr-code-scanner-2 qr-code-scanner-1
4. Summary Component using React + CSS. 5. Web Platform using React + MUi.
View Live Demo 👀 		6. Tip Calculator App using React + MUi.
View Live Demo 👀 		7. QR-Code Ticket Scanner App using React Native.





Educational Projects


Projects I developed during my qualification as full-stack web developer


10.

Integrate a relational SQL Database and an OAuth Authentication in Next.js Full-Stack SSR/CSR Application. TypeScript, Next.js, Prisma ORM, Vercel PostgreSQL, Next-auth / Auth.js.

View Live Demo 👀
3.

MERN Full-Stack SPA Web Application and Cross-Cohort Collaboration: Data Analytics → UX/UI Design → Web Development. MongoDB, Express.js, React.js, Node.js, Axios, Chart.js, JWT Auth, REST.

View Live Demo 👀
2.

Collaborative Development (CI) of a Web Application . Introduction to Backend Technologies and collaborative Version Control. Node.js, Express.js, MongoDB, Mongoose, Handlebars.js, Git, GitHub, Session Auth, CRUD.

View Live Demo 👀
1.

Develop a Browser Game using Frontend Technologies. Learn to use basic concepts. JavaScript, HTML, CSS, Canvas, P5.js, DOM, OOP, DRY, KISS, YAGNI, Linting.

View Live Demo 👀










TypeScript JavaScript HTML5 CSS3

React MongoDB Express.js Node.js

NextJS Prisma PostgreSQL MySQL

Material UI Chart.js Git Jest Bash Linux
Nginx Raspberry Pi R LaTeX PHP


Profile Details
Repos per Language Most Commit Language
GitHub Stats GitHub Productive Time




</> with ♡

Pinned Loading

  1. coding-challenges coding-challenges Public

    Practice. Learn. Improve.

    JavaScript

  2. frontend-challenges frontend-challenges Public

    Practice. Learn. Improve.

    JavaScript

  3. learn-typescript learn-typescript Public

    Practice. Learn. Improve.

    TypeScript

  4. learn-sqlite learn-sqlite Public

    Practice. Learn. Improve.

    TypeScript

  5. learn-testing learn-testing Public

    Practice. Learn. Improve. (Intro into: Testing, DevOps, CI/CD. Unit-, Integration- and End-to-End Tests)

    JavaScript

  6. portfolio portfolio Public

    Discover a user-centric approach and explore a blend of frontend and backend skills coupled with a unique personality. Expertise in TypeScript, Node.js, Next.js, React, and more. Emphasizing high s…

    TypeScript