StickrHaus: E-Commerce Webpage

StickrHaus is a full-stack e-commerce application developed as the final project for the course CPSC 2650: Full Stack Web Development II at Langara College, Summer 2025.

Visit: StickrHaus

Features

• Search stickers by name and category (abstract, fantasy, movies, nature, space, technology)
• Sort by price: low to high, high to low
• Add to cart and checkout
• User authentication: register, login, logout
• Admin dashboard

Frontend

• React
• Bootstrap
• Formik + Yup: form validation
• Deployment: Vercel

Backend

• Node.js
• Express
• Deployment:
  • Render: stickers data

Database

• MongoDB

Other Tools

• JWT for authentication
• Stripe API for checkout
• Unit and Integration tests with Vitest

REST API Routes

• Auth

Method	Endpoint	Description	Resquest Body	Protected Route?
GET	/api/auth/me	Get user info	-	No
GET	/api/auth/admin	Get admin info	-	Yes
POST	/api/auth/singup	Create a new user	{ firstName: "string", lastName: "string", email: "string", password: "string", role: "string" }	No
POST	/api/auth/login	Return user to login	{ email: "string", password: "string" }	No
POST	/api/auth/logout	Clear cookies, logout user	-	No

• Stickers

Method	Endpoint	Description	Resquest Body	Protected Route?
GET	/api/stickers	Get all stickers	-	No
GET	/api/stickers/:id	Get a single sticker by ID	-	No
POST	/api/stickers	Create a new sticker	{ description: "string", size: "string", price: number, category: "string", stock: number, discountPerCent: number }	No
DELETE	/api/stickers/:id	Delete a sticker by ID	-	No
PATCH	/api/stickers/:id	Update an sticker by ID	-	No

• Checkout

Method	Endpoint	Description	Resquest Body	Protected Route?
GET	/api/checkout/session_status	Get checkout session status	-	No
POST	/api/checkout/create-checkout-session	Create a Stripe API checkout session	{ [{ description: "string", price: number, qty: number, discountPerCent: number }] }	Yes

Additional Info

Testing successful checkout

• Card number: 4242 4242 4242 4242
• Exp. date: Any future date
• CVC: Any number

Image Sources

• space_theme
• cart_empty
• success_order
• empty_list
• under_construction
• admin_settings
• The StickerHaus Logo and the banner text (Creative Designs for Sticky Minds) were created using the font generator on TextStudio

Future Improvements

• Create the Wishlist Page
• Update the Stripe checkout form to accept the shipping address information
• Improve responsiveness
• Create Orders object
• Improve UI/UX

Acknowledgements

To the instructor Adnan Reza for all the guidance.

---

🧑🏻‍💻 Developed by Lucas Oliveira