Projects

Here are some of the projects I have worked on. Click on a project to view more details.

Social Media Website

A Next.js v15 dynamic social media platform with Lucia-auth and React Hook Form and Zod for the form validations and react-image-file-resizer. Users can sign up with username/password, or Google and enjoy a dual-feed homepage: 'For You' section with all posts and 'Following’ section with updates from Followings. They can create posts enriched with images , mentions, hashtags and links (react-linkify), and like, comment, bookmark or delete their own posts. Editable profiles along with notifications Stream Chat-based messaging and friendly interfaces are handled by a very solid backend (Prisma, react-query and date-fns) while dealing with user interactions on the front. And, at last, Tailwind CSS + shadcn UI for the good-looking UI with dark and light themes.

NextjsTailwindCSSShadcn/ui React-QueryUploadThingZod

Github View Project

Workboard Website To Find a Job

I used Next.js, Zod for data validation, date-fns for date formatting, react-hook-form for form handling and validation, and Clerk for user authentication. The website has several key features: it is optimized for fast performance by prefetching data, which is then stored in the cache. It includes an advanced filtering system that allows users to filter job listings effectively. Users can post job advertisements using a form. If the job is remote, there is no need to provide a company address. At least one of the two fields in the "How to apply" section must be filled out. After a job is posted, it goes to an admin page where it can be approved or rejected.

Next.jsZod date-fns react-hook-formClerk

Github View Project

Realtor Real State Website

Realtor is a dynamic real estate platform built with ReactJS, TailwindCSS, and Firebase for the backend. It offers a seamless user experience with key features designed to make property listing and management straightforward and efficient. Users can easily sign in using their Gmail account or through email and password authentication. The platform allows users to list properties for sale or rent with minimal effort. It includes a smart address verification feature that automatically checks the accuracy of the entered address and displays the property on a map. Additionally, users have full control over their listings, with options to edit or delete them at any time.

ReactjsTailwindCSSFirebase

Github View Project

Budget Tracker

built with Next.js, Clerk for authentication, Shadcn UI components library, TailwindCSS for styling, Recharts, Zod for validation, date-fns for time formatting, and export-to-csv, features the following: Users choose their currency upon registration. Users can create categories for income and expenses. Users add income or expenses based on the categories they created. The total income, total expenses, and current balance are calculated by subtracting expenses from income. The percentage of each category is calculated for both income and expenses. A chart visualizes income and expenses either monthly or daily, as specified by the user. A page lists all transactions with filtering and sorting options chosen by the user. Users can download an Excel file containing all the data. A page allows users to delete specific categories or change the currency.

NextjsTailwindCSSClerkRechartZodShadcnUI export-to-csv

Github View Project

Full-Stack Ecommerce Website

This project, built with React, React Query, Redux Toolkit, Material UI, React Icon, Stripe, Firebase, and Tailwind CSS, features an admin dashboard that provides an overview of performance metrics, including products, orders, and revenue, with graphical charts. It includes a product management page for admins to add, delete, and modify products, and an order management page listing orders with customer and order details, allowing status updates. The homepage showcases a slider and featured products, with cart and payment functionality for logged-in users. Each product page has a photo gallery, customer reviews, and similar product suggestions. The checkout process saves customer addresses for future purchases. Google integration allows importing user information from Google accounts.

ReactjsRedux ToolkitReact QueryTailwindCSSMaterialUIFirebase

Github View Project