Meta:

Technologies:

NextJSShadcnCloudflare WorkerTanstack QueryNextAuthTypeScriptFramer MotionBunVitestPlaywright

For my second-year semester project at Noroff, I completed the challenge of creating CrazyAuction — an online auction site where users can list items for bidding and place bids on others’ items. This project was developed in response to a brief that called for a functional and interactive auction platform.

Powered by NextJS user transactions are smooth and efficient, thanks to Tanstack Query handling the fetching, mutating, and caching of auction data. Custom animations, created with Framer Motion, enhance the user experience, adding a lively and dynamic feel to the page. The relatively new OKLCH colour space is also used for more vivid colours on screens that support P3, further enriching the visual experience.

User-submitted images are stored using Cloudinary, ensuring efficient management of various image formats and sizes. To further boost performance and reduce costs, Cloudflare Workers cache these images, serving them from Cloudflare's edge network. This setup significantly improves response times and lowers bandwidth usage.

The platform features a multi-step wizard for creating new auctions, ensuring that users can easily list their items without hassle. Authentication is managed securely via NextAuth, enabling both the issuance of initial credits to new users and the secure handling of credits through buying and selling activities.

While non-registered users can browse listings, registered users are given 1000 credits upon joining to kickstart their bidding activities.

The app undergoes full end-to-end testing using Playwright, ensuring all features perform as expected, and unit tests via Vitest to maintain code quality and reliability. These tests run through GitHub actions on every PR that targets the main or development branch.

3