During last year I created an app called "TravelTips", to help travelers connect and share their experiences. It has two main parts:

TravelTips

A part of the App where logged-in users can choose a country and leave real-time comments about it.
Logged in users can :
- reply to comments and give likes.
- delete their own messages if they want.
People who aren’t logged in can only read the messages, but they can’t reply or give them likes.

TravelMates

A part of the App where users can find travel buddies for their trips.
Logged in users can :
- Create a Trip: Add details like destination, dates, and preferences.
- Comment and Reply: Engage in real-time discussions about trips.
- Manage Content: Update or delete their trips and messages .
- Filter Options: Easily find trips based on specific criteria, such as destination, travel dates, or other preferences.

Other Feature:

Sign-In Options:
- You can log in with email and password or use Google account.
- There’s also a “forgot password” feature if needed.
User Profiles:
- Users can update their profiles and upload a profile picture.

I created this app in three versions:

The latest version is deployed on render.com.

Visit the app

Technology Stack:

Frontend: React.js
Backend: Express.js
Socket: Real-Time Communication: Socket.io

Backend Features:

Session-Based Authentication using Redis
Prisma ORM for server-database interaction
Forgot password feature with password reset link sent by mail.

Frontend Features:

Context API
Optimistic Updates implemented with TanStack Query

Real-Time Communication:

Real-time messaging using Socket.io

Frontend Code on GitHub

Backend Server on GitHub

Socket Io Server on GitHub

Please note that since I am using the free version of Render for deployment, there may be a slight delay of around 30 seconds when starting the servers after running the app. This is because the free tier typically requires the servers to 'wake up' when they are accessed for the first time after a period of inactivity.

Previous version

Technology Stack:

Frontend: React.js
Backend: Express.js
Socket: Real-Time Communication: Socket.io

Backend Features:

Authentication: Token-Based Authentication using JWT
SQL for server-side APIs
Forgot Password functionality with OTP(One-Time Password)

Frontend Features:

State Management: Context API for global state management
Optimistic Updates: Implemented using React's `useState` for smoother user experience

Real-Time Communication:

Real-time messaging using Socket.io

Frontend Code on GitHub

Backend Server on GitHub

Socket Io Server on GitHub

First Version: Using PHP and Vanilla JS

Technology Stack:

Frontend: Vanilla JS (without frameworks)
Backend: PHP

Backend Features:

Session Management: Using PHP sessions for authentication and user data storage
SQL for Server-Side APIs
Forgot Password functionality with OTP

Frontend Features:

Vanilla JS: DOM manipulation using native JavaScript selectors (no libraries or frameworks)

Code on GitHub

Below you can find other projects that I created in the past

School app, NEXT JS full-stack app with MONGODB and Prisma Integration,TypeScript, Pusher

I've built a full-stack web page , real time chat, real time grades .

The app includes:
- AUTHENTICATION: Admin can register new teachers and students, create classes and with drag - drop functionality add students to classes, teachers and students can update their profiles. - USER INTERCATION: Teacher can have more classes, teacher with students can have real time chat and real time evaluation .(using library Pusher)

Code on Github

Visit the page

Spanish teacher & touristic guide - NEXT JS full-stack app with MONGODB and Prisma Integration,TypeScript

I've built a full-stack webpage for my Colombian friend.
The app includes:
- AUTHENTICATION: Users can log in using Google or register via a form. Forgotten password function using tokens with expiration dates. - USER INTERCATION: Once logged in, users have the capability to send messages directly to the admin for inquiries or other communication needs. - ADMIN CONTROL: Admins possess the ability to view, delete, and update user messages and comments. Furthermore, admins can designate users as 'active,' granting them permission to write reviews.

Code on Github

Visit the page

Spanish teacher & Raact JS

I've built a static webpage for my Colombian friend
The app includes:

It is a simple responsive static webpage using context for changing themes and some animation effect using library framer-motion

Code on Github

Visit the page

Newspaper articles - NEXT JS,TypeScript

In Next JS I created a webpage that displays articles from different newspapers.

On the server side, I fetched data from multiple newspaper pages using a library 'Cheerio' to collect these articles. Then, on the client side, I retrieved this data from the server and organized it visually. I utilized a library 'Headless UI' to create a user-friendly dropdown menu. There is responsive web design using 'Tailwind's for the webpage

Code on Github

Visit the page

useReducer & useContext & Typescript - NEXT JS

In Next JS I created a frontend app using useReducer and useContext hook, allowing for Create, Read, Update, and Delete (CRUD) functionalities.

Additionally, I implemented an E-shop interface where users can perform actions like adding or removing products from their basket. When an order is submitted, it's added to an array, which is then displayed on the page through mapping. Simultaneously, number of items updated on the stock are displayed on the page. There is responsive web design using 'Tailwind's for the webpage

Code on Github

Visit the page

E-SHOP - PHP ,MY-SQL, javascript

I develepoed a simple eshop app,This project was one of my first full-stack projects in PHP, using MY-SQL database and javascript

It includes the following features:

Full authentication function including uploaded photo using cloudinary storage .
Logged in users can buy products and write revies .
Ability for users to see List of orders.
Admin page , Admin can add and mage products .

Code on Github

Visit the page

LENGUA APP - REACT JS ,EXPRESS, MONGO DB, WEB SOCKET

This project was one of my first full-stack projects in React JS, utilizing an Express server, MongoDB, and partly a WebSocket server. I tried to develop a language learning platform app similar to the webpage Italki.com.

It includes the following features: -Full authentication functionality. - Capability for teachers to manage their teaching time slots. - Ability for students to book available lessons. - Option for students to purchase credits using Stripe. - And more. MY APP ON RENDER.COM'S FREE TIER SLEEPS WHEN INACTIVE. I MUST REDEPLOY TO WAKE IT.

Code on Github

Visit the page

LENGUA APP - NODE JS ,EXPRESS, MONGO DB, WEB SOCKET

This project was one of my first full-stack projects in NODE JS, utilizing an Express server, MongoDB I tried to develop a language learning platform app similar to the webpage Italki.com.

It includes the following features:
-Full authentication functionality. - Capability for teachers to manage their teaching time slots. - Ability for students to book available lessons. - Option for students to purchase credits - And more. MY APP ON RENDER.COM'S FREE TIER SLEEPS WHEN INACTIVE. I MUST REDEPLOY TO WAKE IT.

Code on Github

Visit the page

German test in Rest JS

Eesy german test - my beginnings with React JS

Code on Github

Visit the page