Mahir

Build About page with Parallax Scrolling
Fix some UI and complete the project

Setup New Route for /cloths

Added a dedicated route using react-router-dom.

Route: /cloths → renders <ClothsPage /> component.

Created ClothsPage Component

Converted static HTML structure of the Cloths page into a fully functional React component.

Used map() to render product cards dynamically for scalability.

Built Dynamic Product Cards

Implemented interactive image-switch-on-hover behavior.

The main product image dynamically updates when user hovers over thumbnails.

Applied original card styles to maintain 1:1 UI consistency with the old design.
Responsive Layout

Ensured the grid remains mobile-friendly using Bootstrap’s responsive grid system.

Cards stack properly on smaller screens while remaining centered.

Today I designed and integrated the Testimonial, FAQ, New Article, Newsletter, Call-to-Action, and Footer sections for the NIKE-themed React website using modern UI practices and Bootstrap 5.
FAQ Section
Created a two-column layout to answer frequently asked questions.
Clean typography and spacing.
Used Bootstrap Grid for responsive layout.
Book a Slot (CTA) Section
Integrated a visually strong call-to-action section with background image and text overlay.
Background image added using CSS.
Flex and Grid for text and button alignment.

Newsletter Section
Built a stylish newsletter subscription form.
Email input + Subscribe button.
Hover focus effect for form field using CSS.
Section centered on page with responsive behavior.

Footer Section
Completed the home page with a neat footer. Navigation links and social media icons.
Added Font Awesome for icons.
Custom color, spacing, and layout polish.

Feature Built: New Article Showcase Section
I introduced a rich, interactive “New Article” section that mimics a real product preview experience.

Here’s what was implemented:

A vertical image stack of five thumbnails using Flexbox — each image clickable.

On clicking any thumbnail, the main preview image updates dynamically, simulating a gallery.

Responsive layout — side-by-side on larger screens and stacked gracefully on mobile.
Feature Built: Customer Testimonial Carousel
Smooth Bootstrap carousel integration in React using indicators and slide animations.

Avatar-based user reviews with role titles like “UX Designer” and “Frontend Developer.”

Custom layout with rounded cards, spacing, and colored backgrounds to stay visually engaging.

Fully mobile-optimized — looks great on all screen sizes.
Centralized section heading and carousel dots for easy navigation.

1. Counter Section with Animation built the Counter Section

Integrated a scroll-triggered animation that increases numbers dynamically using useEffect and setInterval.

Used Bootstrap grid to maintain layout.

Counter values and icons match original (e.g., Total Sales, Happy Clients).

1. Product Cards Section Display cards in 2 rows. Maintain equal card heights and width Proper spacing, padding, and responsive behavior included. Used custom CSS along with Bootstrap for perfect alignment and scaling.

Features Implemented:
React-based circle menu with images rotating on button click.
Image slider that syncs with rotation and loops seamlessly.
Fully responsive layout, maintaining pixel-perfect fidelity with the original UI.
Button interactivity for previous/next transitions.

Project initialized using Vite + React

Created folder structure with /components, /assets, and public/Images

Set up Bootstrap and AOS for animations

Built responsive Navbar as a separate React component (Navbar.jsx)

Build Hero Section

UI Improvements:

Redesigned layout with a clean, centered look.

Gradient background added for a modern touch.

Scoreboard and current turn display are now more prominent.

Game blocks made perfectly square with hover effects for better interactivity.

Game Logic Enhancements:

Winning combination now highlights the winning cells visually.

Game auto-resets after win/tie, improving flow.

Game blocks are unclickable after win, preventing unwanted moves.

Sound Integration:

Click sound on each move.

Separate win and tie sounds based on outcome.

All sounds preload and play seamlessly during interactions.

Tech Improvements:

App split into multiple reusable components:

Board.jsx, ScoreBoard.jsx, TurnInfo.jsx, RestartButton.jsx

Clean code with scoped styling and well-managed state.

Progress So Far:
Project setup done with Vite
3x3 game board created using React components
Turn logic added (X and O)
Win detection implemented
Basic Bootstrap UI integrated

What I Learned:
Using useState for managing game state
Conditional rendering in React
How to implement core game logic like win-checking
Grid layout with Bootstrap

Next Steps:
Add scoreboard & reset button
Highlight winning cells
Improve UI polish and responsiveness

Set up project structure using Express. Configured MongoDB and created a User model with Mongoose.
Built authentication routes for login and signup. Implemented session using express-session and connect-mongo.
Created a protected dashboard route that only works after login. Designed views using EJS templates.
Implemented role support in users and created a middleware to protect admin-only routes. Admins now have access to /admin while normal users are denied.

Users can now search products by name in real-time.

Combined with category filter and sorting — full product filtering experience!

Used .includes() + .toLowerCase() for case-insensitive results.
Now users can toggle to view only their liked products.

Integrated with category filter, search & sorting.

Used array includes() to filter by IDs!

Favorites Feature & Dark Mode Toggle Done!

Now users can mark products as favorite using a heart button.

Toggled favorites are tracked in state and icon changes dynamically.

Added a Light/Dark mode toggle using React state and Bootstrap classes.

Now users can switch themes instantly!

Added a filter system to view products by category using React state and dynamic buttons.

✅ Created a reusable component

✅ Used Set to get unique categories

Next: Add Favorite (❤️) functionality to products!

Today I started my Product Showcase Website using React & Bootstrap.

✅ Project structure created

✅ Navbar completed using Bootstrap

💡 Learned how to use Bootstrap with Vite

Next up: Create Product Cards and layout the grid!