Installation

Welcome to CrazyAuction, a frontend-focused project developed as part of my second year semester project at Noroff. This application serves as an interactive platform for users to engage in online auctions, showcasing my skills in frontend development and design.

Live Site: Crazy Auction

Project Overview

The objective of this project was to create a dynamic and user-friendly frontend for an auction website. Emphasis was placed on:

• Interactive User Interface: Delivering a seamless and engaging user experience.
• Responsive Design: Ensuring accessibility across various devices and screen sizes.
• Modern Web Technologies: Utilizing NextJS 14, Shadcn, TailwindCSS, TypeScript, and pnpm.

Features

Auction Bidding Interface: User-friendly bidding interface for auctions.

User Account Management: Profile creation and management.

Product Listings: Detailed views of auction items with descriptions and images.

Image Storage and Caching

Cloudinary Integration: User-submitted images are stored in Cloudinary. This service handles various image formats and sizes, providing a scalable solution for image storage and retrieval in the application.

Cloudflare Workers for Caching: To enhance performance and reduce costs associated with Cloudinary transformations, Cloudflare Workers are implemented for caching. They serve image requests from Cloudflare's edge network, leading to improved response times and reduced bandwidth usage.

Installation

Ensure you have pnpm installed on your system to manage dependencies and run the project.

Clone the repository and install dependencies:

gh repo clone kyrregjerstad/crazyAuction
cd crazyAuction
pnpm i

Running Locally

Start the development server:

pnpm dev

Visit http://localhost:3000 to interact with the application.

Testing

Maintain code integrity and functionality with unit and end-to-end testing:

# Unit tests:
pnpm test

# End-to-End tests (build the application first):
pnpm build
pnpm test:e2e

# Run End-to-End tests in headless mode:
pnpm test:e2e:headless

Academic Context: This project is part of my academic coursework at Noroff. It serves as a platform to apply and showcase the skills and knowledge I've acquired in frontend web development.