What is Cashback.co.uk
Cashback.co.uk is a reward-based platform where users complete specific "tasks" - such as signing up for free trials, entering competitions, or taking surveys - to earn cash rewards. The site uses a "level" system where users must complete at least one task per level across 10 levels to unlock their total payout.
I worked on most of the frontend of this site, making it look similar to it's previous incantation, but in jinja2 and javascript instead. There were a few differences with the old cashback frontend though:
- When a User completes the ladder, they can take offers in the new VIP section.
- Tasks can be placed on multiple points of the ladder.
- The task image numbers were reduced. Now there is only a task image and a brand image.
Optimal images
All images are saved in the svg or webp image formats. WebP provides superior lossless and lossy compression, allowing the download footprint to be as small as possible, which is vital for mobile use, where a nice fast wifi network connection is not always available.
I used squoosh.app to convert and compress the images to webp. It is a nice site that shows the image quality and possible space savings that you can achieve.
SVG is used for drawings that can scale to any size without reduction in quality, so was used where possible too!
The images are all also stored on AWS S3 and use AWS Cloudfront CDN to speed up delivery. With its awesome caching and global servers.
Container based Card layout
The layout uses a flexible container system that transitions seamlessly between mobile and desktop. The cards maintain their aspect ratio and readability without breaking the layout, using a mobile-first CSS approach
Blurred Background Card Images
When the text and other contents for a "task card" is larger than anticipated, the image has a clever little trick up it's sleeve. It looks like it blurs to the top and bottom, filling the available space. This is achieved by displaying a copy of the card behind the original image with a blur filter applied.
My Activity section - Async fetching and animation
To speed up the page for users with a lot of activity. I built this page to paginate the activity and allow you to choose from various categories of activity. It fetches the data asynchronously after the main page is loaded. There is also a cute little animated padlock that rotates when you cannot cash out yet. A nice touch.
Admin Change Log
I enhanced the previously existing changelog admin feature to show a pretty human readable format of the json data of changes made and added search, filtering sorting and pagination to make it easier to use.