My Projects

Insights, tutorials, and projects I’ve shared along my journey.

EVENTRA - EVENT MANAGMENT APP

EVENTRA - EVENT MANAGMENT APP

Eventra is a full-featured event management platform frontend built with Next.js 16 and TypeScript. It supports three distinct roles (Admin, Host, Client) with role-based navigation and dashboards, secure JWT authentication with HTTP-only cookies, SSLCommerz payment integration with automated revenue splitting (90% host, 10% admin), peer-to-peer review system with host ratings, comprehensive analytics dashboards, and responsive UI. Features include: interest-based event discovery with advanced search & filtering, event booking with online payment options, host/event application system with admin approval, event lifecycle management (Open/Full/Cancelled/Completed status), image uploads via Cloudinary, email notifications (booking confirmations, host application email (confirm/rejection), payment receipts), contact form integration, user/host/event/payment management for admins, revenue tracking dashboards for hosts, participant management, SEO optimization with meta tags, mobile-first responsive design with adaptive navigation, and real-time stats display across all dashboard types.


Key Features: 

    Mind Like Event Matching Based on Interests and Rate Limiting Features Included for preventing excessive requests

    Users can discover, book, and manage events with advanced search, filtering, reviews, and event status tracking.

    Hosts can create and manage events, track event application, and monitor earnings with automated revenue splitting.

    Admins can manage users, hosts, events, payments, approvals, and platform analytics.

    Secure JWT authentication with HTTP-only cookies, role-based access, and Zod-based validation.

      SSLCommerz payments, advanced Search, Sort, Filter and review system



𝐊𝐞𝐲 𝐇𝐢𝐠𝐡𝐥𝐢𝐠𝐡𝐭𝐬

1. Secure JWT Authentication 

2. Role-based dashboards & navigation (Admin / Host / Client)

3. SSLCommerz payment integration with automatic revenue split 90% → Host 10% → Platform (Admin)

4. Post-event review & rating system (clients → hosts)

5. Analytics & revenue dashboards for Hosts and Admins

6. Interest-based event discovery with advanced search & filters

7. Automated email notifications (booking, approval, payments)

8. Event lifecycle management Open → Full → Cancelled → Completed


𝐂𝐥𝐢𝐞𝐧𝐭 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

1. Discover events using search, filters, and interests

2. Book & pay securely online

3. Manage booked events (join/leave before start)

4. Review hosts after event completion

5. Apply to become a host (admin approval required)


𝐇𝐨𝐬𝐭 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

Create, update, and manage events

Mark events as Completed after event date

Track earnings with revenue dashboards


𝐀𝐝𝐦𝐢𝐧 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

Full control over users, hosts, events, and payments

Approve/reject host & event applications

Monitor platform revenue (10% commission)

View real-time platform statistics


𝐓𝐞𝐜𝐡 𝐒𝐭𝐚𝐜𝐤

𝑭𝒓𝒐𝒏𝒕𝒆𝒏𝒅: Next.js, TypeScript, Tailwind CSS, ShadCN/UI, React Hook Form + Zod

𝑩𝒂𝒄𝒌𝒆𝒏𝒅: TypeScript, Node.js, Express, PostgreSQL + Prisma ORM, JWT, bcryptjs, SSLCommerz, Nodemailer



𝐓𝐞𝐬𝐭 𝐀𝐜𝐜𝐨𝐮𝐧𝐭𝐬

Admin → admin@gmail.com | Admin@12345

Host → host1@gmail.com | Host@12345


Powered by Froala Editor

CATEGORY

Fullstack

FRONTEND TECHNOLOGIES

Next.js, TypeScript, Tailwind CSS, Tailwind Merge, ShadCN/UI, React Hook Form, Zod Validation, Axios, React Fast Marquee, date-fns, npm, SSR, SSG, ISR

BACKEND TECHNOLOGIES

Node.js, Express.js, PostgreSQL, Prisma ORM, JWT,Typescript, Zod, Cloudinary, Multer, Multer Storage Cloudinary, Nodemailer, SSLCommerz, Bcrypt, axios, express-rate-limit

CLIENT REPO

View

SERVER REPO

View

LIVE LINK

View
CARIO RIDES - RIDE MANAGMENT  APP

CARIO RIDES - RIDE MANAGMENT APP

Real-time ride tracking, location-based ride matching using GeoJSON, JWT authentication, secure payments (SSLCommerz) with automated invoice pdf generation, advanced search sort filter and role-based dashboards, features and analytics for Riders, Drivers, and Admins.


Key Features: 

  • 1. Rider’s request and track rides in real-time; Drivers go online/offline, accept/reject rides, and update ride statuses
  • 2. Role Based dashboards with ride history, analytics, and profile Admin can manage riders, drivers, rides and feedbacks.
  • 3. Supports SSLCommerz payments, automated PDF invoices, email notification and real-time SOS 4. and Realtime map.
  • 5. GeoJSON-based ride matching within 1 km radius using Haversine distance for accurate rider-driver connections.
  • 6. Secure JWT authentication with HTTP-only cookies, role-based access, Zod-based validation and revenue splitting


CARIO-RIDES is a full-stack ride-booking platform for Riders, Drivers, and Admins, offering real-time tracking, secure payments, automated PDF invoices, SOS alerts, role-based dashboards, and analytics.


Live-Link → https://cario-ride-frontend.vercel.app/

Frontend Repo → https://github.com/Sazid60/CARIO-RIDE-FRONTEND

Backend Repo → https://github.com/Sazid60/CARIO-RIDE-BACKEND


👤 𝐑𝐢𝐝𝐞𝐫 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

- Request or cancel rides

- See nearby drivers.

- Live ride tracking on maps + SOS button.

- Pay online via SSLCommerz or offline (cash).

- Auto-generated PDF invoices via email.

- Analytics: spending, daily/weekly/monthly rides.

- Ride history with search, filter, pagination.

- Manage profile + rate drivers.

- Search and Ask Queries


🚗 𝐃𝐫𝐢𝐯𝐞𝐫 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

- Go online/offline to manage availability.

- Accept/reject ride requests.

- Update ride status: arrived → pickup → start → complete.

- Earnings dashboard with daily/weekly/monthly reports.

- Full ride history + invoices.

- Manage profile & vehicle info.


🛠️ 𝐀𝐝𝐦𝐢𝐧 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

- Approve/suspend drivers, block/unblock users.

- Handle user queries → reply via email + auto-add to FAQs.

- Monitor rides, income, expenses


𝐒𝐩𝐞𝐜𝐢𝐚𝐥 𝐍𝐨𝐭𝐞𝐬 & 𝐒𝐲𝐬𝐭𝐞𝐦 𝐋𝐨𝐠𝐢𝐜

- Allow map and Cookies for this app.

- Driver registration requires approval; logout/login to access features.

- Rider ↔ Driver matching only within 1 km.

- fare: 100 BDT/km.

- Earnings split: 80% Rider, 10% Admin.


🔑 𝐓𝐞𝐬𝐭 𝐀𝐜𝐜𝐨𝐮𝐧𝐭𝐬

Admin → admin@gmail.com | Admin123@

Driver → driver@gmail.com | Driver123@

Rider → rider@gmail.com | Rider123@


⚙️ 𝐓𝐞𝐜𝐡 𝐒𝐭𝐚𝐜𝐤

𝑭𝒓𝒐𝒏𝒕𝒆𝒏𝒅: React, TypeScript, Redux Toolkit, RTK Query Tailwind, ShadCN/UI, React-Leaflet, Recharts, React Router, Origin Ui, React Hook Form, Zo, react-Countup, React-Marquee, Axios, Bun


𝑩𝒂𝒄𝒌𝒆𝒏𝒅: Node.js, Express, Mongoose, Mongodb JWT, Cloudinary,Multer, Nodemailer, PDFKit, SSLCommerz, Passportjs, Bcrypt, Haversine-distance , Geojson


Powered by Froala Editor

CATEGORY

Fullstack

FRONTEND TECHNOLOGIES

React, TypeScript, Redux Toolkit, RTK Query Tailwind, ShadCN/UI, React-Leaflet, Recharts, React Router, Hook Form, Zod, react-Countup, React-Marquee, Axios, Bun

BACKEND TECHNOLOGIES

Node.js, Express, Mongoose, Mongodb, Typescript, zod, JWT, Cloudinary,Multer, Nodemailer, PDFKit, SSLCommerz, Passportjs, Bcrypt, Haversine-distance , Geojson

CLIENT REPO

View

SERVER REPO

View

LIVE LINK

View
PROPEX - REAL ESTATE SITE

PROPEX - REAL ESTATE SITE

A MERN stack real estate platform for users, agents, and admins. Users browse, Wishlist, and review properties; agents manage listings and sales; admins oversee operations. Features include advanced search, Wishlist, secure payments, and management tools for a seamless real estate experience.


𝐀𝐃𝐌𝐈𝐍 𝐋𝐎𝐆𝐈𝐍 𝐃𝐄𝐓𝐀𝐈𝐋𝐒 


𝐀𝐝𝐦𝐢𝐧-𝐄𝐦𝐚𝐢𝐥 : admin@gmail.com

𝐀𝐝𝐦𝐢𝐧-𝐏𝐚𝐬𝐬𝐰𝐨𝐫𝐝 : PhB9A12@


𝐀𝐆𝐄𝐍𝐓 𝐋𝐎𝐆𝐈𝐍 𝐃𝐄𝐓𝐀𝐈𝐋𝐒


𝐀𝐠𝐞𝐧𝐭-𝐄𝐦𝐚𝐢𝐥 : agent@gmail.com

𝐀𝐠𝐞𝐧𝐭-𝐏𝐚𝐬𝐬𝐰𝐨𝐫𝐝 : PhB9A12@


𝐊𝐞𝐲 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬:


🔷 𝐀𝐝𝐦𝐢𝐧 𝐂𝐚𝐩𝐚𝐛𝐢𝐥𝐢𝐭𝐢𝐞𝐬:


𝐔𝐬𝐞𝐫 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭: Admins can delete users, promote them to agents or admins, and mark agents as fraudulent, removing their data.

𝐏𝐫𝐨𝐩𝐞𝐫𝐭𝐲 𝐕𝐞𝐫𝐢𝐟𝐢𝐜𝐚𝐭𝐢𝐨𝐧: Admins verify properties before they’re listed and can advertise verified properties on the homepage.

𝐑𝐞𝐯𝐢𝐞𝐰 𝐌𝐨𝐝𝐞𝐫𝐚𝐭𝐢𝐨𝐧: Admins can delete reviews to maintain platform trust.


🔷 𝐀𝐠𝐞𝐧𝐭 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬:


𝐏𝐫𝐨𝐩𝐞𝐫𝐭𝐲 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭: Agents can add, update, or delete their listings.

𝐎𝐟𝐟𝐞𝐫 𝐇𝐚𝐧𝐝𝐥𝐢𝐧𝐠: Agents manage user offers and complete transactions securely through Stripe.

𝐃𝐚𝐬𝐡𝐛𝐨𝐚𝐫𝐝 𝐈𝐧𝐬𝐢𝐠𝐡𝐭𝐬: Agents track their properties, sales, and income.


🔷 𝐔𝐬𝐞𝐫 𝐄𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞:


𝐀𝐝𝐯𝐚𝐧𝐜𝐞𝐝 𝐒𝐞𝐚𝐫𝐜𝐡: Users find properties based on their preferences.

𝐖𝐢𝐬𝐡𝐥𝐢𝐬𝐭 & 𝐑𝐞𝐯𝐢𝐞𝐰𝐬: Users can save properties to their Wishlist and leave reviews.

𝐒𝐞𝐜𝐮𝐫𝐞 𝐏𝐚𝐲𝐦𝐞𝐧𝐭𝐬: Stripe integration ensures safe transactions when offers are accepted.

𝐒𝐞𝐜𝐮𝐫𝐢𝐭𝐲 & 𝐓𝐞𝐜𝐡 𝐒𝐭𝐚𝐜𝐤: JWT Authentication and Private Routes secure the platform.

Built with React.js, Node.js, Express.js, MongoDB, and Stripe for payments.


🌐 𝐄𝐱𝐩𝐥𝐨𝐫𝐞 𝐏𝐑𝐎𝐏𝐄𝐗:


𝐖𝐞𝐛𝐬𝐢𝐭𝐞: https://propex-client.web.app/

𝐆𝐢𝐭𝐇𝐮𝐛 𝐑𝐞𝐩𝐨𝐬𝐢𝐭𝐨𝐫𝐲: https://github.com/Sazid60/Propex-Real-Estate-Client

CATEGORY

Fullstack

FRONTEND TECHNOLOGIES

Tailwind CSS, React, Swiper.js, Axios, Tanstack Query, Daisy UI, Firebase, React Router, Typewriter

BACKEND TECHNOLOGIES

Node.js, Express.js, MongoDB, Stripe, JWT

CLIENT REPO

View

SERVER REPO

View

LIVE LINK

View
LIBEASE - LIBRARY MANAGMENT SYSTEM

LIBEASE - LIBRARY MANAGMENT SYSTEM

LIBEASE is a Library Management System serving to two types of users: random users and admins. Random users can register, log in, browse books, view details, borrow, and return books. Admins have extra privileges including adding, updating, and deleting books. They cannot borrow books.



𝐋𝐢𝐯𝐞-𝐋𝐢𝐧𝐤: https://lnkd.in/g8zXMWd5

𝐂𝐥𝐢𝐞𝐧𝐭-𝐒𝐢𝐝𝐞-𝐆𝐢𝐭𝐇𝐮𝐛 : https://lnkd.in/gVKw-ubY

𝐒𝐞𝐫𝐯𝐞𝐫-𝐒𝐢𝐝𝐞-𝐆𝐢𝐭𝐇𝐮𝐛 : https://lnkd.in/gCgsRabx


𝐓𝐞𝐜𝐡𝐧𝐨𝐥𝐨𝐠𝐢𝐞𝐬 𝐔𝐬𝐞𝐝:


𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝: React.js, Tailwind CSS, Daisy UI, Mumba UI, Meraki UI

𝐁𝐚𝐜𝐤𝐞𝐧𝐝: Node.js, Express.js

𝐃𝐚𝐭𝐚𝐛𝐚𝐬𝐞: MongoDB

𝐀𝐮𝐭𝐡𝐞𝐧𝐭𝐢𝐜𝐚𝐭𝐢𝐨𝐧 & 𝐃𝐚𝐭𝐚 𝐏𝐫𝐨𝐭𝐞𝐜𝐭𝐢𝐨𝐧 : JWT (JSON Web Token)


𝐌𝐚𝐢𝐧 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬:


𝑹𝒂𝒏𝒅𝒐𝒎 𝑼𝒔𝒆𝒓𝒔:


𝐁𝐨𝐫𝐫𝐨𝐰 𝐁𝐨𝐨𝐤𝐬: Users can borrow books for a specified period.

𝐑𝐞𝐭𝐮𝐫𝐧 𝐁𝐨𝐨𝐤𝐬: Users can return borrowed books, updating the stock quantity automatically.


𝑨𝒅𝒎𝒊𝒏 𝑷𝒂𝒏𝒆𝒍:


𝐀𝐝𝐝 𝐁𝐨𝐨𝐤𝐬: Admins can add new books to the library.

𝐔𝐩𝐝𝐚𝐭𝐞 𝐚𝐧𝐝 𝐃𝐞𝐥𝐞𝐭𝐞 𝐁𝐨𝐨𝐤𝐬: Admins can update book details or delete books from the library.


**Admin Routes & Data Both Are Protected


LIBEASE ensures a secure and user-friendly library management experience, providing seamless functionality for both users and admins.


**𝙏𝙤 𝙂𝙚𝙩 𝘼𝙡𝙡 𝙍𝙤𝙪𝙩𝙚𝙨 & 𝙊𝙥𝙚𝙧𝙖𝙩𝙞𝙤𝙣 𝘼𝙘𝙘𝙚𝙨𝙨 𝙇𝙤𝙜𝙞𝙣 𝙐𝙨𝙞𝙣𝙜 𝘼𝙙𝙢𝙞𝙣/𝙇𝙄𝘽𝙍𝘼𝙍𝙄𝘼𝙉 𝙀𝙢𝙖𝙞𝙡 & 𝙋𝙖𝙨𝙨𝙬𝙤𝙧𝙙**


𝐀𝐝𝐦𝐢𝐧/𝐋𝐢𝐛𝐫𝐚𝐫𝐢𝐚𝐧-𝐄𝐦𝐚𝐢𝐥: shahnawazsazid60@gmail.com

𝐀𝐝𝐦𝐢𝐧/𝐋𝐢𝐛𝐫𝐚𝐫𝐢𝐚𝐧-𝐏𝐚𝐬𝐬𝐰𝐨𝐫𝐝: Phb9A11

CATEGORY

Fullstack

FRONTEND TECHNOLOGIES

Tailwind CSS, React, Axios, Daisy UI, Firebase , Tanstack Query

BACKEND TECHNOLOGIES

Node.js, Express.js, MongoDB, JWT, REST APIs

CLIENT REPO

View

SERVER REPO

View

LIVE LINK

View
ARTELYSIUM - PAINTING SHOP

ARTELYSIUM - PAINTING SHOP

ARTELYSIUM is all about arts & crafts. This website represents some fine artworks. User see added art works added by different persons. User can see categorized data. A person can create artwork selling card. Moreover he can see his added arts, as well as he can delete & update his art information. User can access private pages(add arts, My Arts, Art Details).This website is responsive for all devices and available for dark and light mode toggling. All data are stored in Database.


Features & Characteristics:

Navbar: Navbar has active routes to navigate through pages. Displays User image & functional Logout button when logged in; otherwise, displays default blank user image, login and register button.


Theme Control: Just Beside the Website Title Dark & Light Them Toggling Button Added.


Public Routes: User Can Access Home Page, All Art & Craft,Categorized Arts Login & Register Page.


Private Routes: Allows navigation to Add Arts & Crafts, Update Arts & Crafts, My Arts & Crafts and Arts & Craft Details, After Successful Login/Register.


 Pages & Sections Specification: 

Home Page: Contains Navbar, Banner(AutoPlay Images & Typewriter), Arts & Crafts, Art & Craft Categories, Events & Programs(Extra Section), Reviews(Extra Section) & Footer.


Arts & Crafts Section : This Section Contains 6 Art Cards of Recently Added Cards From Database. And By Clicking The View Details Button User Can Go To The Art Details Page(Private Route)


Art & Craft Categories Section : There are All The Subcategory(name showed middle of the images), By Clicking Each Subcategory Image/Name Will Take User to The Categorized Art Cards Sections.


Events & Programs Section : This Section Shows Organized Events by Organization.


Review Section : Represents Reviews of Clients.


Register Page: Register with email, password, photo URL, or Google & GitHub. Validates Password (6 characters, 1 uppercase, 1 lowercase). Redirects post-registration to the desired or home page. (any error/success will show alert)


Login Page: Login with email, password or Google & GitHub. Redirects to the desired or home page. (any error/success will show alert)


All Arts & Crafts Page : This Page Shows All The Art Information Added By All Users In Table Format, Besides There is a View Details Button Which Allows User To Go To Specific Art Details(user must be logged in).


All Arts & Crafts Page : This Page Shows All The Art Information Added By All Users In Table Format, Besides There is a View Details Button Which Allows User To Go To Specific Art Details(user must be logged in).


Add Arts & Crafts Page : This Page Takes All Art Information and Adds Data to The Database Which Passes The Data to All The Pages. After Adding a Successful Modal Type Alert Is Shown.


My Arts & Crafts Page : In This Page Data From Database Is Sorted By User Email Address and Shown In The Page. This Page Only Shows User Specific Added Data(Including Update & Delete Button). In The Top Of The Page Sort By Customize Option Added.


Update Operation : Clicking The Update Button Redirects User to Update Page(Private Route) Which Allows User to Update Art Information.


Delete Operation : This Button Allows To Delete Art Card, but It Asks for Confirmation.


NPM Packages Used:

React-Simple-Typewriter : Applied In The Banner Section Which Shows All The Subcategories.

React-Tooltip : Used In Navbar Profile Image, When You hover Profile Image It Will Show User Name If Name Is Available.

Swiper-slider : Applied In Home Page Banner Section Which Changes Images In Infinite Order.

React-Sweet-Alert : Applied On Successful Art Adding, Deleting a Product, Updating a Product.

React-Spinner : Added To Show Loading Sate.

Technologies used :

React.js | HTML5 | Tailwind CSS | Daisy UI | Node.js | Express.js | MongoDB | Firebase


Instructiosn For Locally Running The Project:

Clone The Repository " git clone "

Install All The Dependecies " npm intall "

Create a .env file in the root directory of the project and add the required fields.

Customize .env variables according to your specific environment setup.

Ensure Node.js and npm (or yarn) are installed on your system.

For Further Guidence You Can Connect me and ask any queries.

CATEGORY

Fullstack

FRONTEND TECHNOLOGIES

React, Daisy UI, Firebase Tailwind CSS, React, Axios, Daisy UI, Firebase

BACKEND TECHNOLOGIES

ode.js, Express.js, MongoDB, REST APIs

CLIENT REPO

View

SERVER REPO

View

LIVE LINK

View
SIMULATION - MPPT BASED SOLAR PLANT

SIMULATION - MPPT BASED SOLAR PLANT

The world is moving towards clean energy sources, and only renewable energy can fulfill these needs. One of the cleanest sources of renewable energy is the PV panel. This paper is based on the MPPT Controller, which works on different constant voltage algorithms. Solar PV-based power plants can also provide electricity at night, and this type of PV-based power plant is known as a hybrid power plant. For hybrid plants, batteries are used to store the energy during the daytime and deliver this stored energy at night. The purpose of this paper is to represent a simulation of a solar power plant based on an MPPT controller which can provide power in the daytime and at night. The system can provide uninterrupted power without any problem. Segments of the simulation were PV array, MPPT controller, Buck Converter, Battery controller, Display, Inverter, etc. The waveform of Irradiance, 3 phase modified sine wave, is plotted to observe. Rather than this whole project’s efficiency and productivity were simulated in RETscreen.

CATEGORY

Electronics

FRONTEND TECHNOLOGIES

N/A

BACKEND TECHNOLOGIES

N/A

LIVE LINK

View

IEEE URL

View
NON INVESIVE - SMART VENTILATOR

NON INVESIVE - SMART VENTILATOR

A microcontroller-based ventilator was developed including a health monitoring system featuring a Wi-Fi-based notifier. A pressure-controlled ventilator was included, and an AMBU bag was used for controlling the breath length and pressure. In monitoring the system, Oxygen Saturation, body temperature, and Heart Beat rate were measured using specific modules. The measured data were shown on the display, and for critical conditions, the system alerted using Wi-Fi technology. The ventilator responded according to the data and changed the pressure of the Air Breather Bag using motors. A non-invasive ventilation mask was used for ventilating the patient’s lung and a manual control mechanism was used for emergency. There was an option for attaching an oxygen cylinder/concentrator. A battery was used to power the system.

CATEGORY

Electronics

FRONTEND TECHNOLOGIES

N/A

BACKEND TECHNOLOGIES

N/A

LIVE LINK

View

IEEE URL

View
ECOM EVO - ECOMMARCE FRONTEND

ECOM EVO - ECOMMARCE FRONTEND

A frontend-only web application developed using React, React Router DOM, and Tailwind CSS, designed to demonstrate dynamic and responsive user interfaces. The app features multiple navigable pages, interactive components, and state management, all powered by fake/mock data to simulate real-world functionality. It showcases clean UI design, smooth transitions between routes, and responsive layouts optimized for different screen sizes, making it a practical example of a fully functional frontend application without a backend.

CATEGORY

Frontend

FRONTEND TECHNOLOGIES

Tailwind CSS, React, Swiper.js, Daisy UI

BACKEND TECHNOLOGIES

N/A

CLIENT REPO

View

LIVE LINK

View
MONA AI - LANDING PAGE

MONA AI - LANDING PAGE

Mona AI is a modern web application featuring a React-based landing page. It leverages the latest frontend technologies and state-of-the-art tools to provide a responsive and engaging user experience


.


Live Demo

You can view the live version of the project [https://mona-ai-landing-page.netlify.app/].


Technologies Used

Frontend:

React.js

React Router DOM

React Tabs

React Icons

Swiper

Tailwind CSS

DaisyUI

Vite

CATEGORY

Frontend

FRONTEND TECHNOLOGIES

React.js, React Router DOM, React Tabs, React Icons, Swiper, Tailwind CSS, DaisyUI, Vite

BACKEND TECHNOLOGIES

N/A

CLIENT REPO

View

LIVE LINK

View
LAXFO - LANDING PAGE

LAXFO - LANDING PAGE

LAXFO is a responsive website built using React, Tailwind CSS, and Daisy UI. The main focus of this project is the Product page, where users can add products to their cart, adjust quantities, and view the total cost in real-time. The cart data is saved locally, ensuring that the user's selections persist across sessions. Users can easily navigate through different pages of the website.


Features

Responsive Design:


The website is fully responsive, ensuring a seamless experience on both desktop and mobile devices.

Image Slider:


The Home page features a responsive image slider built with React, showcasing the products effectively.

Product Management:


Users can add products to their cart, adjust quantities, and see the cart update accordingly.

Dynamic Price Calculation:


The cart page calculates the total cost in real-time based on product quantities, with options to adjust quantities as needed.

Local Storage:


Cart data is preserved in local storage, allowing users to retain their cart information even after refreshing the page or revisiting later.

Where To Click To Add In Cart/Add or Remove Quantity?

Main Product: Main Product


Featured Products Featured Products


Cart Products Featured Products


Navigation:


Seamless navigation through different pages of the website is enabled by React Router.

Toast Notifications:


Instant feedback is provided with toast notifications whenever a product is added to the cart.

Technologies Used

React.js: For building the user interface and managing state.

Tailwind CSS: For utility-first CSS styling.

Daisy UI: A Tailwind CSS component library that provides pre-designed UI components, speeding up development and maintaining a cohesive design language.

React Router: For enabling navigation between different pages of the website without reloading the entire page.

React Hot Toast: For displaying real-time notifications to users.

Animate.css: For adding animation effects to elements on the website.

React Icons: For including popular icons easily in the React application.

React Responsive Carousel: For implementing a responsive image carousel component.

CATEGORY

Frontend

FRONTEND TECHNOLOGIES

React.js, Tailwind CSS, Daisy UI, React Router,

BACKEND TECHNOLOGIES

N/A

CLIENT REPO

View

LIVE LINK

View
Scroll down