Nikola Ivanović
Home
Projects
Contact
Nikola Ivanovic\'s profile picture

πŸ‘‹ Hello World!

I am Nikola, a Full-Stack Software Engineer from Serbia.
I am experienced JavaScript/Node.js developer but also I have some experience with Java, Python and PHP.

Skills

React.js icon

React.js

Vue.js icon

Vue.js

Angular icon

Angular

Node.js icon

Node.js

Express.js icon

Express.js

Nest.js icon

Nest.js

PostgreSQL icon

PostgreSQL

MongoDB icon

MongoDB

TypeScript icon

TypeScript

GraphQL icon

GraphQL

Tailwind icon

Tailwind

Docker icon

Docker

PWA Hiking Competition App used on Regional Hiking Action - Scan QR Codes on trail and get badges and points with realtime data, notifications and offline mode sync

PWA Hiking Competition App used on Regional Hiking Action - Scan QR Codes on trail and get badges and points with realtime data, notifications and offline mode sync

PWA Hiking Competition App that was used on official regional hiking action organized by the local hiking club that is part of Mountaineering Associat...

Next.js icon
React.js icon
Supabase icon
shadcn/ui icon
TypeScript icon
Tailwind icon
Vercel icon
PWA icon
Demo Coming Soon
PWA Hiking Competition App used on Regional Hiking Action - Scan QR Codes on trail and get badges and points with realtime data, notifications and offline mode sync

PWA Hiking Competition App used on Regional Hiking Action - Scan QR Codes on trail and get badges and points with realtime data, notifications and offline mode sync

PWA Hiking Competition App that was used on official regional hiking action organized by the local hiking club that is part of Mountaineering Association of Serbia. After user is authetnicated, user can pick up their team, and they can collect badges and get points in the name of that team. Multiple users can represent one team. User can scan code on trail or enter code manually. After badge is collected, other users will be notified that the other team collected badge, how many points they scored and also they will be notified if leaderboard changed and if other team moved to different place (they will get gold/silver/bronze toast message based on the place they took, or purple one for other places). Also they will get notification if theier team scored. The leaderboard is updating in real-time, and also if app is minimized and other app used on phone more then 5 seconds, when user gets back this is detected and new data is fetched, so that data is always fresh. Also there is refresh button that refreshes all data with cooldown of 30 seonds. Also there is possibility of using the app offline. User needs to refresh the page so all the resources are cached, and the data is saved locally. Also when user turns off mobile data, app detects this and shows indicator that the user is in offline mode, and when user collects the badge in badges section, next to collected badge there is offline indicator that the badge is collected offline. After user gets back online the data is synced and updated. If multiple users collected same badge offline (online this is not possible, because after one team member collects the badge, that badge is unavaible for scanning), the data is synced and updated with best time of collecting the bage (earliest). So if one user collects badge 2 minutes after first user, and is first to go online, that is the timestamp that is going to be saved in the DB, but after other user gets online, the time of collected badge is checked and if this user's time is better then the timestapt in the DB, then its updated with that timestamp. Every badge have specific points and rarity. The calculation and determination of winner and what place the team will take is based on points and the time the badges are collected. There are totally 12 badges and 434 points. There is dark mode and also there is details (trail-info) page about that trail, with description, Wikipedia text, images and stats (height, duration, length, type, difficulty and elevation).

Technologies Used:

Next.js iconNext.js
React.js iconReact.js
Supabase iconSupabase
shadcn/ui iconshadcn/ui
TypeScript iconTypeScript
Tailwind iconTailwind
Vercel iconVercel
PWA iconPWA
Demo Coming Soon
National Hiking Day in Serbia Event Page

National Hiking Day in Serbia Event Page

This project is a website for National Hiking Day in Serbia, organized by the Mountaineering Association of Serbia together with a local hiking club....

Next.js icon
React.js icon
shadcn/ui icon
TypeScript icon
Tailwind icon
Netlify icon
National Hiking Day in Serbia Event Page

National Hiking Day in Serbia Event Page

This project is a website for National Hiking Day in Serbia, organized by the Mountaineering Association of Serbia together with a local hiking club. The site provides visitors with a complete overview of the event and the broader value of hiking, featuring an about section on National Hiking Day, detailed information about the prepared trail with a Komoot-recorded route, and practical preparation and safety tips. It also includes galleries with photos from past events and images captured along the trail, offering participants a visual preview of the experience.

Technologies Used:

Next.js iconNext.js
React.js iconReact.js
shadcn/ui iconshadcn/ui
TypeScript iconTypeScript
Tailwind iconTailwind
Netlify iconNetlify
πŸ§‘β€πŸ³ RecipesAI made with Next.js, AI SDK, Tanstack Query, Clerk, Neon, Prisma, TypeScript, shadcn/ui and with PWA support

πŸ§‘β€πŸ³ RecipesAI made with Next.js, AI SDK, Tanstack Query, Clerk, Neon, Prisma, TypeScript, shadcn/ui and with PWA support

Authenticated user can generate 4 recipes based on the inputed ingrediants. Newly generated recipes can be viewed and added to multiple collections (d...

Next.js icon
React.js icon
AI SDK icon
Tanstack Query icon
Clerk icon
Neon icon
Prisma icon
shadcn/ui icon
Zustand icon
Zod icon
TypeScript icon
Tailwind icon
Vercel icon
PWA icon
πŸ§‘β€πŸ³ RecipesAI made with Next.js, AI SDK, Tanstack Query, Clerk, Neon, Prisma, TypeScript, shadcn/ui and with PWA support

πŸ§‘β€πŸ³ RecipesAI made with Next.js, AI SDK, Tanstack Query, Clerk, Neon, Prisma, TypeScript, shadcn/ui and with PWA support

Authenticated user can generate 4 recipes based on the inputed ingrediants. Newly generated recipes can be viewed and added to multiple collections (default 'Favourites' and newly created ones). User can search and sort through collections and recipes with paginated results. If recipe is unsaved from collection and it is not part of other collections then it is deleted, also when collection is deleted all recipes from that collection that are not part of other collections are deleted.

Technologies Used:

Next.js iconNext.js
React.js iconReact.js
AI SDK iconAI SDK
Tanstack Query iconTanstack Query
Clerk iconClerk
Neon iconNeon
Prisma iconPrisma
shadcn/ui iconshadcn/ui
Zustand iconZustand
Zod iconZod
TypeScript iconTypeScript
Tailwind iconTailwind
Vercel iconVercel
PWA iconPWA
🏑 Property rentals made with Next.js, shadcn/ui, Cloudinary, Prisma, Neon and Clerk

🏑 Property rentals made with Next.js, shadcn/ui, Cloudinary, Prisma, Neon and Clerk

Unauthenticated users can filter, sort and search through all listings and view users data and listing's details. Authenticated users can add, edit, d...

Next.js icon
React.js icon
Clerk icon
Cloudinary icon
Neon icon
Prisma icon
shadcn/ui icon
Tailwind icon
TypeScript icon
React Hook Form icon
Zod icon
Zustand icon
🏑 Property rentals made with Next.js, shadcn/ui, Cloudinary, Prisma, Neon and Clerk

🏑 Property rentals made with Next.js, shadcn/ui, Cloudinary, Prisma, Neon and Clerk

Unauthenticated users can filter, sort and search through all listings and view users data and listing's details. Authenticated users can add, edit, delete listings and edit and delete own profile and account info. Data is stored on NeonDB through Prisma and images are uploaded and stored on Cloudinary. Location is geocoded and shown on Leaflet map, with external 'View on Google Maps' link.

Technologies Used:

Next.js iconNext.js
React.js iconReact.js
Clerk iconClerk
Cloudinary iconCloudinary
Neon iconNeon
Prisma iconPrisma
shadcn/ui iconshadcn/ui
Tailwind iconTailwind
TypeScript iconTypeScript
React Hook Form iconReact Hook Form
Zod iconZod
Zustand iconZustand
#️⃣ AI Instagram hashtag generator made with Next.js 15, AI SDK (llama-3.3), Clerk, shadcn/ui, Tailwind, TypeScript and with PWA support

#️⃣ AI Instagram hashtag generator made with Next.js 15, AI SDK (llama-3.3), Clerk, shadcn/ui, Tailwind, TypeScript and with PWA support

AI Instagram hashtag generator made with ⚑ Next.js 15 and πŸ€– AI SDK (llama-3.3), that lets user that is authenticated through Clerk to generate up to...

Next.js icon
React.js icon
AI SDK icon
Clerk icon
shadcn/ui icon
Tailwind icon
TypeScript icon
Vercel icon
PWA icon
#️⃣ AI Instagram hashtag generator made with Next.js 15, AI SDK (llama-3.3), Clerk, shadcn/ui, Tailwind, TypeScript and with PWA support

#️⃣ AI Instagram hashtag generator made with Next.js 15, AI SDK (llama-3.3), Clerk, shadcn/ui, Tailwind, TypeScript and with PWA support

AI Instagram hashtag generator made with ⚑ Next.js 15 and πŸ€– AI SDK (llama-3.3), that lets user that is authenticated through Clerk to generate up to 30 hashtags based on the topics provided, with 3 type selection and to refetch the data with already applied filters.

Technologies Used:

Next.js iconNext.js
React.js iconReact.js
AI SDK iconAI SDK
Clerk iconClerk
shadcn/ui iconshadcn/ui
Tailwind iconTailwind
TypeScript iconTypeScript
Vercel iconVercel
PWA iconPWA
πŸ€– AI Chat made with Next.js 15, AI SDK (llama-3.3), shadcn/ui, Tailwind and TypeScript

πŸ€– AI Chat made with Next.js 15, AI SDK (llama-3.3), shadcn/ui, Tailwind and TypeScript

AI Chat made with⚑Next.js 15 and πŸ€– AI SDK (llama-3.3), with scroll animations, copy to clipboard, syntax highlighting, like and dislike buttons and d...

Next.js icon
React.js icon
AI SDK icon
shadcn/ui icon
Tailwind icon
TypeScript icon
πŸ€– AI Chat made with Next.js 15, AI SDK (llama-3.3), shadcn/ui, Tailwind and TypeScript

πŸ€– AI Chat made with Next.js 15, AI SDK (llama-3.3), shadcn/ui, Tailwind and TypeScript

AI Chat made with⚑Next.js 15 and πŸ€– AI SDK (llama-3.3), with scroll animations, copy to clipboard, syntax highlighting, like and dislike buttons and dark mode.

Technologies Used:

Next.js iconNext.js
React.js iconReact.js
AI SDK iconAI SDK
shadcn/ui iconshadcn/ui
Tailwind iconTailwind
TypeScript iconTypeScript
Dockerized Nest.js, GraphQL, Prisma, PostgreSQL and nginx Recipes API with JWT Authentification πŸ”

Dockerized Nest.js, GraphQL, Prisma, PostgreSQL and nginx Recipes API with JWT Authentification πŸ”

πŸ‹ Dockerized 😺 Nest.js,πŸ•ΈοΈ GraphQL,πŸ”· Prisma,🐘 PostgreSQL,🌐 nginx Recipes API with πŸ” JWT authentification,πŸ“ƒ recipes and πŸ‘€ user management, and...

Nest.js icon
GraphQL icon
Prisma icon
PostgreSQL icon
TypeScript icon
JWT icon
Docker icon
nginx icon
Dockerized Nest.js, GraphQL, Prisma, PostgreSQL and nginx Recipes API with JWT Authentification πŸ”

Dockerized Nest.js, GraphQL, Prisma, PostgreSQL and nginx Recipes API with JWT Authentification πŸ”

πŸ‹ Dockerized 😺 Nest.js,πŸ•ΈοΈ GraphQL,πŸ”· Prisma,🐘 PostgreSQL,🌐 nginx Recipes API with πŸ” JWT authentification,πŸ“ƒ recipes and πŸ‘€ user management, and πŸ”Ž search functionality πŸ€—

Technologies Used:

Nest.js iconNest.js
GraphQL iconGraphQL
Prisma iconPrisma
PostgreSQL iconPostgreSQL
TypeScript iconTypeScript
JWT iconJWT
Docker iconDocker
nginx iconnginx
Dockerized Nest.js, Prisma, PostgreSQL and nginx Blog Posts API with JWT Authentification πŸ”

Dockerized Nest.js, Prisma, PostgreSQL and nginx Blog Posts API with JWT Authentification πŸ”

πŸ‹ Dockerized 😺 Nest.js, πŸ”· Prisma, and 🐘PostgreSQL Blog Posts API with πŸ” JWT authentification , πŸ“ƒposts and πŸ‘€ user management, πŸ“‘ pagination and...

Nest.js icon
Prisma icon
PostgreSQL icon
Swagger icon
TypeScript icon
JWT icon
Docker icon
nginx icon
Dockerized Nest.js, Prisma, PostgreSQL and nginx Blog Posts API with JWT Authentification πŸ”

Dockerized Nest.js, Prisma, PostgreSQL and nginx Blog Posts API with JWT Authentification πŸ”

πŸ‹ Dockerized 😺 Nest.js, πŸ”· Prisma, and 🐘PostgreSQL Blog Posts API with πŸ” JWT authentification , πŸ“ƒposts and πŸ‘€ user management, πŸ“‘ pagination and πŸ“œ Swagger documentation πŸ€—

Technologies Used:

Nest.js iconNest.js
Prisma iconPrisma
PostgreSQL iconPostgreSQL
Swagger iconSwagger
TypeScript iconTypeScript
JWT iconJWT
Docker iconDocker
nginx iconnginx
View All