Sled Style is a website design, development and hosting project for a Squamish company.
The project was within their budget and they got an amazing response. They were thoroughly satisfied.
Client’s requirements
My clients wanted to build a website for “The World’s First Professional Mountain Snowmobile Film Competition.”
Snowmobiling professionals would film a video and these videos would be featured on SledStyle.com
Viewers would watch these videos and vote. They can also leave a comment using their Facebook account.
The event ran from Nov. 15 to Dec. 1, 2021, where the athlete with the most votes would receive a $5,000 cash prize.
The most complicated components:
- Voting system
- Sign-up, user login and email verification
- Integrating Vimeo videos
- Competition closing mechanics
Design
The design of the page had to reflect my client’s main page with its greyscale colour scheme and fonts.
The most important design element is the athletes’ portraits which have their backgrounds removed.
The problem is that these are not full-body portraits, so there be a unsightly line at the bottom of the image.
In order to ensure the athletes “blended” into the page, I added a snow dust layer.
Above is a demonstration on grey, which allows you to see how the snow dust layer works.
On white, it looks like a natural blend of a portrait into the page.
Development
Stack: NextJS, Strapi, AWS Lightsail, Elastic Email
I made the decision to use Strapi as Sled Style’s content management system (CMS) because it allows my clients to make their own modifications to the content and also made it easy for me to create a voting system and a user authentication system.
User authentication, voting mechanism
In order for users to vote, they needed to create an account, verify their email address and then vote. This helps reduce voter fraud.
Once a user has registered, they will get an email, as below,
In order to send those emails, I used Elastic Email’s SMTP server. They were fantastic because they were well priced and easy to integrate into Strapi (with nodemailer).
Once the user is confirmed, they can then vote.
Competition closure mechanism
The competition closed at 4pm on Dec. 1, 2021. when they had an Instagram livestream where they announced the winners.
In order to ensure they could close the competition themselves, I programmed a switch into Strapi which would change the text on the web page that changes the main text as well as display a “Winner” button on the person with most votes.
Hosting Strapi/NextJS on AWS
I chose to use AWS Lightsail so that I could control the monthly hosting costs.
Strapi and NextJS were easy to work with using the NodeJS image provided by AWS, and they were automatically restarted using the PM2 process manager.
You only need to modify Strapi’s default address to be at /api rather than port 1337. This is based on a Strapi 3.6.5 installation. You also need to reconfigure the Apache virtual host. Here’s a guide.
Results
I believe I have chosen the right tools to build this app because the project fell within budget and my clients were able to administer the website themselves.
Given the success of this year, my clients will want to do another next year and I think it will implement some newer features like multiple votes, e-commerce functionality and maybe more athletes.
At the start of the project, I had to choose between Strapi or Firebase.
I chose Strapi because it was much more complete. It took less code to achieve what I wanted to achieve.
Firebase had a really good authentication system, but I had to write my own Firebase Functions to get the authentication working.
Strapi was also better because it had a built-in system to creating Content Types via a GUI, whereas I had to code the schema manually if I used Firebase.
A mentor also advised me that Firebase would cost more in the long run, and there’s no way to limit your expenditure, whereas on AWS Lightsail, you can set a maximum expenditure per month.
Sled Style used a $10 server that proved adequate.
Have a project in mind?
Websites. Graphics. SEO-oriented content.
I can get your next project off the ground.
See how I have helped my clients.
