SP KATERIOO

[SP KATERIOO @Katestillexis]

@mualaniparty Skirk my queen

[SP KATERIOO @Katestillexis]

PS: Took 3-4 days
Future Goal: Shipping a project in 1 day

[SP KATERIOO @Katestillexis]

My React e-commerce project is DONE.

Built:
→ Product browsing + categories
→ Product details
→ Cart with Context API
→ Quantity management
→ Dynamic pricing
→ Empty cart state
→ React Router navigation
→ Responsive UI

Learned a lot about managing and transforming state

[SP KATERIOO @Katestillexis]

One thing this project really helped me understand was when to use map(), filter() and reduce().

map() → create an updated version of the cart
filter() → remove a specific product
reduce() → calculate values like the subtotal

[SP KATERIOO @Katestillexis]

The cart was probably the most valuable part of the project.

I implemented:

→ Adding products
→ Handling duplicate products with quantities
→ Increasing/decreasing quantities
→ Removing products
→ Dynamic subtotal calculation
→ Empty-cart state

[SP KATERIOO @Katestillexis]

What I used ⚛️

• React
• Context API for cart state
• React Router for navigation
• useState for local state
• useEffect for fetching products
• useContext for accessing cart data

[SP KATERIOO @Katestillexis]

What is ShopSphere?

ShopSphere is a frontend e-commerce application I built with React.

Users can browse products, filter by category, view individual product details, add products to their cart, change quantities, remove products, and see their subtotal update dynamically.

[SP KATERIOO @Katestillexis]

Finally finished learning CSS.
-Covered everything from the fundamentals to layouts, responsive design, and animations.

-Still learning, still building, still making random shit move on the screen until it looks cool 🤣

Also made this loading animation!!
#CSS

[SP KATERIOO @Katestillexis]

Try winning 3x in a row👀!

#Cpp

[SP KATERIOO @Katestillexis]

Future Improvements:
-UI (MAJOR NEED)
-Need to implement the recent transactions while the user views bank details (like what amount was the last depost/withdraw)
:Will come back to that once i'm familiar with structs and references!

Criticize me if I did anything wrong! Peace^^

[SP KATERIOO @Katestillexis]

I was only hooked to python this much bro 😭

Anyways, made a simple bank management app (lame) which shows balance, let's you withdraw or deposit and also guides/tells you if entered limit is too absurd!!

(had to scratch my head for logics quite abit)

#Cpp

[SP KATERIOO @Katestillexis]

@cyarenee Thanksss!!!!!

[SP KATERIOO @Katestillexis]

Learned how to and made this ragebaiting guess game in C++ using known components like srand, do-while etc

#Cpp #game

[SP KATERIOO @Katestillexis]

@Zy0x_ will you bloom aggressively aswell king ? ❤️

[SP KATERIOO @Katestillexis]

Wrote a react code on paper to FINALLY understand contextAPI

it was super funn 🥹
#ReactJS

[SP KATERIOO @Katestillexis]

who needs AAA games when I have this 😭

#cpp #game

[SP KATERIOO @Katestillexis]

built my first C++ project today.

it’s just a hypotenuse calculator but seeing my own code actually work is such a good feeling.
onwards to DSA.

#cpp

[SP KATERIOO @Katestillexis]

And finally Navigation Flow:
Navbar
│
│── Home
│── About
│── Contact
│── Courses
│ └── /Courses/:id
│── Product
├── Men
└── Women

Invalid URL
│
▼
404 Not Found

[SP KATERIOO @Katestillexis]

Built a big react project (for me it was big).

Features explained in comments!
#ReactJS

[SP KATERIOO @Katestillexis]

9. Styling & React Hooks

-Styled using Tailwind CSS
-Utility-first CSS classes
-Custom global CSS for headings

React Hooks Used:

useNavigate()
useParams()

[SP KATERIOO @Katestillexis]

8. Component-Based Architecture

Organized the application into reusable components.

Examples:
Navbar
Footer

Separate page components:

Home
About
Contact
Courses
Product
Men
Women
NotFound